SEO 評価を上げるために必要なこと

Last updated at 2025-03-09Posted at 2025-03-09

はじめに

最近、SEO 評価を上げるためのパフォーマンス改善施策に取り組む機会をいただけたので、改めての基礎理解と学んだことを記事にしようと思います。

Google クローラー関連

クロールとインデックスの違い

混合されがち単語について、改めて定義しておきたいと思います。

クローリングとは？

検索エンジンのクローラー（Google クローラー等）が Web ページを循環して、情報を収集するプロセスです。

インデックスとは？

検索エンジンがクローリングしたページのデータを DB に登録し、検索結果へ反映できる状態にするプロセスです。

クローリングを制御する

robots.txt

検索エンジンのクローラーが「どのページをクロールするか」を制御するための設定ファイルです。

例えば、下記はすべてのクローラーに対して /private/ と /secret/ 配下のページをクロール禁止しています。

User-agent: *
Disallow: /private/
Disallow: /secret/

noindex

ページのインデックスを防ぐための HTML メタタグであり、「このページを検索結果に表示しないでほしい」という指示を検索エンジンに伝えるものです。

<meta name="robots" content="noindex">

計測方法

Web Vitals

Web Vitals とは

Google が提供している Web サイトのユーザー体験を評価するための指標群です。
例えば、ページの読み込み速度であったり、視覚的な安定性などが指標として定義されています。

Core Web Vitals とは

Google が Web Vitals の中でも、特にユーザー体験に対する重要な指標として定義しているものです。

LCP（Largest Contentful Paint）

ページのメインコンテンツ（画像 / テキストブロック / 動画）が完全に表示されるまでの時間です。

目標 LCP の値は、2.5 秒未満と定義されています。

INP（Interaction to Next Page）

ユーザーが最初にページを操作（クリックやタップ）してから、ブラウザがその操作に応答するまでの遅延時間です。

目標 INP 値は、200 ms（0.2 秒）以内と定義されています。

CLS

ページの視覚的な安定性を図る指標で、ページのレイアウトがどれだけ意図せずに変化するかを氷解したスコアです。

目標 CLS 値は、0.1 以下と定義されています。

Page Speed Insght とは

Page Speed Insght
Google が提供する Web サイトのパフォーマンスを分析するツールです。
特徴として、PC / SP の両方でスコアを測定することができ、Core Web Vitals の評価を確認することができます。

Lighthouse とは

Lighthouse
Google が提供する開発者向けの Web パフォーマンス監視ツールです。
特徴として、パフォーマンス / アクセシビリティ / SEO を評価することができ、開発環境でも監視が可能です。
反面で、ユーザーの　デバイスに依存してしまう部分があります。

Google Search Console

Google Search Console とは

Google Search Console
Google が提供しているツールで、サイトの検索トラフィックや掲載順位を測定することができます。
例えば、下記のような機能があります。

検索パフォーマンス機能
- Google 検索で検索された「キーワード / 表示回数 / クリック数 / クリック率 / 平均掲載順位」を確認できる
URL 検査機能
- ページが抱えている SEO 面での問題を知ることができる
  - ページのインデックスの有無
    - インデックスが拒否された原因
    - そもそも Google にページが発見されていない
  - クロール時の HTML 構造(スクリーンショット)
セキュリティと手動による対策
- サイトが抱えているセキュリティの問題や手動ペナルティ（Google のガイドイン違反項目）を検知できる
リンク機能
- 他サイトからのリンクを確認することができる

パフォーマンス向上

パフォーマンスを向上させてサイト評価を上げることが、SEO 評価を上げることにつながります。

Next-Gen Formtat（WebP, AVIF）の活用

サイズの大きい画像を使用すると、Web ページの読み込みに悪影響を与える可能性があります。
例えば、馴染みのあるツールでも以下の指標があります。

WordPress ガイドラインに 100KB 以内が推奨であることが明記されている
Nuxt / Webpack では、300KB を超える静的ファイルには WARN が表示される

そこで登場したのが、WebP / AVIF といった従来の画像フォーマット（JPEG, PNG）よりも圧縮率が高い Next-Gen Format です。（品質も保ちながらファイルサイズを軽減できます）
WebPでは、PNG のように透過状態も保持することができます。

これらを活用することで、最終バンドルサイズに含まれる画像ファイルサイズを軽減することができます。

srcset / size を使用したレスポンシブ画像

画面サイズと解像度に応じた画像を提供することで、描画する際のサイズ（width / height）の計算や無駄なデータ転送を防ぐことができます。

