📚 ナレッジベース

03-05_オンページSEO

最終更新 2026年08月25日／ 21_ナレッジベース/マニュアル_ナレッジ/制作部署/03-05_オンページSEO.md

出典: 制作部署マニュアルオンページSEO（自動ミラー・正本は /Users/oogushiyuuki/manual-terasu）

オンページSEOとは

ページ内（HTMLの中身）で実装するSEO施策。コンテンツとHTML構造を最適化して、検索エンジンに「このページは何か」を正確に伝える。

オンページSEOは「土台」。これができてないとどれだけ良い記事書いても評価されない。

オンページSEO の7つの主要要素

#	要素	重要度
1	title タグ	最重要
2	meta description	重要
3	見出し（h1〜h6）	最重要
4	URL構造	重要
5	内部リンク	重要
6	画像最適化（alt含む）	重要
7	構造化データ	重要

→ 1〜7を確実に実装するのがオンページSEOの王道。

1. title タグ（最重要）

検索結果に大きく表示される、最初に目に入る要素。

仕様

文字数：32文字以内（Google検索結果の表示上限）
全ページでユニーク
メインキーワードを前半に配置
ブランド名は末尾（| を区切りに）
クリックしたくなる魅力的な言葉

良いtitle例

NG: 「ホームページ｜株式会社○○」（情報量ゼロ）
OK: 「ホームページ制作サービス | 月額1万円・最短3日 | TERASU」
OK: 「【2026年】HP制作会社おすすめ10選を徹底比較」（ブログ記事）
OK: 「税理士 渋谷 | 法人税申告のご相談 | 株式会社○○」（士業）

titleの書き方パターン

パターン	構造	例
基本	「メインKW｜サブ情報｜ブランド」	「HP制作｜月額1万円｜TERASU」
数字入り	「【数字】メインKW + 具体性」	「【月額1万円】HP制作10社を比較」
疑問形	「メインKW + は？」	「HP制作の相場は？費用と選び方を解説」
完全網羅	「メインKW + 完全ガイド」	「ホームページ制作の完全ガイド【2026年】」

titleの強化テクニック

【】カッコ：目立つ、CTR UP
数字：「10選」「3つの方法」具体性
年号：「2026年」鮮度
記号：｜・◎・★（程よく）

2. meta description（重要）

検索結果のタイトル下に表示される、ページの要約文。

仕様

文字数：120文字程度（モバイル表示限界）
全ページでユニーク
メインキーワードを自然に含める
「クリックする理由」を提供
CTA文言を入れる（「無料相談」「詳しくはこちら」等）

良いdescription例

NG: 「東京の税理士事務所です。法人税申告を承ります。」（味気ない）
OK: 「東京・港区の税理士事務所○○です。法人税申告・決算サポート・節税対策まで、創業20年の実績で経営者の課題に伴走。初回相談無料。お気軽にご相談ください。」

書き方の公式

[誰の] [何の悩み] を [どう解決] | [信頼の証] | [CTA]

注意点

description はランキング要因ではない（CTRに影響）
Google が自動生成する場合もある（無視される）
でも書いておく方が良い（書かないと自動生成）

3. 見出し階層（h1〜h6）

ページの「目次」「構造」を検索エンジンに伝える。

ルール

タグ	数	用途
h1	1ページ1個	ページのメインテーマ
h2	複数可	大きなセクション
h3	複数可	h2の中の細かい区分け
h4-h6	必要に応じて	さらに細かい階層

正しい階層

<h1>HP制作の完全ガイド</h1>
  <h2>HP制作とは</h2>
    <h3>HPの目的</h3>
    <h3>HPの種類</h3>
  <h2>HP制作の流れ</h2>
    <h3>ヒアリング</h3>
    <h3>デザイン</h3>
    <h3>コーディング</h3>
  <h2>HP制作の費用</h2>

NG パターン

h1 が複数 → SEO的に混乱
h2 → h4 と飛ぶ → 階層構造が壊れる
装飾目的でh使う（フォントサイズだけのため）→ NG
見出しに長文 → 一文に収まる短さに

キーワードの含め方

h1：メインキーワードを必ず含める
h2：関連キーワード・サブキーワードを含める
h3〜：自然な見出しでOK

4. URL構造

URLは「ページの住所」。検索エンジン・ユーザー両方に意味を伝える。

良いURL

https://example.com/service/web-production
https://example.com/blog/hp-price-comparison
https://example.com/works/clinic-yokohama

