開発者のための技術的SEO | 2023年のチェックリスト

開発者のための技術的SEO | 2023年のチェックリスト

📚 目次

1. 👀 はじめに
2. 🔍 技術的SEOとは
3. 🎯 ユーザーエクスペリエンスの最適化
4. 🌄 画像の最適化
5. ♿ アクセシビリティの向上
6. 📱 モバイル対応
7. 💡 JavaScriptの削減
8. 🔗 URLの最適化
9. 🤖 メタデータの管理
10. 🛠 管理タスク

👀 はじめに

ウェブ開発者になった理由はSEOではありませんが、魅力的なアプリやウェブサイトを作りたいし、その作品を多くの人に見てもらいたいとも思っています。そして、実際にSEOはその点で大いに役に立ちます。たとえば、コンストラクション業界にいて、企業に店舗を建てるように依頼されたとしましょう。それを実現して美しい店舗を作ったけれど、その店舗をどこに置いたところで道路や歩道など何も繋がっていない砂漠に置いてしまったら、それは企業が望んだものではありません。それは同じです。良い見た目のサイトを作っても、テクニカルなSEOがなければ同じことです。私はAlexです。Prismicで開発体験チームをリードしています。今日は技術的なSEOについて話し、サイトのSEOを向上させるために必要なことすべてをカバーします。SEOの方程式には2つの側面があります。コンテンツとテクニカルです。コンテンツSEOは、高品質なコンテンツの作成、タイトルとディスクリプションの最適化など、主にライターやコンテンツチームが担当します。一方、テクニカルなSEOは、ウェブサイトの構造とページの速度の最適化です。これは、開発者の責務です。これを3つの主要なカテゴリに分類しています。ユーザーエクスペリエンス、メタデータ、およびウェブサイトの管理タスクです。以下では、それぞれのカテゴリについて詳しく説明します。

🔍 技術的SEOとは

技術的SEOは、コンテンツが検索エンジンによって適切にインデックスされ、評価されるために必要なテクニカルな側面です。これはウェブサイトのユーザーエクスペリエンス、画像の最適化、アクセシビリティ、モバイル対応、JavaScriptの最適化、URLの最適化、メタデータの管理、および管理タスクの完了によって達成されます。以下では、それぞれの側面について詳しく説明します。

🎯 ユーザーエクスペリエンスの最適化

ユーザーエクスペリエンス（UX）は、Googleにとって非常に重要です。Googleはユーザーに最高のサイトを提供したいと考えていますので、サイトの読み込み時間が非常に遅い場合、移動中に大きく移動する場合など、ユーザーにとって不快な体験になる場合、サイトを推奨しません。以下では、ユーザーエクスペリエンスを向上させるための8つのポイントを説明します。

1. コアウェブバイタル: Googleは、サイトのユーザーエクスペリエンスがどれほど優れているかを評価するために、ラージコンテンツフルペイント、ファーストインプットディレイ、累積レイアウトシフトの3つのメトリクスを使用しています。これらのメトリクスは、サイトのパフォーマンスに直接影響を与えるため、高いスコアを獲得する必要があります。

2. 画像の最適化: 画像は通常、ウェブサイトで送信される最も大きなファイルです。大きなサイズの画像はページの読み込み速度を遅くするため、最適化が必要です。画像はレスポンシブ対応にする必要があります。モバイルデバイスには小さな画像を、デスクトップには大きな画像を送信する必要があります。また、利用可能な最新のフォーマット（AvifやWebPなど）を使用するようにしましょう。画像CDNを使用して異なるフォーマットとサイズの画像を扱うこともできます。さらに、画面外の画像を遅延読み込みすることも重要です。

3. アクセシビリティの向上: アクセシビリティの向上は、ユーザーエクスペリエンスだけでなく、SEOにも役立ちます。画像には代替テキストを追加することが重要です。また、適切な見出し構造を使用することも忘れないでください。セマンティックなHTML要素を使用すると、コンテンツがより理解しやすくなります。

4. モバイル対応: 約60%の訪問者がモバイルデバイスを使用していますので、モバイル対応は必須です。モバイルフレンドリーなサイトは、検索結果で高く評価されます。ビューポートメタタグを適切に設定し、すべてのデバイスで読みやすいフォントサイズを使用することも重要です。

5. JavaScriptの削減: サイトのパフォーマンスを向上させるためには、JavaScriptの削減が必要です。無駄なJavaScriptの使用は、ページの読み込み時間を遅くし、ユーザーエクスペリエンスを損なう原因になります。パッケージのサイズを確認し、必要のないものを削除するようにしましょう。また、サイトのパフォーマンスを低下させるトラッカーの使用も避けるべきです。

6. URLの最適化: クリーンで短く、説明的かつキーワード豊富なURLを使用することも重要です。Googleは、読みやすいURLを好みます。適切なURLパターンを使用し、ユーザーとGoogleがコンテンツを理解しやすいようにしましょう。

🌄 画像の最適化

画像の最適化は、ユーザーエクスペリエンスとSEOの両方に重要な役割を果たします。大きな画像や非最適化の画像はページの読み込み速度を低下させるため、最適化を行うことが重要です。以下では、画像の最適化に関するポイントを説明します。

