Webコーダーが知っておきたいSEO内部対策6選【実装レベルで解説】

2026年4月7日

HTML

「SEO対策はライターやディレクターの仕事」——そう思っているコーダーの方は多いのではないでしょうか。

たしかに、キーワード選定や文章の質はコンテンツ担当が考えることです。でも、HTMLの書き方・ページの読み込み速度・URLの設計といった「実装レベルのSEO対策」は、コーダーにしかできないことがたくさんあります。

クライアントから「SEOに強いサイトを作ってほしい」と言われて、何をすれば良いか迷ったことはありませんか？この記事では、コーダーが実装段階でできる内部SEO対策を6つ、コードサンプル付きで解説します。

この記事で分かること

コーダーが関与できる「実装系SEO」の具体的な範囲
HTMLタグ・OGP・表示速度・構造化データ・canonicalの実装方法
初学者でもすぐに取り組める優先順位の付け方

そもそも「内部SEO」とは？コーダーが関与できる範囲を整理する
【内部SEO基礎】HTMLタグを正しく使う
OGP（Open Graph Protocol）を設定する
コーダーのSEO対策の要：ページ表示速度を改善する（Core Web Vitals）
構造化データを実装する（上級者向け）
canonical（正規URL）を設定する
よくある質問（FAQ）
まとめ｜コーダーがSEOを意識するとサイトの価値が上がる

そもそも「内部SEO」とは？コーダーが関与できる範囲を整理する

内部SEO（オンページSEO）とは、自分のサイト内部を改善することで検索エンジンの評価を高める施策のことです。外部からの被リンクを増やす「外部SEO」とは異なり、自分でコントロールできる範囲が広いのが特徴です。

内部SEOは大きく2種類に分けられます。

種類	主な施策	担当
コンテンツ系	記事の質・キーワード選定・文章量	ライター・ディレクター
実装系	HTMLタグ・ページ速度・URL設計・構造化データ	コーダー

実装系の内部SEOは、コーダーが直接対応できる領域です。この記事ではこの「実装系」に絞って、6つの対策を順番に解説します。

【内部SEO基礎】HTMLタグを正しく使う

HTMLタグの使い方は、SEOの土台になります。見た目が同じでも、タグの選び方によって検索エンジンへの伝わり方が変わります。

titleタグとdescriptionの設定

<title> タグは、検索結果に表示されるページタイトルです。各ページに固有のtitleを設定することが基本です。

<meta name="description"> は、検索結果のタイトル下に表示される説明文です。クリック率（CTR）に影響するため、ページの内容を的確に伝える文章を設定します。

<title>ページタイトル | サイト名</title>
<meta name="description" content="ページの説明文をここに書きます（120字以内が目安です）">

WordPressで制作している場合、SEOプラグインを使うとこれらの設定を管理画面から入力できます。プラグインが自動でHTMLに出力してくれるため、テーマのコード内にtitleタグを手書きしなくて済む場合が多いです。

ただし、プラグインに任せきりにするのではなく、「各ページにきちんと設定されているか」の確認はコーダーの役割として意識しておくとよいでしょう。

見出しタグ（h1〜h3）の正しい使い方

見出しタグは、コンテンツの構造を検索エンジンに伝える役割があります。h1は1ページに1つ、h2・h3は階層を守って使うことが大切です。

よくある間違いとして、「デザインの都合でh2を飛ばしてh3を使う」というケースがあります。見た目の問題はCSSで解決し、HTMLの構造はきちんと保つようにしましょう。

<!-- NG例: デザインのためにh2を飛ばしてh3を使ってしまっている -->
<h1>ページタイトル</h1>
<h3>セクション名</h3>

<!-- OK例: 見出し階層を正しく保った構造 -->
<h1>ページタイトル</h1>
<h2>セクション名</h2>
<h3>サブセクション名</h3>

見出しの見た目はCSSで変更できます。HTMLの役割とデザインの調整は分けて考えると、構造が正しく保てます。

altテキストを必ず設定する

検索エンジンは画像を「見る」ことができません。その代わりに alt テキストを読んで、画像の内容を理解します。altテキストが空のままだと、画像が何を表しているか伝わらず、SEO上の機会損失になります。

<!-- 内容のある画像: 何が写っているかを具体的に説明するaltを設定 -->
<img src="hero.webp" alt="笑顔のスタッフと店舗外観">

<!-- 装飾画像: alt=""にしてスクリーンリーダーに無視させる -->
<img src="decoration.webp" alt="">

altテキストにキーワードを詰め込むのは逆効果になる場合もあります。「この画像を見たことのない人が内容を把握できるか」を基準に、自然な言葉で書くのがおすすめです。

OGP（Open Graph Protocol）を設定する

OGP（Open Graph Protocol）とは、SNSでページをシェアしたときに表示されるタイトル・説明文・画像を制御する仕組みです。

OGP自体は検索順位に直接影響するものではありませんが、SNSでシェアされやすくなることで間接的にSEOに好影響をもたらす可能性があります。サイトへの流入が増えると、GoogleがそのページのE-E-A-Tを評価する材料が増えるからです。

<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明文（SNSに表示されます）">
<meta property="og:image" content="https://example.com/ogp.jpg">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="website">

OGP画像のサイズは 1200 × 630px が推奨されています。画像が未設定だとSNSシェア時に粗いサムネイルが表示されたり、何も表示されないこともあります。

