見出し画像

SEOで成功するためのJamstack【後半】

ヒューマンサイエンス

#Jamstack
#JavaScript
#WordPress
#cdn
#static_site_generator
#CSS
#Next .js
#Netlify
#HTML
#Gatsby
#Hugo

SEOで成功するためのJamstack【前半】の続きです。【前半】を読んでいない方はそちらから読むことをおすすめします！

原文：https://bejamas.io/blog/jamstack-seo-guide/

4. ウェブサイトのパフォーマンスに影響を与えるために、他にできることはありますか？

他にもいくつか注意すべき点があります。ウェブサイトのパフォーマンスを向上させるために、それらが正しく行われているかどうかを確認してください。

4－1 パフォーマンス・バジェット

新規にウェブサイトを立ち上げる場合や、リニューアルを計画している場合は、パフォーマンス・バジェットに注意してください。機能性やユーザーエクスペリエンスを損なうことなく、パフォーマンス問題のバランスを改善できるように、背後にある目的と全体的な考え方は、ウェブ構築の初期段階で設定するようにしてください。

それは私たちのウェブサイトの再構築の際にも大いに役立ちました。この方法を取ることに決めた場合、パフォーマンス予算計算機を使って計画を開始してください。

4－2 URL構造、サイト構造、ナビゲーション

URLやウェブサイトの構造、内部リンク、ナビゲーションが明確であるかどうかは、ユーザーやクローラーの視点から見たウェブサイトの印象に影響を与えます。ウェブサイトの構造の重要性、影響、複雑さは、ウェブサイトの規模に応じて大きくなります。守るべき一般的なルールがいくつかあります。

Googleは、ホームページからページにたどり着くまでのクリック数が少ないほど、ウェブサイトにとっては良いと考えています。

キーワード調査と並行してウェブサイトの構造を計画することで、ウェブサイトのオーソリティを高め、それをページに効率的かつ均等に広げることができ、目的のキーワードすべてで検索結果に表示される可能性を高めることができます。

ウェブサイトメニューには明確なカテゴリ、キーワード、メインページへのリンクがあることが必須です。内部リンクに注意してみてください。つまり、トピックに関連した記事には、トピックに関連したパラグラフにのみリンクします。ウェブサイトのどのページからもリンクされていない、いわゆる孤児ページを持つことは避けましょう。

最後に、キーワードを重視した短いURLを使用し、ハイフンで単語を区切って読みやすくします。URLは、そのページの内容をできるだけわかりやすく表現することを心がけてください。

4－3 JavaScript

WebサイトのJavaScriptの使用量を減らします。それはとてもシンプルなことです。JSはウェブサイトの機能を向上させる一方で、使用状況によってはウェブサイトのパフォーマンスを低下させます。

新しいCore Web Vitalsの世界では、JSの実際の実行時間がFirst Input Delay (FID)に最も影響します。

一般的には、サードパーティ製のスクリプトを遅らせるか、削除します。JSのパフォーマンスを向上させ、重要でないスクリプトは可能な限り延期します。JSコードは必ずメインコンテンツの下に置くようにしましょう。そうすればユーザーエクスペリエンスを低下させることはありません。Google Tag Managerを使えば、例えばカスタムJSを使って簡素化することができます。

4－4 画像

ページ全体のサイズとページの読み込み速度を最も大きく節約できるのは、画像の最適化です。まず、レイジーローディングを活用することができます。

2つ目は、JPG（またはPNG）よりも最適化され、ファイルサイズが小さくなるように設計された、WebPまたはAVIF画像フォーマットを利用することです。

その結果、ウェブサイトがより速くなります。画像を最適化して圧縮し、CDNから配信することで、LCP（Largest Contentful Paint）のスコアを向上させることができます。画像の最適化には、ウェブデザインやUXの要素も含まれていることを覚えておいてください。単純な画像のサイズ変更だけの問題ではありません。

