フロントエンド視点でのSEOの実装方法を解説

SEO（検索エンジン最適化）とは、検索エンジンの自然な検索結果に含まれるウェブページの数を増やし、ランキングの位置を向上させるために行われる最適化動作を指す、伝説的な検索エンジン最適化です。これは、話すのは簡単だが、実行するには複雑な技術だと思います。理解することはできても、説明することはできないのです。フロントエンドエンジニアとして、SEO に精通している必要はありませんが、SEO を理解している必要があります。 SEO の不変のルールの 1 つは、常に変化し続けるということです。これは、すべての人に適用できる万能の最適化ソリューションが存在しないためです。しかし、ウェブサイトで SEO を実行するための基本的な、または一般的に受け入れられているルールがいくつかあります。さらに重要なのは、自分自身の実践を持ち、自分に合った効果的な SEO 手法を常に発見することです。

マクロ的な視点から見ると、SEO には、オリジナルコンテンツ、高品質の外部リンク、持続的かつ適度な最適化という 3 つの最も重要なルールがあると思います。

フロントエンドはウェブサイトを構築する上で非常に重要な部分です。この記事ではフロントエンドの観点からSEOの実装方法を説明することに重点を置いています。フロントエンド作業は主にページの HTML+CSS+JS を担当します。これらの側面を最適化することで、SEO 作業の強固な基盤が築かれます。重要なコンテンツを強調表示することで、検索エンジンは現在のページの焦点が何であるかを判断できるようになります。Web サイトのアクセス速度を向上させることで、検索エンジンのスパイダーは Web ページのコンテンツをスムーズかつ迅速に、そして大量にクロールできるようになります。そこで、以下では重要なコンテンツの強調表示と Web サイトの速度向上に焦点を当ててまとめます。

重要なコンテンツを強調する

適切なタイトル、説明、キーワード

360 検索 (so.com) から取得したスクリーンショット

検索におけるこの3つの項目の比重は徐々に下がってきていますが、それでも適度に書いて、役に立つことだけを書いていければと思っています。ここでは小説を書かず、要点を表現してください。

タイトル: 重要なポイントのみを強調します。重要なキーワードは 2 回以上出現せず、先頭に配置する必要があります。各ページのタイトルは、以下に示すように異なる必要があります。

説明: ここで Web ページの内容を要約します。長さは適切で、キーワードの積み重ねは過剰にならないようにしてください。各ページの説明は、以下に示すように異なる必要があります。

キーワード: 重要なキーワードをいくつかリストアップしますが、あまり多くリストアップしすぎないようにしてください。

W3C 標準に準拠したセマンティックな方法で HTML コードを記述します。

検索エンジンにとって、最も直接的に直面するのは、Web ページの HTML コードです。コードが意味的に記述されていれば、検索エンジンは Web ページの意味を簡単に理解できます。たとえば、テキストモジュールには大きなタイトルを付け、h1 ～ h6 を適切に使用し、リストスタイルのコードには ul または ol を使用し、重要なテキストには strong を使用するなどします。つまり、さまざまな HTML タグを最大限に活用して作業を完了する必要があり、もちろん IE、Firefox、Chrome などの主流のブラウザと互換性がある必要があります。

有名な Zen Garden の Web サイト (http://www.csszengarden.com/) を見てみましょう。スタイルがなくても、コードは非常に意味的で、すっきりと見えます。さまざまなスタイルをロードすると、ページの外観を自由に変更できます。

スタイルなし:

読み込みスタイル 1:

読み込みスタイル2:

レイアウトを使用して、重要なコンテンツの HTML コードを先頭に配置します。

検索エンジンは HTML コンテンツを上から下へクロールします。この機能を利用することで、メインのコードを最初に読み取り、広告などの重要でないコードを下部に配置することができます。たとえば、左列と右列のコードが変更されていない場合は、スタイルを変更し、 float:left; と float:right; を使用して 2 つの列の位置を自由に入れ替えるだけです。これにより、重要なコードが前面に配置され、クローラーによって最初にクロールされるようになります。複数の列の場合も同様です。

重要なコンテンツを出力する際には JS を使用しないでください。

スパイダーは JS のコンテンツを読み取らないため、重要なコンテンツは HTML に配置する必要があります。

iframe はできるだけ使用しないでください。

検索エンジンは iframe 内のコンテンツをクロールしないため、重要なコンテンツはフレーム内に配置しないでください。

画像に alt 属性を追加します。

ネットワーク速度が非常に遅い場合や画像アドレスが無効な場合、alt 属性の役割が反映されます。画像が表示されない場合、ユーザーに画像の目的を知らせることができます。

画像を表示できる場合:

画像が表示できない場合:

コンテンツを強調するために title 属性を追加できます。

テキスト効果を維持します。

ユーザーエクスペリエンスと SEO 効果の両方を考慮する必要がある場合は、パーソナライズされたフォントのタイトルなど、画像を使用する必要がある場所では、スタイルコントロールを使用して、テキストがブラウザーに表示されないようにすることができますが、タイトルは Web ページコードに存在します。

例えば、ここの「TVシリーズ分類」では、設計図を完璧に再現するために、フロントエンドエンジニアはテキストを背景画像にしてから、スタイルを使用してHTML内のテキストのインデントをブラウザから逸脱するのに十分な大きさの負の数に設定できます。また、行の高さを設定することでテキストを非表示にすることもできます。注意: display:none; メソッドを使用してテキストを非表示にすることはできません。検索エンジンは display:none; 内のコンテンツをフィルターし、スパイダーによって取得されないためです。

HTMLコード:

CSSコード:

または

CSS を使用して文字をインターセプトします。

テキストが長すぎる場合は、スタイルを使用してテキストを切り取り、高さを設定し、余分な部分を非表示にすることができます。これを行う利点は、テキストを検索エンジンに完全に提示できると同時に、美しいプレゼンテーションも保証できることです。

ウェブサイトの速度を向上させる

CSS と JS を外部リンクして、Web ページコードのクリーンさを確保し、将来のメンテナンスも容易にするようにしてください。

これの利点は、コンテンツ、プレゼンテーション、動作を分離できるため、コードがクリーンになり、保守が容易になることです。

CSS はファイルの先頭に配置され、JS はファイルの末尾に配置されます。ツールを使用して CSS ファイルと JS ファイルを圧縮できます。

CSS スプライト。

HTTP リクエストを減らします。 CSS スプライト技術を使用すると、Web ページで使用されるスライスを 1 つの画像に結合できます。これにより、HTTP リクエストの数が減るだけでなく、スタイル画像を一度に読み込むことができるため、「空白」の Web ページが表示されるという煩わしさを回避できます。

360公式サイトホームページ（http://www.360.cn）メインフロントエンド画像2枚：

画像1:

画像2:

画像の高さと幅を設定すると、ページの読み込み速度が向上します。

静的リソースファイルに有効期限を追加して、ユーザーがローカルキャッシュを通じて Web サイトに高速にアクセスできるようにします。

大規模な改訂の頻度を減らします。

コードを圧縮してフォーマットします。

オンラインにする前に、いくつかのツールを使用して HTML、CSS、JS を圧縮およびフォーマットし、ページサイズを縮小することができます。

CSS 式を使用しないと効率に影響します。

CDN ネットワークを使用すると、ユーザーアクセスを高速化できます。

GZIP 圧縮を有効にすると、ブラウジングの速度が向上し、検索エンジンのスパイダーがクロールできる情報量も増加します。

ブラウザプラグインを使いこなせるようになる。