SEOの技術基礎

SEOとは

SEO(Search Engine Optimization)は、検索エンジンの結果ページで自分のサイトが適切に表示されるようにする取り組みです。内容は「良い記事を書く」というコンテンツ側と、「検索エンジンが読み取れる作りにする」という技術側に分かれます。ここでは後者、テクニカルSEOを扱います。どれだけ良い記事でも、クローラーが読めなければ検索結果には出ません。

検索エンジンの3ステップ

ステップ	内容	つまずきの例
クロール	クローラーがページを巡回して取得する	リンクがなく発見されない、robots.txtで拒否している
インデックス	内容を解析して検索用の索引に登録する	JavaScript でしか内容が出ず解析に失敗する
ランキング	検索語に対する順位を決める	内容の重複、表示速度が遅い

HTMLでできる基本

title タグ: ページごとに固有のタイトルを付ける。検索結果の見出しになる
meta description: 検索結果に出る説明文。クリック率に影響する
見出しの階層: h1 から順に飛ばさず使い、文書構造を示す
img の alt 属性: 画像の内容をテキストで伝える
構造化データ: JSON-LD で「これは記事」「これは商品」と機械可読な形で示す
HTTPS: 暗号化された通信が前提。常時HTTPS化が基本

[[HTML]] のタグを意味どおりに使うことがそのままSEOになります。同じ理由で [[Webアクセシビリティ]] の対策(見出し構造、alt、正しいランドマーク)はSEOにもほぼそのまま効きます。

SPAとレンダリングの問題

[[SPAとMPA]] のうち、JavaScript で画面を組み立てる SPA は、HTMLだけを見ると中身が空になりがちです。クローラーはJavaScriptを実行できますが、実行は後回しになったり失敗したりします。対策は、サーバー側であらかじめHTMLを生成することです。

SSR(サーバーサイドレンダリング) — リクエストのたびにサーバーでHTMLを生成する
SSG(静的サイト生成) — ビルド時にHTMLを作っておく

[[Next.js]] のようなフレームワークがSEOに強いとされるのは、この2つを標準で備えているためです。

サイト全体で整えるもの

robots.txt: クロールしてよい範囲を伝える。誤って全体を拒否する事故に注意
sitemap.xml: サイト内のURL一覧を渡し、発見を助ける
canonical: 内容が同じURLが複数あるとき、正規のURLを1つ指定する

初学者向けポイント

表示の速さや操作の安定性はランキング要素です。画像の最適化や不要なJavaScriptの削減といった [[Webパフォーマンス最適化]] の施策は、そのままSEO対策になります
まずは「1ページ1テーマ、固有のtitle」から。ここだけで大きく変わります
テスト環境を誤って公開しない。同じ内容のサイトが2つあると重複コンテンツになります
効果の確認はサーチコンソール等の計測ツールで。推測ではなく実データで判断します

関連技術とのつながり

[[HTML]] — タグを意味どおりに使うことが土台
[[SPAとMPA]] — 画面の組み立て方がインデックスの可否に直結する
[[Next.js]] — SSR/SSG によってSPAのSEO課題を解消する
[[Webパフォーマンス最適化]] — 表示速度はランキング要素の一つ
[[Webアクセシビリティ]] — 構造を正しく伝える対策は両者で共通する

Q: 検索エンジンがページを扱う順番として正しいのはどれ?
- [x] クロール → インデックス → ランキング
- [ ] インデックス → クロール → ランキング
- [ ] ランキング → クロール → インデックス
解説: まず巡回して取得し、解析して索引に登録し、その後で検索語に対する順位が決まります。

Q: SPAがSEOで不利になりやすい理由はどれ?
- [ ] URLが1つしか作れないため
- [x] JavaScriptで画面を組み立てるため、HTMLだけでは中身が空になりやすいため
- [ ] HTTPSが使えないため
解説: クローラーのJavaScript実行は後回しや失敗があり得ます。SSRやSSGでHTMLを用意するのが対策です。

Q: 内容が同じURLが複数あるときに、正規のURLを1つ指定する仕組みはどれ?
- [ ] robots.txt
- [ ] sitemap.xml
- [x] canonical
解説: canonical で正規URLを示します。robots.txtはクロール範囲、sitemap.xmlはURL一覧の提示です。