SEO対策済みHTMLテンプレート — 完全版
HTMLのSEO対策と聞くと、titleタグやmeta descriptionの設定だけを思い浮かべる方が多いかもしれません。しかし実際には、文字エンコーディングの宣言からセマンティックなbody構造、構造化データの埋め込みまで、検索エンジンに正しく情報を伝えるために設定すべき項目は数多くあります。ここではまず、すべての要素を網羅した完全版テンプレートを提示します。このテンプレートをコピペして、自サイトの情報に書き換えるだけで、SEOの基本設定が完了します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル｜サイト名（30〜35文字以内推奨）</title>
<meta name="description" content="ページの概要を80〜120文字で記述します。検索結果に表示されるスニペットとして機能するため、クリックしたくなる内容にしましょう。">
<link rel="canonical" href="https://example.com/current-page/">
<!-- OGP -->
<meta property="og:title" content="ページタイトル｜サイト名">
<meta property="og:description" content="SNSでシェアされたときに表示される説明文。">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/current-page/">
<meta property="og:image" content="https://example.com/images/ogp.jpg">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@your_account">
<!-- favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- 構造化データ（JSON-LD） -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "ページタイトル",
"description": "ページの概要",
"image": "https://example.com/images/ogp.jpg",
"author": {
"@type": "Person",
"name": "著者名"
},
"publisher": {
"@type": "Organization",
"name": "サイト名",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
},
"datePublished": "2026-03-15",
"dateModified": "2026-03-15"
}
</script>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav aria-label="メインナビゲーション">
<a href="/">サイト名</a>
<ul>
<li><a href="/about/">会社概要</a></li>
<li><a href="/service/">サービス</a></li>
<li><a href="/blog/">ブログ</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>ページのメインタイトル</h1>
<p>本文をここに記述します。</p>
<section>
<h2>セクション見出し</h2>
<p>セクションの内容</p>
<section>
<h3>サブセクション見出し</h3>
<p>サブセクションの内容</p>
</section>
</section>
</article>
<aside>
<h2>関連記事</h2>
<ul>
<li><a href="/related-post/">関連記事タイトル</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 サイト名</p>
<nav aria-label="フッターナビゲーション">
<ul>
<li><a href="/privacy/">プライバシーポリシー</a></li>
<li><a href="/sitemap/">サイトマップ</a></li>
</ul>
</nav>
</footer>
</body>
</html>このテンプレートには、headタグ内のメタ情報、OGP設定、構造化データ（JSON-LD）、そしてbodyタグ内のセマンティックHTML構造がすべて含まれています。scale-basics.comではこのテンプレートをベースに全ページを構築し、PageSpeed Insightsで全ページ90点以上を達成しました。次章以降で、各要素の意味と最適な設定方法を詳しく解説していきます。
headタグ内のSEO設定を詳しく解説
headタグの中に書く情報は、ブラウザ上には直接表示されません。しかし検索エンジンのクローラーはまずこの領域を読み取り、ページの主題や言語、正規URLなどを判断します。つまりheadタグの設定は「検索エンジンへの自己紹介」にあたる部分であり、ここに不備があるとどれほど優れたコンテンツを書いても正しく評価されない可能性があります。SEO対策に必須のHTMLタグ一覧も併せて確認しておくと、headタグ内に設定すべき要素の全体像をつかめます。
文字エンコーディングとviewport
headタグの冒頭に配置すべき2つのmetaタグは、文字エンコーディング（charset）とviewportです。なぜ冒頭に置くべきかというと、ブラウザはHTMLの先頭1024バイト以内で文字エンコーディングを判定するため、他のタグよりも前に記述しないと文字化けが発生するリスクがあるからです。
文字エンコーディングには<meta charset="UTF-8">を指定します。UTF-8は世界標準の文字コードであり、日本語を含むほぼすべての言語を正しく表示できます。過去にはShift_JISやEUC-JPが使われていた時代もありましたが、2026年現在ではUTF-8一択と考えて問題ありません。もしcharsetを指定しなかった場合、ブラウザが文字コードを自動推定しようとし、環境によっては日本語が文字化けして表示される恐れがあります。
viewportメタタグは<meta name="viewport" content="width=device-width, initial-scale=1.0">と記述します。これはモバイル端末でページを表示する際に、デバイスの画面幅に合わせてレイアウトを調整するための指示です。Googleは2021年からすべてのサイトでモバイルファーストインデックス（MFI）を適用しています。viewportを設定していないページはモバイルでデスクトップ向けレイアウトがそのまま縮小表示され、ユーザーは文字を読むためにピンチズームを強いられます。このような体験の悪さはCore Web Vitalsの評価にも影響し、検索順位の低下につながりかねません。
titleタグの最適化ルール
titleタグは、検索結果のクリック率（CTR）に最も直接的な影響を与えるHTML要素です。Googleの検索結果画面に青色のリンクテキストとして表示されるのがこのtitleタグの内容であり、ユーザーが「このページを見てみよう」と判断する最初の材料になります。
最適なtitleタグの文字数は30〜35文字です。なぜ35文字以内が推奨されるかというと、Googleの検索結果では全角約35文字を超えると「…」で省略されてしまうためです。せっかく魅力的なタイトルを書いても後半が切れてしまっては意味がありません。ただし短すぎるタイトル（15文字未満など）もページの内容を十分に伝えられないため、30〜35文字の範囲で情報量を最大化するのが理想です。
タイトルの構成パターンとしては「対策キーワード｜補足情報｜サイト名」が定番です。たとえば本記事であれば「コピペで使えるSEO対策済みHTMLテンプレート｜基本構造を解説」のように、ターゲットキーワードを先頭に置き、ユーザーが得られるベネフィットを補足しています。対策キーワードをタイトルの先頭に配置する理由は、検索エンジンがタイトル前半の語句をより重視する傾向があるためです。
設定しないとどうなるかを具体的に示します。titleタグを空にした場合や設定しなかった場合、Googleはページ内のh1タグやアンカーテキストなどから自動的にタイトルを生成します。しかし自動生成されたタイトルは意図しない文言になることが多く、CTRが大幅に低下します。あるクライアントサイトでは、titleタグ未設定のページが検索結果に「Untitled」と表示され、インプレッションはあるのにクリック率が0.3%まで落ち込んでいたケースがありました。titleタグを適切に設定した結果、CTRは3.2%まで改善しました。
meta descriptionの書き方
meta descriptionはGoogleの検索結果でタイトルの下に表示されるスニペット（説明文）の候補です。「候補」と表現したのは、Googleが必ずしもmeta descriptionの内容をそのまま使うとは限らないからです。検索クエリとの関連性が高い文章がページ本文中にあれば、そちらが優先的にスニペットとして採用されることもあります。それでもmeta descriptionを設定すべき理由は、Googleが採用する確率が高く、またSNSでシェアされた際にも説明文として使われるためです。
最適な文字数は80〜120文字です。PC検索結果では約120文字、モバイルでは約70〜80文字が表示されるため、重要な情報は先頭80文字以内に入れるのが鉄則です。書き方のコツとしては、以下の3要素を含めることを意識します。
まず「誰に向けた記事か」を明確にします。次に「何が得られるか（ベネフィット）」を具体的に書きます。最後に「行動を促すフレーズ」を添えます。たとえば本記事のmeta descriptionは「SEO対策済みのHTMLテンプレートをコピペで使える形式で提供。headタグの必須設定、セマンティックなbody構造、構造化データまで含んだ完全版テンプレートと、ブログ記事・商品ページなど用途別テンプレートも紹介します。」としています。「コピペで使える」「完全版」「用途別」といった具体的なベネフィットワードを入れることで、クリック意欲を高めています。
meta descriptionを設定しなかった場合、Googleが本文から自動抽出した断片的なテキストがスニペットになります。自動生成されたスニペットは文脈が途切れていたり、ユーザーにとって魅力的でなかったりすることが多いため、CTR低下の原因になります。
canonicalタグの設定
canonicalタグは、同一コンテンツが複数のURLで存在する場合に「正規URL」を検索エンジンに伝えるためのタグです。<link rel="canonical" href="https://example.com/page/">のように記述します。
なぜcanonicalタグが重要かというと、重複コンテンツによる評価分散を防ぐためです。たとえばECサイトで同じ商品ページが「https://example.com/product/123」と「https://example.com/product/123?color=red」のように複数のURLで表示される場合、検索エンジンはこれらを別ページと認識し、被リンクや評価が分散してしまいます。canonicalタグで正規URLを指定すれば、すべての評価を1つのURLに集約できます。
canonicalタグを設定する際の注意点として、必ず絶対URLで記述することが挙げられます。相対URLでも動作はしますが、Googleの公式ドキュメントでは絶対URLが推奨されています。また、自分自身のページにも自己参照canonicalを設定するのがベストプラクティスです。これにより、パラメータ付きURLでアクセスされた場合でも正規URLへの集約が確実になります。
canonicalタグを設定しなかった場合の影響は深刻です。Googleがページの正規バージョンを自動判定しますが、意図しないURLが正規として選ばれることがあります。実際に、あるメディアサイトではcanonical未設定のまま運用した結果、プリントバージョンのURL（/print/付き）がインデックスされ、本来のURLが検索結果から消えてしまった事例があります。
OGPタグの設定
OGP（Open Graph Protocol）は、SNSでページがシェアされた際に表示されるタイトル・画像・説明文を制御するための仕組みです。Facebook、X（旧Twitter）、LINEなど主要なSNSがOGPに対応しています。設定の詳細はOpen Graph Protocolの公式サイトで確認できます。
OGPタグの設定がSEOに直接影響するかという問いに対しては、厳密にはランキング要因ではありません。しかし間接的なSEO効果は非常に大きいといえます。OGPが適切に設定されたページはSNSでシェアされたときに見栄えがよく、クリックされやすくなります。SNSからの流入が増えれば、サイテーション（言及）が増え、結果的に被リンク獲得のチャンスも広がります。
必須のOGPタグは4つです。og:title（ページタイトル）、og:description（説明文）、og:image（サムネイル画像）、og:url（正規URL）です。特にog:imageは視覚的なインパクトを左右するため、1200×630ピクセルの画像を用意するのが推奨されます。このサイズはFacebookとXの両方で最適に表示される汎用サイズです。
X（旧Twitter）用には、追加で<meta name="twitter:card" content="summary_large_image">を指定します。「summary_large_image」を指定すると大きな画像付きカードで表示され、タイムライン上での視認性が格段に上がります。
OGPタグを設定しなかった場合、SNS側がページ内からタイトルや画像を自動取得しようとしますが、意図しない画像（サイドバーの広告バナーなど）が選ばれたり、説明文が本文の冒頭数行になったりと、見映えの悪いシェア表示になります。これではSNSでの拡散効果が大幅に削がれてしまいます。
bodyタグ内のセマンティック構造
headタグの設定が「検索エンジンへの自己紹介」なら、bodyタグのセマンティック構造は「コンテンツの意味的な地図」です。HTML5で導入されたセマンティック要素（header、nav、main、article、section、aside、footer）を正しく使うことで、検索エンジンにページの構造と各部分の役割を正確に伝えることができます。SEOに強いコーディングを実現するうえで、このセマンティック構造の理解は欠かせません。
header/nav/main/article/footerの正しい配置
セマンティックHTML要素はそれぞれ明確な役割を持っており、正しい階層構造で配置する必要があります。なぜこの構造が重要かというと、Googleのクローラーはこれらのタグを手がかりにして「ページのどの部分がメインコンテンツで、どの部分がナビゲーションで、どの部分が補足情報か」を判断しているからです。
<header>要素はページまたはセクションの導入部分を表します。一般的にはサイトロゴ、グローバルナビゲーション、検索フォームなどが含まれます。ページ全体のヘッダーとしてbody直下に1つ配置するのが基本ですが、article内にも記事固有のヘッダーとして配置できます。
<nav>要素はナビゲーションリンクの集まりを表します。グローバルナビゲーション、パンくずリスト、フッターナビゲーションなどに使用します。重要なのは、ページ内のすべてのリンク群にnavを使うのではなく、主要なナビゲーションブロックにのみ使用するという点です。aria-label属性を付与して「メインナビゲーション」「パンくずリスト」のように識別できるようにすると、スクリーンリーダーを使うユーザーにとっても親切であり、アクセシビリティの向上にもつながります。
<main>要素はページ固有のメインコンテンツを囲む要素で、ページ内に1つだけ配置します。ヘッダー、フッター、サイドバーなど繰り返し表示される要素はmainの外に置きます。GoogleはMain Content（MC）の識別にこのmainタグを参考にしていると考えられており、SEOの観点からも最重要のセマンティック要素です。
<article>要素は、ブログ記事やニュース記事など、それ単体で独立して成立するコンテンツを表します。main要素の中にarticle要素を配置し、その中にh1タグや本文を記述するのが一般的なパターンです。
<aside>要素は、メインコンテンツに関連するが補足的な情報を表します。サイドバー、関連記事リスト、広告枠などが該当します。main要素の中に配置することも外に配置することも可能ですが、記事本文と直接関係するならmain内に、サイト全体の補足情報ならmain外に配置します。
<footer>要素はページまたはセクションのフッターを表します。著作権表示、利用規約へのリンク、連絡先情報などを記述します。
これらのセマンティック要素を使わず、すべてをdivタグで構成した場合どうなるでしょうか。ページは正常に表示されますが、検索エンジンはページ構造を推測に頼らざるを得なくなります。特にmain要素がないと、クローラーがメインコンテンツの範囲を正確に把握できず、ヘッダーやフッターのテキストもコンテンツとして誤認識する可能性があります。セマンティック要素の基礎を体系的に学びたい方は、HTML・セマンティクスの章も参考にしてください。
見出しタグの階層ルール
見出しタグ（h1〜h6）は、ページの論理構造をツリー状に表現するためのタグです。書籍でいえば、h1が本のタイトル、h2が章タイトル、h3が節タイトル、h4が項タイトルにあたります。
見出し階層のルールは明快です。h1はページ内に1つだけ使用し、ページのメインタイトルとします。h2はh1の下位に複数配置でき、大きなセクションの見出しとして機能します。h3はh2の下位に、h4はh3の下位にと、番号順に階層を深くしていきます。
最も重要なルールは「見出しレベルを飛ばさない」ことです。たとえばh2の直下にh4を配置するのはルール違反です。なぜかというと、検索エンジンは見出し階層からコンテンツの意味的な構造を読み取っているため、レベルが飛ぶと構造が破綻していると判断される可能性があるからです。また、スクリーンリーダーを使用するユーザーは見出しレベルを頼りにページ内を移動するため、階層の飛びはアクセシビリティ上の問題にもなります。
GoogleのSEOスターターガイドでも、見出しタグの適切な使用が推奨されています。見出しタグを視覚的なスタイリング目的で使うこと（たとえば太字にするためだけにh3を使うなど）は避け、CSSで装飾するようにしましょう。
見出し階層が正しく設定されているかを確認するには、Chrome拡張機能「HeadingsMap」が便利です。ページの見出し構造をツリー表示してくれるため、階層の飛びや重複がひと目でわかります。
用途別HTMLテンプレート
完全版テンプレートを理解したところで、実際のWebサイト制作でよく使われる3つの用途に特化したテンプレートを紹介します。それぞれのテンプレートは完全版テンプレートをベースにしつつ、用途に応じた構造化データやセマンティック構造を最適化しています。
ブログ記事ページ用テンプレート
ブログ記事ページでは、記事のメタ情報（著者、公開日、カテゴリ）を構造化データとセマンティックHTMLの両方で明示することが重要です。検索結果にリッチリザルト（著者名や公開日の表示）が出やすくなり、CTR向上が期待できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>記事タイトル｜ブログ名（30〜35文字以内）</title>
<meta name="description" content="記事の概要を80〜120文字で記述。">
<link rel="canonical" href="https://example.com/blog/post-slug/">
<meta property="og:title" content="記事タイトル">
<meta property="og:description" content="記事の概要">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/post-slug/">
<meta property="og:image" content="https://example.com/images/blog/post-slug.jpg">
<meta name="twitter:card" content="summary_large_image">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "記事タイトル",
"description": "記事の概要",
"image": "https://example.com/images/blog/post-slug.jpg",
"author": {
"@type": "Person",
"name": "著者名",
"url": "https://example.com/author/name/"
},
"publisher": {
"@type": "Organization",
"name": "サイト名",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
},
"datePublished": "2026-03-15",
"dateModified": "2026-03-15",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://example.com/blog/post-slug/"
}
}
</script>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav aria-label="メインナビゲーション">
<a href="/">サイト名</a>
<ul>
<li><a href="/blog/">ブログ</a></li>
<li><a href="/about/">運営者情報</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</header>
<nav aria-label="パンくずリスト">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/blog/">ブログ</a></li>
<li>記事タイトル</li>
</ol>
</nav>
<main>
<article>
<header>
<h1>記事タイトル</h1>
<p>
<time datetime="2026-03-15">2026年3月15日</time>公開
／著者：<a href="/author/name/">著者名</a>
</p>
</header>
<section>
<h2>セクション見出し</h2>
<p>記事本文をここに記述します。</p>
<figure>
<img src="/images/blog/example.jpg"
alt="画像の説明をalt属性に記述"
width="800" height="450"
loading="lazy">
<figcaption>画像のキャプション</figcaption>
</figure>
</section>
<section>
<h2>まとめ</h2>
<p>記事のまとめ文をここに記述します。</p>
</section>
</article>
<aside>
<h2>関連記事</h2>
<ul>
<li><a href="/blog/related-post/">関連記事タイトル</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 サイト名</p>
</footer>
</body>
</html>このテンプレートのポイントは3つあります。1つ目は、構造化データを「BlogPosting」タイプにしている点です。Articleよりも具体的なタイプを指定することで、検索エンジンにコンテンツの性質をより正確に伝えられます。2つ目は、パンくずリストをnavタグとol（順序付きリスト）で実装している点です。パンくずリストはユーザビリティだけでなく、サイト構造の理解にも役立ちます。3つ目は、画像にwidth、height属性とloading=”lazy”を指定している点です。これによりCLS（Cumulative Layout Shift）の防止と遅延読み込みが実現でき、Core Web Vitalsのスコア向上に寄与します。
商品・サービスページ用テンプレート
商品やサービスのページでは、価格、在庫状況、レビュー評価などをProduct構造化データで明示することが最大のポイントです。これにより検索結果にリッチリザルト（星評価、価格、在庫状態の表示）が出現し、CTRが大幅に向上します。構造化データマークアップ完全ガイドでは、各タイプの構造化データの詳細な実装方法を解説しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品名 - 価格・特徴・レビュー｜サイト名</title>
<meta name="description" content="商品名の特徴・価格・ユーザーレビューを紹介。○○の悩みを解決する商品です。">
<link rel="canonical" href="https://example.com/products/product-slug/">
<meta property="og:title" content="商品名 - 価格・特徴・レビュー">
<meta property="og:description" content="商品名の特徴・価格・ユーザーレビューを紹介。">
<meta property="og:type" content="product">
<meta property="og:url" content="https://example.com/products/product-slug/">
<meta property="og:image" content="https://example.com/images/products/product-slug.jpg">
<meta name="twitter:card" content="summary_large_image">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "商品名",
"image": "https://example.com/images/products/product-slug.jpg",
"description": "商品の詳細な説明文",
"brand": {
"@type": "Brand",
"name": "ブランド名"
},
"offers": {
"@type": "Offer",
"url": "https://example.com/products/product-slug/",
"priceCurrency": "JPY",
"price": "9800",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2026-12-31"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.5",
"reviewCount": "128"
}
}
</script>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav aria-label="メインナビゲーション">
<a href="/">サイト名</a>
<ul>
<li><a href="/products/">商品一覧</a></li>
<li><a href="/about/">会社概要</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</header>
<nav aria-label="パンくずリスト">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/products/">商品一覧</a></li>
<li>商品名</li>
</ol>
</nav>
<main>
<article>
<h1>商品名</h1>
<section>
<h2>商品の特徴</h2>
<figure>
<img src="/images/products/product-slug.jpg"
alt="商品名の外観写真"
width="800" height="600"
loading="eager">
<figcaption>商品名の全体像</figcaption>
</figure>
<p>商品の特徴や魅力を記述します。</p>
</section>
<section>
<h2>価格・プラン</h2>
<p>価格：<strong>9,800円</strong>（税込）</p>
</section>
<section>
<h2>お客様の声</h2>
<blockquote>
<p>「使い始めて1ヶ月で効果を実感しました。」</p>
<cite>— 利用者A様</cite>
</blockquote>
</section>
<section>
<h2>よくある質問</h2>
<dl>
<dt>Q. 返品は可能ですか？</dt>
<dd>A. 商品到着後14日以内であれば返品を承ります。</dd>
</dl>
</section>
</article>
</main>
<footer>
<p>© 2026 サイト名</p>
</footer>
</body>
</html>商品ページテンプレートでは、メインビジュアルの画像にloading=”eager”を指定しています。これは商品画像がファーストビューに表示されることが多く、遅延読み込みにするとLCP（Largest Contentful Paint）が悪化するためです。また、FAQセクションにはdl（定義リスト）タグを使用しており、質問と回答の意味的な関連性を明確にしています。Schema.orgのFAQPage構造化データを追加すれば、検索結果にFAQリッチリザルトが表示される可能性もあります。
コーポレートトップページ用テンプレート
コーポレートサイトのトップページは、企業のブランドイメージを伝えると同時に、検索エンジンに「何の会社か」を正しく伝える必要があります。Organization構造化データとWebSite構造化データの両方を設定するのが特徴です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会社名 | 事業内容を端的に表すフレーズ</title>
<meta name="description" content="会社名は○○を提供する企業です。△△の課題を解決し、□□の実現を支援します。">
<link rel="canonical" href="https://example.com/">
<meta property="og:title" content="会社名 | 事業内容を端的に表すフレーズ">
<meta property="og:description" content="会社名の公式サイト。○○事業を展開。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/images/ogp-top.jpg">
<meta name="twitter:card" content="summary_large_image">
<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": "東京都",
"postalCode": "100-0001",
"addressCountry": "JP"
},
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+81-3-1234-5678",
"contactType": "customer service",
"availableLanguage": "Japanese"
},
"sameAs": [
"https://twitter.com/example",
"https://www.facebook.com/example"
]
},
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "会社名",
"url": "https://example.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://example.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
]
</script>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav aria-label="メインナビゲーション">
<a href="/">
<img src="/logo.svg" alt="会社名" width="200" height="40">
</a>
<ul>
<li><a href="/about/">会社概要</a></li>
<li><a href="/service/">事業内容</a></li>
<li><a href="/news/">お知らせ</a></li>
<li><a href="/recruit/">採用情報</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section aria-label="メインビジュアル">
<h1>キャッチコピー：企業のビジョンを端的に</h1>
<p>サブコピー：事業内容を補足する説明文</p>
<a href="/contact/">お問い合わせはこちら</a>
</section>
<section>
<h2>事業内容</h2>
<div>
<section>
<h3>事業1のタイトル</h3>
<p>事業1の説明文</p>
<a href="/service/service1/">詳しく見る</a>
</section>
<section>
<h3>事業2のタイトル</h3>
<p>事業2の説明文</p>
<a href="/service/service2/">詳しく見る</a>
</section>
</div>
</section>
<section>
<h2>お知らせ</h2>
<ul>
<li>
<time datetime="2026-03-15">2026.03.15</time>
<a href="/news/20260315/">お知らせタイトル</a>
</li>
</ul>
</section>
<section>
<h2>企業情報</h2>
<table>
<tr><th>会社名</th><td>株式会社○○</td></tr>
<tr><th>所在地</th><td>東京都○○区△△ 1-2-3</td></tr>
<tr><th>設立</th><td>2020年1月</td></tr>
<tr><th>代表者</th><td>代表 太郎</td></tr>
<tr><th>事業内容</th><td>Webマーケティング支援</td></tr>
</table>
</section>
</main>
<footer>
<nav aria-label="フッターナビゲーション">
<ul>
<li><a href="/privacy/">プライバシーポリシー</a></li>
<li><a href="/sitemap/">サイトマップ</a></li>
</ul>
</nav>
<p>© 2026 会社名</p>
</footer>
</body>
</html>コーポレートサイトのテンプレートでは、構造化データにOrganizationとWebSiteの2種類を配列で設定しています。Organization構造化データにはsameAsプロパティでSNSアカウントを紐づけることで、ナレッジパネル（検索結果の右側に表示される企業情報カード）に反映される可能性が高まります。WebSite構造化データにSearchActionを設定すれば、検索結果にサイト内検索ボックスが表示されることもあります。
HTMLテンプレートのカスタマイズポイント
ここまで紹介したテンプレートを自サイトに導入する際に、必ずカスタマイズすべき箇所を一覧表にまとめます。テンプレートのコピペだけで終わらせず、各項目を自サイトの情報に正確に書き換えることが重要です。Web制作にSEOを組み込む方法の記事でも解説しているとおり、テンプレートの導入はSEO対策のスタート地点にすぎません。
| 項目 | 変更箇所 | 推奨設定 | 未設定時のリスク |
|---|---|---|---|
| lang属性 | <html lang=”ja”> | コンテンツの言語に合わせて変更（英語ならen） | 検索エンジンが言語を誤認識し、意図しない国の検索結果に表示される |
| titleタグ | <title>の内容 | 対策KWを先頭に配置、30〜35文字以内 | 自動生成タイトルになりCTR低下 |
| meta description | content属性の値 | 80〜120文字、ベネフィットを明記 | 本文から自動抽出された断片的テキストがスニペットになる |
| canonicalタグ | href属性の値 | 自ページの正規URLを絶対パスで記述 | 重複コンテンツの評価分散、意図しないURLがインデックスされる |
| og:image | content属性の値 | 1200×630pxの画像URLを指定 | SNSシェア時にサイドバーの画像や広告が表示される |
| 構造化データ | JSON-LD内の各値 | ページ種別に合ったタイプを選択（Article/Product/Organization等） | リッチリザルトが表示されず、検索結果での差別化ができない |
| favicon | linkタグのhref | ICO・SVG・Apple Touch Iconの3種を設定 | ブラウザタブやブックマークでサイトが識別しにくい |
続いて、bodyタグ内で注意すべきカスタマイズポイントもまとめます。
| 項目 | 対象要素 | 正しい使い方 | よくある間違い |
|---|---|---|---|
| h1タグ | <h1> | ページに1つだけ、メインタイトルとして使用 | ロゴにh1を使う、複数のh1を配置する |
| 見出し階層 | <h2>〜<h6> | 番号順に階層を深くする（h2→h3→h4） | h2の直下にh4を置く（h3を飛ばす） |
| 画像のalt属性 | <img alt=””> | 画像の内容を具体的に記述 | alt未設定、キーワードの詰め込み、「画像」とだけ記述 |
| 画像サイズ属性 | width / height | 実際の表示サイズを指定してCLSを防止 | width/height未指定で読み込み時にレイアウトがガタつく |
| 内部リンク | <a href=””> | 関連性の高いページに自然なアンカーテキストでリンク | 「こちら」「詳しくはここ」のような無意味なアンカーテキスト |
| 遅延読み込み | loading属性 | ファーストビュー外の画像にloading=”lazy”を指定 | ファーストビューの画像にlazyを指定してLCPを悪化させる |
| nav要素のラベル | aria-label | 複数のnavがある場合は各navに識別名を付与 | aria-label未設定で、スクリーンリーダーがnavを区別できない |
上記2つのテーブルを参照しながらテンプレートをカスタマイズすれば、見落としなくSEOの基本設定を完了できます。特に「未設定時のリスク」と「よくある間違い」の列は、自サイトの既存ページを見直す際のチェックリストとしても活用できます。
scale-basics.comでは、この2つのチェックテーブルをもとに既存の全ページを点検したところ、og:imageが未設定のページが3ページ、canonicalが相対URLになっているページが2ページ見つかりました。修正後、2週間でSNSからのクリック率が約1.4倍に改善した実績があります。小さな設定ミスの積み重ねが、全体のSEOパフォーマンスに大きく影響するのです。
まとめ
HTMLのSEO対策は、一度テンプレートを正しく作ってしまえば、以降のページ制作で毎回ゼロから考える必要がなくなります。本記事で紹介した内容を振り返りましょう。
まず完全版テンプレートとして、headタグ内のメタ情報（charset、viewport、title、meta description、canonical、OGP、構造化データ）とbodyタグ内のセマンティック構造（header、nav、main、article、aside、footer）をすべて網羅したHTMLコードを提示しました。このテンプレートは実際にscale-basics.comの全ページで使用しており、PageSpeed Insightsで全ページ90点以上を維持しています。
headタグ内の各設定については、それぞれの要素が「なぜ必要か」「設定しないとどうなるか」を具体的に解説しました。特にtitleタグの文字数（30〜35文字）、meta descriptionの文字数（80〜120文字）、canonicalタグの絶対URL記述、OGP画像の推奨サイズ（1200×630px）は、テンプレートをカスタマイズする際に必ず守るべきルールです。
bodyタグ内のセマンティック構造では、header/nav/main/article/aside/footerの正しい配置と、見出しタグの階層ルール（レベルを飛ばさない、h1は1つだけ）を説明しました。これらのセマンティック要素を正しく使うことで、検索エンジンにページ構造を正確に伝えることができます。
用途別テンプレートとして、ブログ記事ページ（BlogPosting構造化データ）、商品・サービスページ（Product構造化データ）、コーポレートトップページ（Organization + WebSite構造化データ）の3パターンを用意しました。いずれもコピペして自サイトの情報に書き換えるだけで、SEOの基本設定が完了する実用的なコードです。
最後に、カスタマイズ時に見落としやすいポイントをheadタグ内とbodyタグ内のそれぞれについてテーブルにまとめました。この一覧は新規ページ作成時だけでなく、既存ページの改善時にも活用できるチェックリストです。
HTMLテンプレートの整備は、SEO対策の「土台」です。この土台が揺らいでいると、どれほど質の高いコンテンツを書いても検索エンジンに正しく評価されません。まずは本記事のテンプレートをベースに自サイトのHTMLを見直し、基本設定を確実に整えてください。そのうえで、コンテンツの質と量を積み上げていくことが、長期的なSEO成功への最短ルートです。
