JS SEO: 検索結果で上位に表示されるように JavaScript を最適化する方法

JavaScript は、Sun Microsystems によって開発されたスクリプト言語です。 JavaScript は現在、インタラクティブな Web ページを作成するために Web ブラウザーで使用される標準のプログラミング言語です。 JavaScript は、Web サイトに双方向性を追加するために最も一般的に使用されています。ユーザーのアクションに基づいて Web サイト ページに表示されるコンテンツ (テキストなど) を変更するなど、動的な動作を提供するために、HTML ドキュメントに埋め込まれていることがよくあります。

JavaScript の最初のバージョンは 1995 年にリリースされ、LiveScript と名付けられました。 1997 年、Netscape は JavaScript 1.0 と呼ばれる JavaScript の独自の実装を導入しました。それ以来、JavaScript は広く採用されるようになり、現在ではクライアント側スクリプトの事実上の標準となっています。

SEO はどの Web サイトでも重要な部分であり、検索結果で上位に表示されるように JavaScript を最適化することをお勧めします。これを行うには、JavaScript を縮小し、読み込みを延期し、HTTP リクエストの数を減らし、ページ (および個々のファイル) から不要なスクリプト タグを削除し、ファイルが小さければ 1 つのファイルに統合します。もっと。

JS と CSS を縮小します。

JS と CSS を縮小することは、これらの余分なバイトを取り除く良い方法です。これは、機能に影響を与えずにソース コードから不要な文字を削除するミニファイアを使用して行うことができます。

縮小プロセスは、空白とコメントを削除し、可能な場合は変数名を短くすることで機能します。例えば：

 var $div = document.getElementById("myDiv");

 var v_d__e___ = document .getElementById( "m_i_d" );

このプロセスによってコードの機能が変更されるわけではないことに注意してください。実際、必要に応じてインタープリターを介してこのバージョンを実行することもできます (お勧めしませんが)。

JavaScript の読み込みを遅らせる

HTML コードでは、タグの defer プロパティを使用して、ブラウザにスクリプトを非同期でロードするように指示できます。これは、ページの最初のレンダリングに重要ではなく、追加の機能と機能でページを強化するスクリプトに役立ちます。

これらのスクリプトを延期すると、通常のダウンロードの優先度を超えて読み込まれるため、コンテンツの表示がすぐにブロックされることはありません。ただし、サイトのメイン ナビゲーション メニューなど、すべての機能をすぐに必要とする主要なスクリプトにこの方法を使用しようとすると、読み込み時間が短いため、正しく機能しません。

defer を実装することの欠点は、すべてのブラウザーでサポートされているわけではないことです。 Firefox 3 以降 (およびそれ以降)、Internet Explorer 10 以降 (およびそれ以降)、Safari 5 以降、および Chrome 14 以降でのみ機能します。

HTTP リクエストの数を減らす

HTTP リクエストの数を減らす 1 つの方法は、すべての CSS ファイルと JavaScript ファイルを 1 つのファイルに結合することです。コードが数行以上ある場合、これはページの重量を減らすのに大いに役立ちます。ただし、小さなファイルが多数ある場合は、それらを 1 つの大きなファイルに結合することはできません。ユーザーのブラウザが一度にすべてをダウンロードするには余分な時間が必要になるためです。

不要な JavaScript、CSS、HTML を削除する

幸いなことに、JavaScript を検索用に最適化するのにマスター コーダーである必要はありません。いくつかの簡単なルールに従うだけです。