1. 画像の圧縮: 画像を圧縮することで、ファイルサイズを減らし、ページの読み込み時間を短縮することができます。画質を損なうことなく圧縮を行いましょう。

2. 適切なフォーマットの使用: 最新の画像フォーマット（AvifやWebPなど）を使用することで、ファイルサイズを小さくしながら高品質な画像を提供することができます。ユーザーのブラウザが対応している場合は、これらのフォーマットを使用しましょう。

3. サイズの最適化: モバイルデバイスとデスクトップ向けに適切なサイズの画像を提供することも重要です。レスポンシブイメージやソースセットを使用して、画像のサイズを適切に管理しましょう。

4. 遅延読み込み: 関連のない画像や画面外の画像を遅延読み込みすることで、初期ページの読み込み速度を向上させることができます。ユーザーが画像を表示するまで、画像を読み込む必要はありません。

5. ALTテキストの使用: ALTテキストは、画像が表示されない場合やスクリーンリーダーを使用するユーザー向けに、画像の説明を提供します。適切なALTテキストを使用することで、画像がアクセシブルになり、SEOにも役立ちます。

これらのポイントに注意しながら、画像の最適化を行いましょう。

♿ アクセシビリティの向上

アクセシビリティは、ウェブサイトをより包括的にするための重要な要素です。アクセシビリティの向上は、ユーザーエクスペリエンスを向上させるだけでなく、SEOにも役立ちます。以下では、アクセシビリティの向上に関するポイントを説明します。

1. ALTテキストの使用: 画像には、代替テキスト（ALTテキスト）を追加することが重要です。これにより、視覚障がいのあるユーザーや画像がロードされない場合のユーザーが、画像の内容を理解することができます。

2. 適切な見出しの使用: 適切な見出し構造を使用することは、コンテンツの組織化と理解を助けます。H1要素をトピックに、H2要素をサブトピックに使用するなど、セマンティックなHTML要素を使用してコンテンツを整理しましょう。

3. セマンティックなHTMLの使用: 見出しだけでなく、リスト、ナビゲーション要素、記事要素など、セマンティックなHTMLを使用してコンテンツを整理しましょう。これにより、ユーザーエクスペリエンスが向上し、コンテンツを理解しやすくなります。

アクセシビリティの向上は、すべてのユーザーにとって良いことです。SEOにもプラスの効果があるため、これらのポイントに注意してください。

📱 モバイル対応

モバイル対応は、現代のウェブデザインにおいて不可欠な要素です。モバイルデバイスからの訪問者の割合は非常に高くなっており、Googleもモバイルフレンドリーなサイトを重視しています。以下では、モバイル対応の重要なポイントを説明します。

1. レスポンシブデザイン: モバイルデバイスとデスクトップデバイスの両方に対応したレスポンシブデザインを採用しましょう。画面サイズに応じて適切にレイアウトや要素の表示を調整することが重要です。

2. ビューポートメタタグの設定: メタタグを使用してビューポートを設定し、モバイルデバイスで読みやすいフォントサイズを使用しましょう。適切な表示を実現するためには、メタタグの設定が重要です。

これらのポイントに注意しながら、モバイル対応のウェブサイトを作成しましょう。

💡 JavaScriptの削減

JavaScriptの削減は、ページの読み込み速度の向上に役立つ重要な手法です。以下では、JavaScriptの最適化に関するポイントを説明します。

1. バンドルのサイズの確認: 使用しているフレームワークから生成されるバンドルのサイズを確認し、不要なパッケージを排除しましょう。不要なパッケージが多すぎると、ページの読み込み時間が非常に遅くなる可能性があります。

2. トラッカーの削減: サイトにトラッカーを追加すると、ページの読み込み時間が遅くなる可能性があります。ユーザーエクスペリエンスとSEOの両方に悪影響を与えるため、トラッカーの数を制限することが重要です。

3. JavaScriptを必要としないコンテンツの読み込み: 前提として、JavaScriptなしでもコンテンツが表示されるようにすることが重要です。サーバーサイドレンダリングや静的ジェネレーションを使用して、コンテンツがすぐに表示されるようにしましょう。

これらのポイントを考慮しながら、サイトのパフォーマンスを向上させるためにJavaScriptを最適化しましょう。

🔗 URLの最適化

適切なURLの設計と最適化は、SEOにおいて非常に重要です。以下では、URLの最適化に関するポイントを説明します。

1. クリーンなURLの使用: 短く、説明的かつキーワード豊富なURLを使用することが重要です。URLには意味のない文字や数字を使用せず、読みやすい構造を作成しましょう。

2. キーワードの使用: URLには、キーワードを使用することも重要です。Googleはキーワードを重視し、URLにキーワードが含まれている場合には高く評価します。

これらのポイントに注意しながら、URLの最適化を行いましょう。

🤖 メタデータの管理

メタデータは、検索エンジンにサイトの情報を提供するための非常に重要な要素です。以下では、メタデータの最適化に関するポイントを説明します。