<img
 src="image-800.jpg"
 srcset="image-400.jpg 400w,
         image-800.jpg 800w,
         image-1600.jpg 1600w"
 sizes="(max-width: 600px) 400px, 
        (max-width: 1200px) 800px, 
        1600px"
 alt="レスポンシブ画像"
>

上記のコードでは、下記を行なっています。

srcset
- 異なる解像度ごとに参照する画像を変更
sizes
- ビューポートのサイズごとに表示する画像の width を指定する
  - (max-width: 600px) 400px-> 画面幅が 600px 以下なら 400px の画像を使用する

また、height も指定することで画像のサイズ（width / height）計算することなく描画することができるので、パフォーマンス向上に寄与することができます。

Tree Shaking

未使用のコードをビルド時に削除する最適化手法(技術)です。
ビルドツールである Vite では、デフォルトで有効になっています。

これにより、不要な JavaScript コードがバンドルに含まれることは無くなるので、ファイルサイズが軽減されてパフォーマンスが向上します。

Minify

不要な文字（空白、コメント、改行など）を削除することで、コードのファイルサイズを小さくする技術です。

Vite では、デフォルトで有効（SSR ビルドでは false）になっています。
また、ビルドオプション（build.minify）も提供されています。

これにより、不要な文字がバンドルに含まれることがなくなるので、Tree Shaking と同じくパフォーマンスが向上します。

Code Split

JavaScript や CSS を分割して、必要なタイミングでロードする手法（技術）です。
よくパフォーマンスチューニングで用いられる Dynamic Import は、Code Split の一種です。

Vite では、cssCodeSplitというビルドオプションが提供されており、デフォルトで有効になっています。

これにより、必要なリソースを必要な時にのみ読み込むので、初期ロードなどが早くなり、パフォーマンスが向上します。

Lazy Loading

ユーザーがスクロール / 画面遷移するまで画像を読み込まない最適化手法です。
HTML5 では、loading="lazy"を活用することで、遅延ローディングを実現することができます。

<img src="large-image.jpg" loading="lazy" alt="遅延読み込み画像">

また、async / await や Nuxt の Composable - useLazyAsybcData などを使用して必要なデータを遅延取得することで JavaScript の Lazy Loading（Lazy Fetch）を実現することができます。

その他

サイトパフォーマンス以外にも SEO 評価を上げる方法はあります。

今回は、一部のみの紹介となりますが詳しく知りたい場合は、Google 公式 SEO スターターガイドをご参照ください。

適切なメタタグ

役割に応じたメタタグ（<meta>）と HTML 要素(<section> / <article>, <header> など)を使用することでページの構造を明確にし、Google クローラー / 検索エンジンがページの内容を正しく理解できるようになります。（= SEO 評価の向上）

参考：Google 公式 SEO スターターガイド - Google がサポートしている meta タグと属性
参考：MDN - HTML 要素リファレンス

リンク構造の最適化

Google クローラーが　効率的にページを巡回できるように、リンク構造を最適化することが SEO 評価を向上させることにつながります。（ページ巡回に時間のかかるサイト / ページは、評価の低いものとして認識されてしまう）

パンくずリストの活用

よくサイトで見られる「日本 > 東京都 > 新宿区」です。
ページの階層構造を Google クローラー / 検索エンジン / ユーザーへ伝えることに役立ちます。

タップ領域の最適化(Google ガイドライン)

前提、Google クローラーは、スマホ画面でのクローリングを優先して行います。
そのため、スマホのユーザー体験（UX）向上をすることが、SEO 評価の向上に大きく寄与します。
その一例として、タップ領域の最適化が挙げられます。

タップ領域の最適化
- ボタンやリンクのタップ領域を十分に確保する
- リンク同士の間隔をあける

そうすることで、スマホ画面の UX が上がり、Google エンジンに対する評価を上げることができます。

レンダリングプロセスを理解する

サイトパフォーマンスを上げるためには、各リソースが読み込まれているタイミングなどを理解しなければいけません。
基本的には、「Loading -> Scripting -> Rendaering -> Painting」という 4 工程でレンダリングされます。

内容が深いので、下記の記事にまとめているのでよければ読んでいただけると幸いです。
ブラウザレンダリングのプロセスを理解する

まとめ

これまで学んだ基礎的な部分を実際に業務でアウトプットすることができたので、より知識として定着させることができました。
本日紹介した内容は、全て基礎的な部分になるので今後応用的な部分まで視野を広げてキャッチアップしていきたいです。

ここまで読んでいただきありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up