エンジニアが抑えておくべきSEO対策

最近、私自身の業務でもSEOに関連するタスクが増えてきたことをきっかけに、改めて「エンジニアとしてSEOをどこまで意識すべきか？」という疑問を持つようになりました。調べていくうちに、SEOはマーケターやライターだけの領域ではなく、コードや構造を設計するエンジニアの責任領域でもあると実感しています。

SEO（検索エンジン最適化）というと、「キーワードを工夫する」「記事の内容を充実させる」といったコンテンツ寄りの対策を想像しがちですが、実はHTMLの構造、読み込み速度、クローラビリティといった技術的SEO（Technical SEO）も大きな比重を占めています。

本記事では、エンジニアが押さえておくべきSEOの基本から、実装面での具体的な工夫、ツールの使い方までをまとめて解説します。

SEOの基本：検索エンジンはどうやってページを評価するか？

検索エンジンは、以下の3つのプロセスを通じてWebページを評価・表示します：

1. クローリング：Web上を巡回してページを発見
2. インデックス：取得した情報を検索データベースに登録
3. ランキング：検索キーワードに応じて表示順を決定

技術的に未整備なページでは、クローラーが正しく巡回できず、検索結果に反映されにくくなります。どれだけ中身が良くても、技術的SEOが弱いと評価されないのです。

HTML構造とセマンティックなマークアップ

正しい見出しの階層

見出しタグ（<h1>〜<h6>）は、検索エンジンにページの内容を伝えるシグナルになります。<h1>はページに1つだけ、以下は論理的な階層で使用しましょう。

<!-- 良くない例 -->
<h1>サービス紹介</h1>
<h3>料金</h3>
<h2>特徴</h2>

<!-- 適切な例 -->
<h1>サービス紹介</h1>
<h2>特徴</h2>
<h2>料金</h2>

セマンティックHTMLの重要性

<div>だけでページを構築するのではなく、HTML5で定義されたセマンティックな要素（<main>, <article>, <section>, <nav>など）を適切に使うことで、検索エンジンやスクリーンリーダーにとって理解しやすい構造になります。

<main>
  <article>
    <header>
      <h1>技術記事のタイトル</h1>
    </header>
    <section>
      <h2>はじめに</h2>
      <p>導入文...</p>
    </section>
  </article>
</main>

sitemap.xmlとrobots.txtでクロール最適化

sitemap.xmlとは？

sitemap.xml は、サイト内に存在するページのリストを検索エンジンに伝えるXML形式のファイルです。これにより、クローラーが重要なページを漏れなく発見できるようになります。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>">
  <url>
    <loc><https://example.com/blog/seo-guide></loc>
    <lastmod>2025-04-10</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

WordPress や Nuxt、Next.js などのフレームワークでも自動生成プラグインがあります（例：next-sitemap, gatsby-plugin-sitemap など）。

robots.txtとの連携

sitemap.xml の存在は、robots.txt に記述してクローラーに通知できます。

User-agent: *
Disallow:

Sitemap: <https://example.com/sitemap.xml>

これにより、検索エンジンに「何を見るべきか・どこを無視すべきか」を伝えることができ、無駄なクロールを避けつつ、重要なページの発見を促進します。

パフォーマンス最適化：Core Web Vitalsを意識する

Googleは、ページの体験を数値化したCore Web Vitalsを検索順位の評価軸にしています。

• LCP（Largest Contentful Paint）：メインコンテンツの描画時間
• FID（First Input Delay）：最初の操作に対する応答速度
• CLS（Cumulative Layout Shift）：レイアウトのズレ

実装のポイント

• 画像はWebP形式で軽量化、<img srcset> でレスポンシブ対応
• JavaScriptはdeferやasyncを活用し、描画をブロックしないようにする
• 遅延読み込み（Lazy Load）を導入

<img src="image.webp" loading="lazy" alt="キービジュアル">

測定ツール

• Google Lighthouse（Chrome DevTools）
• PageSpeed Insights（Web）
• Web Vitals 拡張機能（Chrome）

メタ情報と構造化データの活用

基本のメタタグ

ページタイトルや説明文は検索結果に影響します。

<title>SEOの技術的対策まとめ</title>
<meta name="description" content="エンジニア向けにHTML構造や表示速度、構造化データなどを解説します。">

SNS向けのOGP設定

<meta property="og:title" content="SEOの技術的対策まとめ">
<meta property="og:description" content="技術的SEOの実装ポイント">
<meta property="og:image" content="<https://example.com/og-image.jpg>">

構造化データ（JSON-LD）

<script type="application/ld+json">
{
  "@context": "<https://schema.org>",
  "@type": "Article",
  "headline": "エンジニアが抑えておくべきSEO対策",
  "author": {
    "@type": "Person",
    "name": "山田太郎"
  },
  "datePublished": "2025-04-16"
}
</script>

URL設計と内部リンクの工夫

クリーンなURL設計

検索エンジンにもユーザーにもわかりやすいURLが好まれます。

• NG: /blog/?id=123
• OK: /blog/seo-best-practices

パンくずリストと内部リンク

パンくずリストはユーザーのナビゲーション向上だけでなく、クローラーにもページの階層を伝える役割があります。内部リンクを適切に張ることで、サイト全体のSEOが底上げされます。

まとめ：SEOはコードで変えられる

SEOはコンテンツ制作の話だけではなく、エンジニアの手で改善できることが非常に多い分野です。HTMLの構造、ページ速度、構造化データ、sitemap.xmlなど、コードに関わる施策を実行することで、検索エンジンの評価を着実に上げることができます。

SEOの知識は、Web開発に携わるエンジニアにとって、今後ますます求められるスキルです。この記事が、技術的SEOに対する理解と実践の第一歩になれば幸いです。