1. タイトルとディスクリプション: タイトルとディスクリプションは、メタデータの基本です。これらは検索結果で表示される情報です。各ページごとに一意のタイトルとディスクリプションを作成しましょう。

2. XMLサイトマップ: サイトの全ページをマップするXMLサイトマップを作成しましょう。これにより、Googleがサイトの構造を理解しやすくなります。

3. 構造化データ: 構造化データは、Googleにコンテンツの詳細情報を提供するための重要な要素です。Googleは構造化データを使用してリッチな検索結果を提供し、ユーザーエクスペリエンスを向上させます。

4. 正規タグ: 重複するコンテンツがある場合には、正規タグを使用してGoogleに優先バージョンを伝えることが重要です。

5. オープングラフメタタグ: オープングラフメタタグは、SNSなどのプラットフォームでリンクを共有した際に表示される画像や説明などの情報を指定するために使用されます。SNS上でリッチなリンクプレビューを表示することができ、ユーザーの興味を引きつけることができます。

これらのポイントに注意しながら、メタデータを最適化しましょう。

🛠 管理タスク

管理タスクは、サイトの維持と管理に必要な作業です。以下では、管理タスクに関するポイントを説明します。

1. SSL証明書またはHTTPS: SSL証明書またはHTTPSを使用してサイトをセキュアにしましょう。これにより、ユーザーのデータが安全に送信されるだけでなく、Googleからの信頼性も向上します。

2. リダイレクトの管理: ページの移動やURLの変更がある場合は、リダイレクトを管理しましょう。リダイレクトを適切に設定することで、ユーザーエクスペリエンスとSEOの両方に悪影響を与える壊れたリンクを防ぐことができます。

3. 有用な404ページの作成: 404ページは、ユーザーが存在しないページにアクセスした場合に表示されるページです。ユーザーを適切なコンテンツに誘導するために、検索機能などを含めることが重要です。

4. robots.txtの作成: robots.txtファイルを作成し、Googleにサイトの特定の領域にアクセスさせるかどうかを指示しましょう。

これらの管理タスクに注意しながら、サイトを管理していきましょう。

💡ハイライト

• 技術的SEOは、開発者の責務であり、コンテンツとユーザーエクスペリエンスの最適化、メタデータの管理、管理タスクの完了が必要です。
• ユーザーエクスペリエンスの最適化には、コアウェブバイタル、画像の最適化、アクセシビリティの向上、モバイル対応が含まれます。
• 画像の最適化では、圧縮、適切なフォーマットの使用、サイズの最適化、遅延読み込み、ALTテキストの使用が重要です。
• アクセシビリティの向上には、ALTテキストの使用、適切な見出し構造の使用が必要です。
• モバイル対応では、レスポンシブデザイン、ビューポートメタタグの設定が重要です。
• JavaScriptの削減には、バンドルのサイズの確認、トラッカーの削減、サーバーサイドレンダリングの使用が含まれます。
• URLの最適化では、クリーンなURLの使用、キーワードの使用が重要です。
• メタデータの最適化には、タイトルとディスクリプション、XMLサイトマップ、構造化データの使用が含まれます。
• 管理タスクには、SSL証明書の使用、リダイレクトの管理、有用な404ページの作成、robots.txtの作成が含まれます。

これらのポイントを押さえながら、技術的なSEOを実施していきましょう。

🙋 よくある質問

Q: 技術的SEOに取り組むことの利点は何ですか？ A: 技術的SEOに取り組むことで、サイトの検索ランキングと有機的なトラフィックが向上し、ユーザーエクスペリエンスやエンゲージメントも向上する可能性があります。さらに、ビジネスの成長やコンバージョンの増加にもつながるでしょう。

Q: 技術的SEOに取り組む上で最も重要なポイントは何ですか？ A: 全てのポイントが重要ですが、特にユーザーエクスペリエンスの最適化とメタデータの管理が重要です。ユーザーエクスペリエンスが向上することでサイトへの訪問者数が増え、メタデータの最適化によってサイトが検索エンジン上で正しく表示されることが保証されます。

Q: 技術的SEOの結果はすぐに現れますか？ A: 技術的SEOは効果が出るまでに時間がかかる場合があります。検索エンジンのクローラーがサイトをスキャンし、最適化の結果を反映するまでには時間がかかる場合があります。また、競争が激しい業界では、ランキングの改善にはより多くの時間と努力が必要です。しかし、地道な取り組みが着実な成果をもたらすことを忘れずに取り組んでください。

Q: 技術的SEOを実施するためにはどのようなツールが役立ちますか？ A: 技術的SEOを実施するためには、Google Search ConsoleやLighthouseなどのツールを使用することが役立ちます。また、SEMrushやAhrefsなどのツールもデータの収集や解析に役立ちます。

Q: 技術的SEOに取り組むためにはどのようなスキルが必要ですか？ A: 技術的SEOに取り組むためには、HTMLやCSS、JavaScriptなどの基本的なウェブ開発スキルが必要です。また、検索エンジンのアルゴリズムやSEOのベストプラクティスについての知識も重要です。