1. 未使用の CSS を削除します。
2. 未使用の HTML を削除します。
3. 未使用の JavaScript を削除します。
4. コードから不要なコメントと空白を削除します (「//」や「/* */」など)。
5. Jenkins CI サーバーや TravisCI などのビルド サーバーで Google Closure Compiler や UglifyJS 2 などのツールによって縮小されたときにプロジェクト内の他の部分が壊れないように、JavaScript ファイル内の不要な改行、セミコロン、括弧、中括弧、およびコンマを削除します。サーバーなど…

ファイルを統合します。

JavaScript ファイルを 1 つのファイルに統合することをお勧めします。これは、連結や縮小などの機能を使用できる Grunt や Gulp などのビルド システムで実行できます。システムの構築について学びたくない場合は、これを自動的に行う多くのサービスがあります。

最も簡単な方法の 1 つは、Cloudflare (無料プランが利用可能) を使用することです。インターフェイスを介してすべてのファイルをアップロードし、[設定] タブの [縮小] オプションを使用するだけです。

サーバー上の各ファイルのカスタム URL を提供し、訪問者のブラウザーに送り返す前に、それらのファイルをすべて最小化します。これにより、Web 上のさまざまなドメインからの複数のリクエストではなく、Cloudflare からのリクエストが 1 つしかないため、はるかに高速になります。

もう 1 つのオプションは JSPACK (有料) です。これは似ていますが、他の圧縮ツールがデフォルトで提供するよりも優れた最適化パフォーマンス結果を達成するために、圧縮/削除されるコードの正確な量をより多くの機能と制御を提供します。一部のアプリケーションでは、インターネット全体の別の場所にある指定されたディレクトリ構造に含まれる JavaScript ファイルに含まれる特定のデータにアクセスする必要がある場合があります...

さらに、カスタム ロゴとカスタム グラフィックを作成して HTML5 Web サイト/アプリ内に配置することで、人々があなたのことを確実に覚えられるように、ちょっとした魅力を与えることができます。

タイトルと説明！

JavaScript で記述されたページには、HTML や CSS で記述されたページと同じ SEO メタ タグが多数必要です。タイトルと説明はどちらも、メタ タグの効果的な SEO 戦略に不可欠な要素です。

Web ブラウザーは title SEO メタ要素を表示し、検索エンジンは通常、この情報を使用して、インデックスを作成したページのタイトルを作成します。 Web ブラウザーには表示されませんが、検索エンジンは description SEO メタ要素を使用して、インデックスが作成されたページのテキスト スニペットまたは説明を生成できます。

JavaScript を使用してタイトルと説明の SEO メタ タグを定義することは、完全に有効な方法であるため、問題はありません。

Google によると、これらの SEO メタ タグの両方を変更するために JavaScript を使用することさえ可能です。要するに、タイトルと説明のメタ SEO メタは、ほとんどが JavaScript で記述されたページを含め、すべてのページに含める必要があります。

コンマが最初のコーディング スタイルなどを取り除きます。

まず、これを邪魔にならないようにしましょう: コンマが最初のコーディング スタイルを停止してください。これらは、JavaScript でコンマを使用して変数宣言とパラメーター リストを並べることができた昔の遺物です。これはもはや有効ではなく、そもそも合法であってはなりません!

では、コードがこのスタイルを使用しているかどうかはどうすればわかりますか?見分け方は簡単です。カンマ (または空白) で区切られた同じ行にある複数のステートメントを探すだけです。以下の例を参照してください。

 var x = 1; var y = 2; var z = 3;

JavaScript がこのようになっている場合、またはさらに悪いことに、各ステートメントの間に空白行がある場合は、深刻な作業が必要です!幸いなことに、これらの問題が何であり、どこを探すべきかがわかれば、これらの問題を修正することはそれほど難しくありません。

本文 (またはフッター) の下部から JavaScript を読み込みます。

JavaScript はボディ (またはフッター) の下部からロードし、CSS は上部からロードする必要があることに注意してください。

これは、検索エンジンが Web ページを上から順にクロールするため、JavaScript や CSS ファイルなどに到達した後に表示されるものはすべて無視する傾向があるためです。

Ajax や遅延スクリプトなどの非同期読み込み手法を使用している場合、これらのメソッドはファイルを並行して読み込みますが、インデックス作成も可能であるため、これについて心配する必要はありません。

CSS を一番上に、JavaScript を一番下に配置します。

ページを検索エンジン向けに最適化する最も簡単な方法の 1 つは、CSS を上部に配置し、JavaScript を下部に配置することです。これは、ブラウザーが JavaScript の前に CSS をロードするためです。これを行うには、スタイルシートを指すタグをインデックス ファイルに追加してから、JavaScript ファイルを参照する別のタグを追加します。

これが重要な理由は、ブラウザーで JS が無効になっている場合、適切にコーディングされていない限り、サイトをまったく使用できないためです。つまり、CSS を最初に配置する必要があります。

コンポーネントを gzip で圧縮します。

Gzip は、ファイルのサイズを縮小する圧縮アルゴリズムです。 JavaScript と CSS の両方で使用できるため、使用しているすべてのコンポーネントに使用できます。

CDN またはホスティング プロバイダーにアップロードする前に、コードを圧縮する必要があります。 Gzip の削減により、ユーザーがページにアクセスするときに必要なバイト数以上をダウンロードする必要がなくなります。

Gzip のサポートは最新のすべてのブラウザーで利用できるため、ブラウザー側とサーバー側 (NodeJS) の両方に gzip を追加する価値があります。

コンテンツを圧縮するには、gzip ベースの圧縮を使用する必要があります。このツールを使用して、ファイルが正しく圧縮されているかどうかを確認できます。

CSS 式は避けてください。

CSS式は、スタイルシート内で JavaScript を使用できるようにする CSS3 で導入された機能です。これらを使用して、プロパティの値を動的に変更したり、値の配列を反復処理したりすることもできます。

ただし、CSS 式を使用すべきでない理由は次のとおりです。CSS 式は最適化が難しく、ブラウザーがスタイルシートをキャッシュするのが難しくなります (これは悪いことです)。さらに、それらをサポートしていない古いブラウザーでは、予期しない動作が発生する可能性があります。したがって、絶対に使用しないでください。

最後の言葉

検索を最適化する方法で JavaScript を使用することは、検索結果で上位にランク付けするための優れた方法です。ただし、すべてのユーザーが JavaScript を有効にしたり、サイトを閲覧するときに利用できる帯域幅が同じであるとは限らないことに注意してください。

これらの制限は、サイト上の他のタイプのコンテンツが Google のアルゴリズムによって処理されるように、SEO 目的で JavaScript コンテンツを最適化するときに考慮されない場合、検索ランキングでの Web サイトのパフォーマンスに影響を与える可能性があります。