ほとんどの静的サイトジェネレータは、ネイティブな画像処理ソリューションを提供しようとしています。Gatsbyを使用している場合は、GraphQLとSharpを利用したGatsbyのネイティブな画像処理機能とシームレスに動作するように設計されたgatsby-imageパッケージを使用します。画像の最適化に役立つだけでなく、ぼかしアップ効果や、現在画面に表示されていない画像の遅延読み込みを自動的に行うことができます。また、LCPを改善し、AVIFのサポートを追加した新しいgatsby-plugin-image（現在ベータ版）を使用することもできます。
バージョン10.0.0以降、Next.jsはImage ComponentとAutomatic Image Optimizationを内蔵しています。画像はデフォルトでレイジーロードされ、Cumulative Layout Shiftの問題を回避するような方法でレンダリングされ、ブラウザがサポートしている場合はWebPなどの最新フォーマットで提供され、ユーザーのリクエストに応じてオンデマンドで最適化されます。
Hugoのユーザーは、このショートコードを画像のリサイズ、レイジーローディング、プログレッシブローディングに適用できます。あるいは、ImageOptimのようなオープンソースのソリューションを使用して、imagesフォルダで実行することもできます。最後に、Jekyllのユーザーは、ここにあるようなことをしたり、Imgbotをセットアップしたりすることができます。
パフォーマンス指標にこだわらず、心に留めておくようにしましょう。例えば、あなたのニッチ/トピック/キーワードの検索結果が、動画や派手なアニメーションを使ったページで埋め尽くされている場合、パフォーマンススコアがほとんどの人にとって問題であることは間違いありません（中途半端な数字の話ですが）。しかし、だからといって、高性能なスコアを持つテキストや画像ばかりのページが上位に来るとは限りません。ましてや、ターゲットとしている人たちにうまくコンバージョンできない可能性もあります。なぜ？ランキングは多要素のゲームであり、パフォーマンスはこのパズルの一部分に過ぎません。

5. インデックスとクローラビリティ

画像1

どんなに素晴らしいコンテンツを作っても、検索エンジンに適切にインデックスされ、クロールされなければ意味がありません。検索エンジンがあなたのウェブサイトをクロールすることを許可することは一つのことです。また、ボットが必要なページをすべてクロールして発見できるようにすることと、ボットに見せたくないページを排除することは別の問題です。

5－1 Robots.txtとXMLサイトマップ

robots.txtファイルは、検索ボットにクロールさせたいファイルやフォルダ、またはクロールさせたくないファイルやフォルダに関する情報を提供します。ウェブサイトのセクション全体を非公開にするのに役立ちます（例えば、すべてのWordPressウェブサイトには、ボットが管理ディレクトリをクロールするのを防ぐrobots.txtファイルがあります）。また、画像やPDFがインデックスされないようにしたり、内部検索結果ページがクロールされて検索エンジンの検索結果に表示されないようにしたりすることもできます。

robots.txtファイルがウェブサイトのトップレベルのディレクトリにあることを確認し、サイトマップの位置を示し、クロールされたいウェブサイトのコンテンツ/セクションをブロックしないようにしてください。

一方、サイトマップとは、Webサイトの構造やWebサイトのページに関する貴重な情報をクローラーに提供するためのXML形式のファイルです。どのページがウェブサイトにとって重要なのか、どれくらい重要なのか、ページが最後に更新されたのはいつなのか、どれくらいの頻度で変更されたのか、ページの代替言語版はあるのか、などをクローラーに伝えます。

サイトマップは、検索エンジンのクローラーがページをより速くインデックスするのに役立ちます。特に、何千ページもある場合や、ウェブサイトの構造が深い場合はなおさらです。サイトマップを作成したら、Google Search Consoleを使って大きなGに知らせましょう。

Gatsbyのユーザーは、robots.txtとsitemap.xmlを自動的に作成するプラグインを利用することができます。Jekyllのユーザーは、sitemapプラグインを使用するか、このチュートリアルに従って手動でサイトマップをすばやく生成することができます。robots.txtについては、プロジェクトのルートにファイルを追加するだけです。