WordPressではSEOプラグインがOGPタグを自動で出力してくれる場合が多いですが、OGP画像のアップロードをクライアントに案内するのもコーダーの仕事の一つです。

コーダーのSEO対策の要：ページ表示速度を改善する（Core Web Vitals）

Googleは2021年からページの表示速度を検索順位の評価指標に組み込んでいます（Core Web Vitals）。コーダーが関与できる余地が大きい領域です。

画像を最適化する

画像はページの読み込み速度に最も大きな影響を与えるファイルです。以下の3つを意識するだけで、大幅な改善が見込めます。

WebP形式を使う: JPG・PNGと比べてファイルサイズが大幅に小さくなります
loading="lazy" を設定する: ファーストビュー外の画像は表示が必要になってから読み込みます
width と height を指定する: レイアウトシフト（CLS）を防ぎます

<picture>
  <!-- WebP対応ブラウザにはWebPを配信 -->
  <source srcset="image.webp" type="image/webp">
  <!-- 非対応ブラウザはJPGにフォールバック -->
  <img src="image.jpg" alt="説明テキスト" loading="lazy" width="800" height="600">
</picture>

<picture> 要素を使うことで、WebP非対応のブラウザでもJPGを表示できます。

PageSpeed Insightsで現状を確認する

Googleが提供するPageSpeed InsightsにサイトのURLを入力すると、表示速度のスコアと改善提案が表示されます。モバイルとデスクトップ両方のスコアを確認できます。

コーダーが対応できる主な改善項目は以下のとおりです。

レンダーブロッキングリソースの排除: CSSやJSの読み込み順序を最適化する
未使用のCSSを削除する: 使っていないスタイルを取り除く
テキストの圧縮を有効にする: サーバー設定（gzip等）で対応できる
次世代フォーマットの画像: 前述のWebP対応が有効

スコアは必ずしも100点を目指す必要はありません。モバイルで60〜70点以上を維持できると、表示速度の影響を受けにくい状態になると言われています。

構造化データを実装する（上級者向け）

構造化データとは、ページのコンテンツを検索エンジンが機械的に理解できる形式で記述したものです。JSON-LDというフォーマットで記述するのが一般的です。

適切に設定できると、検索結果に星評価・パンくずリスト・FAQなどが表示される「リッチリザルト」を狙えます。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "記事タイトル",
  "image": "https://example.com/ogp.jpg",
  "author": {
    "@type": "Person",
    "name": "著者名"
  },
  "datePublished": "2026-04-06",
  "dateModified": "2026-04-06"
}
</script>

この節は他の対策より難易度が高いため、まずはHTMLタグ・OGP・表示速度・canonicalを押さえてから取り組むのがおすすめです。初学者の方は後回しにしても問題ありません。

canonical（正規URL）を設定する

canonicalタグは、同じコンテンツが複数のURLで表示されてしまう「重複コンテンツ」問題を解決するタグです。

例えば、以下のURLはすべて同じページを指している場合でも、検索エンジンは別々のページとして認識することがあります。

https://example.com/page/
https://www.example.com/page/
https://example.com/page/?utm_source=twitter

このような場合、canonicalタグで「どのURLが正規のページか」を明示することで、SEO評価が分散するのを防げます。

<!-- <head>内に記述する -->
<link rel="canonical" href="https://example.com/page/">

WordPressではSEOプラグインが自動でcanonicalを設定してくれる場合が多いです。ただし、パラメータ付きURLが大量に発生するECサイトや、URLリダイレクトが複雑なサイトでは、手動での確認も検討しましょう。

よくある質問（FAQ）

SEOプラグインを入れれば、コーダーは何もしなくていいですか？: SEOプラグインは便利ですが、あくまでもツールです。各ページにtitleやdescriptionが適切に設定されているか、canonicalが正しく出力されているかは、コーダーが実装後に確認するとよいでしょう。プラグインに任せきりにせず、HTMLのソースを確認する習慣をつけることをおすすめします。

h1タグをCSSで非表示にしてもSEO上は問題ありませんか？: display: none や visibility: hidden でh1を完全に非表示にすることは、Googleの自動ペナルティの直接的な対象ではありません。ただし、表示テキストと非表示テキストの内容が大きく異なる場合（いわゆる「隠しテキスト」）はスパムと判断されるリスクがあります。デザイン上見せたくない場合は、視覚的に非表示にしつつスクリーンリーダーには読み上げられる「visually-hidden」パターンを使う方法がおすすめです。これはアクセシビリティとSEOの両面で安全な実装です。

altテキストにキーワードを詰め込んでもいいですか？: 過剰なキーワード詰め込みはスパムと判断されるリスクがあります。altテキストは「画像の内容を言葉で説明するもの」と考えると、自然に書けます。キーワードが含まれる場合でも、あくまで画像の説明として自然な文章にとどめるのが安全です。

canonicalはWordPressが自動で設定してくれますか？: 多くのSEOプラグインは自動でcanonicalを設定します。ただし、テーマのカスタマイズや特殊なURL構成を使っている場合は、意図しないcanonicalが設定されることもあります。ページのソースを確認し、正しいURLが出力されているかをチェックするのがおすすめです。

PageSpeed Insightsのスコアは何点以上を目指すべきですか？: 公式な「合格点」は定められていませんが、Googleはモバイルで90点以上を「Good」、50〜89点を「Needs Improvement」としています。まずは60〜70点以上を目標に取り組み、改善提案の中からコーダーが対応できる項目を優先的に処理するのがおすすめです。