実装者が責任を持つ範囲だけのSEO（第4回）

SEOは広大ですが、実装者が保証できる範囲はかなり狭いです。

記事の内容もリンクも競合状況も、コードの外側にあります。今回は外せない4つと、測れる3つの指標だけに絞ります。

そもそもSEOとは#

Search Engine Optimization、検索結果で見つけてもらいやすくする取り組みの総称です。

検索エンジンは、世界中のページを自動で巡回して内容を読み取り、順位を決めています。その「読み取り」を助けるのがフロントエンドの仕事です。人間には同じに見えるページでも、機械にとっては構造が伝わるページとそうでないページがあります。

ただしSEO全体は、記事の内容・リンク・競合状況など実装の外側の要素が大半です。実装者が保証できる範囲は限られているので、今回はそこだけに絞ります。

よくある書き方（Before）#

<head>
  <title>ページ</title>
</head>
<body>
  <img src="gtr.jpg">
  <div class="h1">旧車図鑑</div>
</body>

直した書き方（After）#

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>旧車図鑑 | 名車のスペックと価格がわかる</title>
  <meta name="description" content="1960〜1990年代の国産名車を写真とスペックで紹介。">
  <meta property="og:title" content="旧車図鑑">
  <meta property="og:image" content="https://example.com/ogp.png">
  <meta name="twitter:card" content="summary_large_image">
</head>
<body>
  <h1>旧車図鑑</h1>
  <img src="gtr.jpg" alt="スカイライン GT-R の正面" width="800" height="600">
</body>

なぜそうなるか#

検索エンジンは年々賢くなっていて、多少雑でも読み取ってくれます。それでも実装側が外してはいけないのは次の4つです。

1. title と description — 検索結果に出る文面そのもの。ページごとに変える
2. 見出し構造 — 第1回の内容がそのままSEOになる
3. 画像の alt と width/height — altは内容の説明、width/heightは読み込み中のガタつき防止
4. OGP — SNSでシェアされたときのカード表示。設定しないとリンクが味気ない文字列になる

Core Web Vitals#

表示速度の指標で、実装の責任範囲です。名前だけ覚えてください。

数値はChromeのLighthouseで測れます。第16回で本格的に扱います。

社内システムなら不要か#

検索されないシステムでもSEOの作法は無駄になりません。見出し構造もaltも、アクセシビリティとしてそのまま効くからです。

手を動かす課題#

作った一覧ページにtitle、description、OGPを設定し、Lighthouseを1回実行してください。スコアより、指摘項目を読むのが目的です。

ここまでがPart 1です。次回からJavaScriptに入り、このページを動かしていきます。

今回の学び#

まず、実装で保証できる範囲を先に区切るということ。SEO全体を背負おうとすると、自分では動かせないものに時間を使います。外してはいけない4つは、どれも自分の手の中にありました。

次に、第1回の見出し構造が、そのままSEOになっていること。別の作業を足したわけではありません。意味が伝わるHTMLを書くことが、そのまま機械への説明になっていました。

そして、検索されないシステムでも作法は無駄にならないこと。見出しも代替テキストも、アクセシビリティとしてそのまま効きます。SEOのためだけにやっているわけではありませんでした。