Hugoには、サイトマップのテンプレートファイルが組み込まれています。一方、robots.txtについては、他のテンプレートと同様にカスタマイズしたファイルを生成することができます。Next.jsを使用している場合、最も簡単で一般的な方法は、このようなソリューションを使ってビルド中にサイトマップとrobots.txtを生成することです。

5－2 重複コンテンツ、リダイレクト、カノニカリゼーション

画像2

私たちは皆、自分のコンテンツがオリジナルであることをGoogleに認めてもらいたいと思っています。しかし、時にはそれが問題になることもあります。1つのページを複数のURL（HTTPおよびHTTPS）でアクセスしている場合や、Mediumなどのブログのようなプラットフォームでオリジナルの記事を共有している場合、あるいは異なるページが似たような内容になっている場合などです。

どのような問題があり、そのような場合にはどうすればよいのでしょうか。

いくつかのページやウェブサイトで、同じまたはわずかに異なるコンテンツを持つ行為は、重複したコンテンツとみなされます。どのように類似したコンテンツを重複としてマークする必要があるかという問題には、万能なものはありません。答えは様々で、Googleや他の検索エンジンの解釈にもよります。例えば、Eコマースサイトでは、複数のアイテムページに同じコンテンツを掲載することがありますが、そのコンテンツが重複していると表示されることはほとんどありません。

しかし、同じコンテンツを複数のページやドメインで意図的に使用しようとすると、オリジナルのページやウェブサイトにダメージを与える可能性が高くなります。

なぜ？これでは、検索エンジンが検索クエリに対してどのページがより関連性が高いかを判断するのが難しくなってしまいます。どのURLがオリジナル/カノニカルであるかをGoogleに明示的に伝えないと、Googleが選択してしまうため、予想外のページがブーストされてしまう可能性があります。

重複したコンテンツへの対応は、状況に応じていくつかの方法があります。

内部の1ページまたは数ページに重複したコンテンツが表示されている場合、最善の方法は、もちろんコンテンツをリライトすることです。しかし、同じトピック/キーワード/製品をカバーしているケースでは、重複したページから元のページに301リダイレクトを設定することを検討してください。URLリダイレクトは、ウェブサイトの構造に変更を加えたことを検索エンジンに知らせるのにも役立つ習慣です。

例えば、ページのURL構造を変更しても、バックリンクがもたらすメリットはそのまま残したい場合、301リダイレクトでは、新しいURLを以前のURLの後継として宣言することになります。

Netlifyでウェブサイトを運営している場合は、publicフォルダのルートに追加する_redirectsファイルで、リダイレクトやリライトルールを簡単に設定することができます。同様に、Vercel上でプロジェクトを展開している場合は、ディレクトリのルートにあるvercel.jsonファイルで、以下のようにリダイレクトを設定します。Amazon S3ユーザーの場合は、例えば以下のようにリダイレクトを設定します。

重複するコンテンツに対処するもう一つの方法は、リンクタグにrel=canonical属性を使用することです。
<link href="URL OF ORIGINAL PAGE" rel="canonical" />
使い方は2通りあります。上記のコードを使用すると、検索エンジンが元の正規バージョンのページを指し示すようになります。これは、現在アクセスしている1つのクローラーが、指定されたURLのコピーとして扱われるべきだということを意味しています。

または、既存のページへの自己参照rel=canonicalリンクとして使用します。
<link href="PAGE URL" rel="canonical" />
どちらの場合も、canonical属性は、正しいページや好ましいバージョンのページがインデックスされるようになります。

例えば、Gatsbyにはシンプルなプラグインgatsby-plugin-canonical-urlsがあり、ウェブサイトのcanonical URLに使われるベースURLを設定します。Next JSを使用している場合は、next-absolute-urlというパッケージを使用するか、Next.jsプロジェクトでのSEO管理を容易にするプラグインであるNext SEOをオプトアウトすることができます。

