フロントエンドエンジニアのための SEO のヒント 5 つ

私はさまざまな役職の同僚と頻繁にコミュニケーションを取っていますが、彼らがトラフィック チャネルとしての SEO についてほとんど知らないことに気づきます。 SEO ビジネスを紹介する簡単な PPT も作成しました (これは後で整理します)。同時に、ページの表示やクロールなどに直接影響を与えるフロントエンドエンジニアなど、SEOに携わる人たちの仕事は大いに役立っています。

そしてたまたまTuniu Technology CenterでフロントエンドエンジニアがどのようにSEOを行っているかという記事を見たので、SEOビジネスの観点から整理したいと思いました。

ビジネスの観点から見ると、フロントエンド エンジニアに対する SEO 推奨事項の最も重要な 5 つの側面は、 URL、モバイル フレンドリー、パフォーマンス、ページ要素、コンテンツの表示です。

まず、URLの3つの要素

URL は SEO 作業の基礎であり、見落とされやすい要素でもあります。 URL では、次の 3 つの点に注意する必要があります。

• 異なるページコンテンツには、タブを使用して表示するのではなく、異なるURLを割り当てる必要があります。

• URLは一意である必要があります

• URLは短くて読みやすいものにしましょう

まず、異なるコンテンツは異なる URL で提供される必要があります。当社のフロントエンド エンジニアが特別なトピックに取り組んでいる場合、別の URL を使用して処理するのではなく、JS を使用して Web ページ コンテンツを表示することがよくあります。たとえば、次のページ:

ユーザーが特定のカテゴリをクリックすると、フロントエンドエンジニアは新しい URL を生成せずに、新しく取得したコンテンツで元のページを更新します。その結果、チャネルには 1 つの URL のみが含まれることになります。

SEO が配信される際、実際にはページのサイズに応じて配信されます。この特別ページに URL が 1 つしかない場合、つまり配信できるウェブページは 1 つだけであり、カテゴリ内のページは別の URL が生成されないため配信できません (一般的に、配信されるウェブページが多いほど、SEO トラフィックが多く生成されます)。

2 番目は、 URL の一意性です。通常、URL と Web ページは 1 対 1 で対応しています。Web ページには 1 つの URL しかなく、URL には 1 つのテーマの Web ページしか含まれません。 (注: Web ページに複数の URL がある場合は、 canonical を使用して標準 URL を指定できます)。

最後に、URL は短くて読みやすいものにする必要があります。 Google は URL を使用してウェブサイト内のウェブページの階層を決定します。そのため、長すぎる URL は使用しないでください。さらに、短くて読みやすい URL はユーザー エクスペリエンスを向上させ、ユーザーのクリックを促します (特に英語の URL)。

注: Google は動的 URL を拒否しません。たとえば、WordPress の標準 URL (?p=) は動的です。ただし、パラメータが多すぎることとパラメータの順序が一貫していないという問題を解決する必要があります。

参照ドキュメント: 「シンプルな URL 構造を維持する」https://support.google.com/webmasters/answer/76329?hl=zh-Hans&ref_topic=9460495

第二に、モバイルデバイスは無視できない

フロントエンドの友人の中には、以前と同じように、良い PC ウェブページを作成すれば十分だと考えている人もいます。また、商品も上司もパソコンで閲覧しているので問題ありません。しかし実際には、ほとんどの国や地域で、モバイルトラフィックがPCトラフィックを上回っています。

Statcounterのデータによると、 2016年11月にモバイルトラフィックがPCトラフィックを上回りました。したがって、モバイル Web ページを無視してはなりません。

Google はモバイル ウェブ インデックスを開始しました。これは、モバイル ウェブ ページを主な優先ページとして使用するものです (以前は主に PC でした)。

モバイル ウェブページの場合、Google にはアダプティブ デザイン、動的コンテンツの提供、個別の URL という3 つの設定方法があります。さらに、Google は、コンテンツと静的ファイルをキャッシュでき、パフォーマンスが高速な AMP フレームワークもリリースしました (中国の Baidu や Sogou とも互換性があります)。

参考資料:

• モバイルサイトの検索エンジン最適化 (SEO) の概要 https://developers.google.com/search/mobile-sites/mobile-seo/

• 《AMP》 https://amp.dev/zh_cn/