NG URL

https://example.com/?p=12345                   ← パラメータだけ
https://example.com/page.php?id=42&cat=3       ← 意味不明
https://example.com/ホームページ制作/料金     ← 日本語URL（避ける）
https://example.com/aaa/bbb/ccc/ddd/eee/        ← 階層深すぎ
https://example.com/web_production               ← アンダースコア（ハイフン推奨）

URL設計ルール

ルール	理由
短く	覚えやすい・共有しやすい
英語	国際的に通じる・URLエンコードで見苦しくならない
ハイフン（-）区切り	Google公式推奨（アンダースコア_は非推奨）
小文字統一	URLは大文字小文字区別
意味のある単語	キーワードを含める
階層は3〜4層まで	深すぎると評価下がる
動的URLより静的URL	静的の方がSEO評価高い

推奨URL構造例

/                              ← TOP
/about/                        ← 会社概要
/service/                      ← サービス一覧
/service/web-production/       ← サービス詳細
/blog/                         ← ブログ一覧
/blog/hp-flow/                 ← ブログ記事
/works/                        ← 実績一覧
/works/clinic-xxxx/            ← 実績詳細
/contact/                      ← お問い合わせ

5. 内部リンク（Internal Linking）

サイト内のページ同士をリンクで繋ぐ。SEO・UX両面で重要。

内部リンクの効果

クローラーが新ページを発見しやすい
リンクジュース（権威性）がページ間を流れる
ユーザーが関連情報に到達しやすい
滞在時間・PV/セッションUP
直帰率の改善

内部リンク戦略

パターン1：パンくずリスト

ホーム > サービス > Web制作 > LP制作

→ 階層の明示・SEO効果あり

パターン2：関連記事

記事末に「こちらの記事もおすすめ」で類似トピックを3-5個リンク。

パターン3：本文中の自然リンク

HP制作の費用相場については[こちらの記事](/blog/hp-price/)で詳しく解説しています。

→ アンカーテキスト（リンク文字）にキーワードを含めると効果UP。

パターン4：トップへの集約

重要ページ（収益直結ページ）に多くのページからリンクを集める。

→ TOP・料金ページ・お問い合わせは内部リンクが集まる設計に。

内部リンクのアンカーテキスト

NG	OK
「こちら」	「HP制作の流れ」
「詳細」	「料金プランを見る」
「Click here」	「サービス資料をダウンロード」

→ リンク先の内容がアンカーテキストだけで分かるように。

6. 画像最適化

alt 属性（必須）

<img src="/team.webp" alt="医療スタッフが患者を診察するシーン" width="1200" height="800">

alt の書き方

画像種類	alt
内容ある画像	写ってる内容を簡潔に
ロゴ	ブランド名
アイコン	機能名（「メニュー」「検索」）
装飾画像	`alt=""` (空)

ファイル名も SEO

NG: IMG_0042.jpg
OK: hp-production-clinic-tokyo.webp

→ 英語・ハイフン区切り・意味のある名前。

サイズ最適化

形式	用途
WebP	推奨（JPGの70%サイズで同等品質）
AVIF	最新形式・最軽量
JPG	写真・グラデーション
PNG	透過・ロゴ
SVG	アイコン・ロゴ・図形（拡大しても劣化なし）

→ 1枚300KB以下が目安。

loading 属性

<img src="..." alt="..." loading="lazy" decoding="async">

loading="lazy"：首画面外の画像を遅延読込
decoding="async"：並列デコードで高速化

width/height 属性

<img src="..." alt="..." width="1200" height="800">

→ ブラウザが先に領域確保 → CLS（レイアウトシフト）対策。Core Web Vitals に効く。

7. 構造化データ（JSON-LD）

検索エンジンに「このページは何か」を構造化して伝えるコード。

効果

リッチリザルト表示（星評価・FAQ展開・サイトリンク）
AI検索（SGE）に引用されやすい
ローカル検索でナレッジパネル表示

基本：Organization + WebSite

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "株式会社○○",
  "url": "https://example.com/",
  "logo": "https://example.com/logo.png",
  "description": "東京・港区の税理士事務所",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "○○1-2-3",
    "addressLocality": "港区",
    "addressRegion": "東京都",
    "postalCode": "100-0000",
    "addressCountry": "JP"
  },
  "telephone": "+81-3-1234-5678",
  "sameAs": [
    "https://twitter.com/your_account",
    "https://www.facebook.com/your_account"
  ]
}
</script>