Hugoは、パーマリンク、エイリアス、リンクの正規化をサポートしており、相対的なものとそうでないものを扱うための複数のオプションを備えています。ここで説明するように、絶対的なURLです。Jekyllのcanonical URLソリューションの可能性の一つは、ここで見つけることができます。

5－3 構造化データ

画像3

Googleをはじめとする検索エンジンは、Schema.org構造化データを使用して、ページのコンテンツをよりよく理解し、豊富な検索結果で表示できるようにしています。

構造化データを正しく実装することは、直接的にはランキングに影響しないかもしれませんが、スキーママークアップを利用した約30種類の豊富な検索結果に表示される可能性を高めることができます。

適切な構造のデータを作ることはとても簡単です。コンテンツに適したスキーマについては、schema.orgをご覧ください。GoogleのStructured Data Markup Helperを使ってコーディングの手順を確認してもよいです。

構造化データは、ウェブサイトのページに関する詳細な情報をGoogle（および他の検索エンジン）に提供するための手段の一つですが、最大の課題は、ページで使用するタイプを決定してしまうことです。ベストプラクティスは、集中して、通常、1つのページで1つのトップレベルタイプを使用することです。

構造化データの使用は、例えば、eコマース、レシピ、仕事など、検索結果がタイトルと説明文だけでなく、それ以上の内容を表示するような検索クエリに最も役立ちます。MOZのこの記事を見てみましょう。どの構造のデータが自分に合っているかを理解するのに役立ちます。

構造化データをJamstackで扱うには、2つの方法があります。ほとんどのヘッドレスCMSでは、カスタムコンポーネントの定義という形で、構造化データをページごとに管理するためのツールが提供されていますので、ご安心ください。あるいは、使用しているテンプレートの一部としてスキーマを追加することもできます。

5－4 クロールの予算

クロール予算とは、検索エンジンがあなたのサイトをどの程度注目するかということです。大量のページを持つ大規模なウェブサイトを運営している場合、何をクロールするか、いつクロールするか、クロールにどれだけのリソースを割り当てられるかの優先順位付けが非常に重要になり、それをクロールバ予算で管理しています。適切に対処しないと、重要なページがクロールされず、インデックスされない可能性があります。

かなりの数のページを持つウェブサイトを運営していたり（1万ページ以上と考えてください）、クロールが必要な大量のページを持つ新しいセクションを最近追加したりしていなければ、クロール予算を自動操縦にしておくことをお勧めします。

しかし、サイトのクロール予算を最大化するためにできることがいくつかあることを知っておくとよいでしょう。そのほとんどが、ウェブサイトのパフォーマンス向上、リダイレクトや重複コンテンツの制限、良好なウェブサイト構造と内部リンクの設定など、すでに述べたものです。

6. テクニカルSEOを一言で言うと

今日のSEOは開発者、UX、製品、そしてSEO担当者の総力を結集したものです。潜在的な視聴者、検索エンジン、そしてビジネスの目標と期待のバランスを取ること。正しい方法で行えば、ウェブサイトのトラフィックを増やすための戦略的な方法というだけではありません。UX、コンバージョン、アクセシビリティを同時に向上させることができます。

スピードとパフォーマンスがユーザーと検索エンジンの両方から注目されるようになり、ウェブサイトのパフォーマンスを支える信頼性の高いアーキテクチャが必要になっています。

Jamstackはウェブサイトを構築する新しい方法かもしれませんが、パフォーマンスやSEOの利点に加えて、従来のスタックに比べて印象的な利点を提供しています。その中でも、セキュリティとスケーラビリティはトップクラスです。

次回は、コンテンツ、オンページとオフページの最適化についてお話しします。

最後まで読んで下さり、ありがとうございました。

Jamstackに関心がある方はこちらまでお問合せください！
株式会社ヒューマンサイエンス
https://www.science.co.jp/

いいなと思ったら応援しよう！