3. 速度/パフォーマンスはSEOに直接影響する

SEO に直接影響を与える速度指標は 2 つあります。1つは TTFB で、もう 1 つは Web ページの起動時間です。

TTFB はクローラーのクローリングに直接影響します。まず、ほとんどのクローラーは依然として Web ページのソース コードをレンダリングせずにクロールします。次に、各 Web サイトのクロール割り当ては制限されており、クローラーによるアクセスが効率化されると、より多くのインクルードがもたらされ、トラフィックが生成されます。

(注: クローラー技術も発展しています。現在、一部の JS コンテンツを識別できますが、効率が低いため、この部分の割合はまだ比較的小さいです。)

ウェブページを開くのにかかる時間は、ユーザーの検索エクスペリエンスに影響を与え、Google の公開ランキング要素の 1 つでもあります。ウェブページの起動が遅いほど、ユーザーの直帰率が高くなり、不正なクリックとみなされてランキングが下がります。速度がランキングにどのように影響するかについての公式ウェブマスター ブログの記事を次に示します。

PageSpeed に続いて、Google はウェブマスターがウェブページのパフォーマンスを最適化できるようにするためのLighthouse プロジェクトを開始しました。実際のテストでは、Lighthouse はより強力な機能を備え、現在の Web テクノロジーに沿っており、以前の YSlow や PageSpeed をはるかに上回っています。

参考資料:

• 《Lighthouse入門》 https://developers.google.com/web/tools/lighthouse/

• 《モバイル検索ランキングでのページスピードの利用》 https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

4. ページ要素には3つのレベルがあります

ページ要素も SEO に影響を与え、重要度に応じて 3 つのレベルに分けられます。

• 1位：TDK

• 第2層: パンくずナビゲーション、構造化データ

• 第3レベル: Hタグ、ALTタグ

TDK は、タイトル、説明、キーワードの略称です。その中でも、タイトルと説明は最も重要で、SEO 検索用語と検索結果の表示(略して SERP) に直接影響します。パンくずナビゲーションと構造化データも SERP に直接影響します。

H タグと ALT タグは、検索エンジンが Web ページの主要なコンテンツと画像を理解するのに役立ちます。

参照ドキュメント: 「検索結果で適切なタイトルとスニペットを作成する」https://support.google.com/webmasters/answer/35624?hl=zh-Hans

5番目。重要なコンテンツは同時に表示する必要がある

Google の公式ドキュメントには次のように書かれていました。

ほとんどのスパイダー プログラムは、Lynx と同じ方法で Web を参照します。また、JavaScript、Cookie、セッション ID、DHTML、Macromedia Flash などのテクノロジを使用しているため、テキスト ブラウザーでサイト全体を表示できないサイトの場合、スパイダーがクロールできないことがあります。

Google カンファレンスで、Googlebot はすでに単純な JS をクロールして解析し、CSS を通じて重要なコンテンツを識別できることを知りました。ただし、コストの観点から見ると、JS と CSS を解析して識別する効率は、（ソース コードをキャプチャするだけの場合と比較して）まだ比較的低いです。したがって、Google では、重要なコンテンツは非同期ではなく同期して表示することを依然として推奨しています。

Google も今年、一時的な解決策としてダイナミック レンダリング テクノロジーを導入しました。ダイナミック レンダリング テクノロジーのプロトタイプは次のとおりです。

参考資料:

• 「Google に適したウェブサイトを作成する手順」https://support.google.com/webmasters/answer/40349?hl=zh-Hans

• 《ダイナミックレンダリングの実装》https://developers.google.com/search/docs/guides/dynamic-rendering?hl=zh-cn

おすすめの読み物

• Google の「検索エンジン最適化 (SEO) 初心者向けガイド」https://support.google.com/webmasters/answer/7451184?hl=zh-Hans

• Googleの「Search Consoleヘルプ」https://support.google.com/webmasters/#topic=9128571は、実際にはGoogleの公式SEOドキュメントです。

• Baidu SEO 公式ドキュメント - 「Baidu Search Academy」 https://ziyuan.baidu.com/college#/

• おすすめの本: 「Into the Search Engine」、「This is the Search Engine」

追記

フロントエンド SEO についてご質問がある場合は、メッセージを残してください。

(出典: SEO テクノロジーフロー)