その他の主要な構造化データ

@type	用途
WebSite	サイト全体・検索ボックス
LocalBusiness	実店舗ある場合
Service	サービス紹介
Product	商品
Article / NewsArticle	ブログ・記事
FAQPage	よくある質問
HowTo	手順紹介
Review / AggregateRating	口コミ表示
BreadcrumbList	パンくず
Event	イベント
Recipe	レシピ
Person	人物

→ 詳細は Phase 5（s3-c05）参照。

検証ツール

Rich Results Test
Search Console「拡張」レポート

オンページSEO の追加テクニック

キーワードの自然な配置

配置場所	効果
title タグ	最重要
h1 タグ	最重要
本文の最初の100文字	重要
h2タグの中	重要
URL	重要
meta description	△ 中（CTR影響）
alt属性	△ 中（画像検索効果）
内部リンクのアンカーテキスト	重要

→ ただし キーワード詰め込みは絶対NG。自然な文章で。

キーワード密度

古い目安：3-5%
現代：気にしなくていい。自然に書いた結果でOK。

LSIキーワード（関連語）

メインキーワードと関連する単語を散りばめる。

例：「ホームページ制作」がメインなら：
- Web制作、サイト制作、HP、ウェブサイト、デザイン、コーディング、レスポンシブ、SEO、CMS、WordPress、コーポレートサイト、LP

→ Googleは「文脈」を理解する。関連語が多いほど主題が明確になる。

ページ内の文字量

種類	推奨文字数
LP（コンバージョン特化）	2,000〜5,000字
ブログ記事（一般情報）	2,000〜5,000字
ブログ記事（網羅系）	5,000〜10,000字
ピラーページ（柱記事）	10,000字超
サービス紹介ページ	1,500〜3,000字
会社概要	500〜1,500字

→ 長さより質。1,000字の濃い記事 > 10,000字の薄い記事。

モバイルフレンドリー（オンページSEO の一部）

必須対応

レスポンシブデザイン（PC/タブレット/スマホ）
viewport meta タグ
文字サイズ16px以上
タップ範囲44×44px以上
横スクロール発生なし

viewport設定

<meta name="viewport" content="width=device-width, initial-scale=1.0">

モバイルファーストインデックス

2021年から完全移行。モバイル版がGoogleの主評価対象。PC版だけ作るのは絶対NG。

ページ表示速度

オンページSEOの重要要素。

指標	目標
LCP（最大要素表示）	2.5秒以内
CLS（レイアウトシフト）	0.1以下
INP（操作応答）	200ms以内

速度改善のポイント

画像WebP化・遅延読み込み
JavaScript の最小化・遅延読込
CSS の最小化
フォントの最適化
Cloudflare/CDN利用

→ 詳細はチャプター6「テクニカルSEO」で。

オンページSEO チェックリスト

全ページ共通

[ ] title タグ設定（32字以内・ユニーク・KW含む）
[ ] meta description 設定（120字程度）
[ ] h1 が1個だけ・KW含む
[ ] 見出し階層が論理的（h1→h2→h3）
[ ] URL が短く・英語・ハイフン
[ ] 全画像に alt 属性
[ ] 画像 width/height 属性で領域確保
[ ] loading="lazy" 設定
[ ] WebP化で軽量化
[ ] 構造化データ（最低Organization + WebSite）
[ ] 内部リンクで関連ページに導線
[ ] パンくずリスト設置（階層2層以上）
[ ] モバイルフレンドリー
[ ] HTTPS化

ブログ・記事ページ

[ ] 検索意図に答えてる
[ ] 結論を冒頭に
[ ] 目次あり
[ ] 関連記事リンク
[ ] FAQセクション（あれば構造化データFAQPage）

オンページSEO NG

NG	結果
全ページ同じtitle	重複扱い・順位下落
h1 が複数	SEO評価混乱
description 自動生成のまま	検索CTR低下
キーワード詰め込み（密度10%超）	スパム判定
alt属性ゼロ	画像SEO・アクセシビリティ不利
階層深すぎURL（/a/b/c/d/e/）	クロール効率低下
日本語URL	共有時に見苦しい
内部リンクが少ない	クロール・回遊性低下
構造化データなし	リッチリザルト機会喪失

参考：オンページSEO の良例

サイト	学べる点
Backlinko	オンページSEOの教科書
Ahrefs Blog	構造化データの実装
SmartHR	大規模BtoB SaaSのオンページ
Stripe	内部リンク設計