SEOに重要な全HTMLタグと構造化マークアップテンプレート

ひとつなぎのSEO HTMLタグ
SEOに重要な全HTMLタグと構造化マークアップテンプレート

「SEOに重要HTMLタグって結局どれ？」

「構造化データってさっぱりわからないんですが？」

こんな疑問に「テンプレート」で答えます。

目次

HTMLに求められることは何か？

ユーザーから検索エンジンに要求されることは、単なる文章ではなく、「意図」になりました。そのため、ウェブページを記述する基本言語であるHTMLには、

ページに含まれるコンテンツの意図を正確に検索エンジンに伝える

ことが求められます。

HTMLを適切に記述することで、そのコンテンツが持つ本来の意味を検索エンジンに伝えやすくなり、SEOに強力に働きます。

セマンティックとは何か？

「本来の意味やユーザーが求める意図」を意識した検索のことを「セマンティック検索」といいます。現在ではランクブレインなどの人工知能を活用しながら行われています。

「意図」を意識してHTMLを記述することを「セマンティックHTML」や「セマンティックにマークアップ」などと呼びます。

せっかく作った渾身のコンテンツをより正確に検索エンジンに伝えるためには、HTMLを理解し、文法通りにマークアップすることがどうしても必要です。

HTMLマークアップのポイント

ポイントは以下の５つです。

ユーザー体験をよりよくする
検索エンジンが最も重要視するのが、ページの最初の部分。ここに関わるHTMLタグが、タイトル要素、メタデスクリプション要素、見出し要素、リスト要素です。
SNSとの共有を最適化する
今や当たり前となったSNSでのページの共有。それには次のHTMLタグがページにマークアップされていないといけません。オープングラフ要素、オープングラフtwitter要素
ページ内の重要な部分を正確に検索エンジンに伝える
文章に意味を持たせるセマンティックなマークアップ。色んなサイトで意外にできていないのが次のタグ。ヘッダー要素、セクション要素、記事要素、アサイド要素、イメージ要素
スニペット用に最適化する
「ユーザー評価」や「よくある質問」、「パンくずリスト」など、最近の検索結果はこんな「リッチスニペット」で賑やかです。ここで重要となるのがJSON-LD要素です。
モバイルフレンドリーにする
「AMP」ってご存知ですか？モバイルページを早くするための技術ですが、今後間違いなく重要になってきます。この「AMP」に関わるタグが、メタビューポート要素、カノニカル要素、JSON-LD要素です。

セマンティックHTMLテンプレート【完成形】

まずは完成形のテンプレートから、SEOに重要なセマンティック要素を含めたHTMLタグの全てです。

あくまでSEOに重要なタグに限定しています。レイアウトに使用する<div>要素や<style>要素などは記載していません。

あなたのウェブページがこのHTML要素のような構造になっていればOKです。

このテンプレートに記載されているHTMLタグはクリックできる目次としても機能します。

この文書はhtmlですよ宣言
<!DOCTYPE html>
【htmlタグ】日本語であることを指定
<html lang="ja-JP">
【ヘッドタグ】ページ設定を記述
<head>
【メタチャーセットタグ】文字コードをutf-8にする 
<meta charset="utf-8">
【タイトルタグ】キーワードで最適化
<title>ここにタイトルを記述</title>
【メタロボットタグ】検索エンジンがクロールできることを伝える
<meta name="robots" content="index, follow">
【メタビューポートタグ】レスポンシブデザインに対応させる
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
【カノニカルタグ】類似ページや重複ページ、多言語ページやAMPページがある場合
<link rel="canonical" href="正規のURLをここに記述">
【hreflangリンク】他の言語のページがある場合のみ指定
<link rel="alternate" hreflang="ここに言語コードを記述" href="その言語で書かれたページのURLを記述">
【メタディスクリプション】キーワードで最適化しながらページをアピール
<meta name="description" content="ここにディスクリプションを記述">
【オープングラフタイプ】SNS向けにこのページは「記事」ですよ宣言
<meta property="og:type" content="article">
【オープングラフURL】SNS向けにページのURL 
<meta property="og:url" content="ここにSNS用のURLを記述">
【オープングラフタイトル】SNSのタイトル向けに最適化
<meta property="og:title" content="ここにSNS用のタイトルを記述">
【オープングラフディスクリプション】SNSのディスクリプション向けに最適化
<meta property="og:description" content="ここにSNS用のディスクリプションを記述">
【オープングラフイメージ】SNSに表示するイメージ
<meta property="og:image" content="ここにSNS用の画像URLを記述">
【twitterサイト】twitter共有用にtwitterのアカウントID「@」から始まるID
<meta property="twitter:site" content="ツイッターのアカウントIDを記述">
【twitterクリエイター】上記サイトで異なるツイッターアカウントIDの場合に記述、同じ人なら同じID「@」から始まるID
<meta property="twitter:creator" content="twitterのアカウントIDを記述">
【twitterカード】タイムラインに表示されるページの概要を大きな画像を使って表示する場合
<meta property="twitter:card" content="summary_large_image">
【twitter画像URL】タイムラインに表示される画像のURL
<meta property="twitter:image:src" content="ここにSNS用の画像URLを記述">
【構造化マークアップ（LD+JSON）】構造化マークアップがありますよ宣言
<script type="application/ld+json">
{ //ここから構造化マークアップ。
"@context": "https://schema.org", //schema.org仕様の構造化データを使います宣言
"@graph": //複数の項目を指定する場合は@graphでグループ化
[ //複数の項目を大括弧[ でグループ化
{ //ここからブログ情報
"@type": "BlogPosting", //ブログのページですよ宣言
"author": { //記事の著者情報
"@type": "Person", //著者は個人ですよ宣言
"name": "Koshiro Nakagami" //個人の名前
}, //記事の著者情報ここまで
"publisher": { //記事の出版者情報
"@type": "Organization", //出版者は組織ですよ宣言
"name": "Cloudeffects, LLC.", //組織の名前（サイトの名前でもOK）
"logo": { //出版者のロゴ
"@type": "ImageObject", //画像情報ですよ宣言
"url": "https://www.cloudeffects.com/img/brand_logo.png" //ロゴ画像のURL（サイズ指定あり）
} //ロゴ情報ここまで
}, //出版者情報ここまで
"datePublished": "2020-03-27T08:00:00-08:00", //記事の公開日時
"dateModified": "2020-03-27T09:20:00-08:00", //記事の更新日時
"headline": "ここにタイトル要素の文章を記述", //記事のタイトル
"image": [ //記事のキャッチ画像（横幅最低1200pxで３種類の画像を指定）
"https://example.com/img/photo_1200x1200.jpg", //1x1サイズの画像
"https://example.com/img/photo_1200x675.jpg", //16x9サイズの画像
"https://example.com/img/photo_1200x900.jpg" //4x3サイズの画像
],  //記事のキャッチ画像ここまで
"description": "ここにメタデスクリプション要素の文章を記述", //記事の説明
"mainEntityOfPage": { //主要ページであることを指定
"@type": "WebPage", //ウェブページ
"@id": "https://www.cloudeffects.com/seo/html-structured-markup" //URLを指定
} //主要ページの指定ここまで
}, //ここまで記事情報（パンくずリストがあるのでカンマで繋ぐ）
{ //パンくずリストここから
"@type": "BreadcrumbList", //パンくずリストがありますよ宣言
"itemListElement": [ //ここからリストグループ。中括弧{ } をグループ化する時は大括弧[ ] 
{  //ここから１つ目の要素
"@type": "ListItem", //リストの要素ですよ宣言
"position": 1, //１つ目の位置ですよ宣言
"name": "ホーム", //１つ目の表示名は「ホーム」宣言
"item": "https://www.cloudeffects.com" // １つ目のリンクURL宣言
}, //ここまで１つ目の要素（２つ目があるのでカンマで区切る）
{ //ここから２つ目の要素
"@type": "ListItem", //リストの要素ですよ宣言
"position": 2, //２つ目の位置ですよ宣言
"name": "SEO", //２つ目の表示名は「SEO」宣言
"item": "https://www.cloudeffects.com/seo" //２つ目のリンクURL宣言
}, //ここまで２つ目の要素（３つ目があるのでカンマで区切る）
{ //ここから３つ目の要素
"@type": "ListItem", //リストの要素ですよ宣言
"position": 3, //３つ目の位置ですよ宣言
"name": "セマンティックSEOに必要な全HTMLタグと構造化マークアップ", //３つ目の表示名の宣言
"item": "https://www.cloudeffects.com/seo/html-structured-markup" //３つ目のリンクURL宣言
} //ここまで３つ目の要素
] //ここまでリストグループ
} //ここまでパンくずリスト。
] //@graphここまで。
} //ここまで構造化マークアップ。
</script>
</head>
ページボディ。ここから画面に見える
<body>
ページヘッダー。画面上部に配置・ロゴ・ナビゲーションなどが含まれる
<header>
<img src="ロゴ画像のURL" alt="サイトや会社の名前">
グローバルナビゲーション
<nav>
<ul> 一般的にはナビゲーションはリストタグが使われる
<li>【ホーム】</li> トップページへのリンクを必ずつける
<li>【カテゴリー・商品】</li> サイトの主要ページへのリンク
<li>【プロフィール・会社案内】</li> 運営者情報へのリンク
<li>【問い合わせ方法】</li> 運営者へコンタクトできることが重要
</ul>
</nav>
</header>
そのページのメインコンテンツであることを示す
<main>
パンくずリスト
<nav>
<ul>
<li>【トップ】</li>
<li>【カテゴリートップ】</li>
<li>本記事</li>
</ul>
</nav>
記事開始。
<article>
記事ヘッダー。本で言えば表紙。ここに狙ったキーワードを含める。
<header>
記事の大見出し
<h1>タイトルと同じ文章</h1>
<p>導入文</p>
目次、ページ内ナビゲーション
<nav>
<ol>
<li>【h2の文章】</li>
<li>【h2の文章】
<ul> リスト要素を入れ子にする場合
<li>【h3の文章】</li>
<li>【h3の文章】</li>
</ul>
</li>
</ol>
</nav>
</header>
セクションパターン１（一本のブログ記事の場合）
<section> セクションの開始。本で言えば「章」見出しをつけることができる文章（ロングテールキーワード）のまとまり。
記事の中見出し
<h2>ロングテールキーワードで最適化</h2>
<p>ロングテールキーワードを説明</p>
箇条書き。文章を簡単にしてユーザーに読みやすさを与える。
<ul>
<li>【リスト項目】</li>
<li>【リスト項目】</li>
</ul>
説明リスト。ulタグを代替えできるようなら積極的にdlタグを使う。
<dl>
<dt>【説明リストタイトル】</dt>
<dd>【説明リスト詳細】</dd>
</dl>
外部リンクをつける場合
<p><a href="URL" target="_blank" rel="noopener">外部リンク</a></p>
アフィリエイトリンクをつける場合
<p><a href="URL" target="_blank" rel="sponsered">アフィリエイトリンク</a></p>
【asideタグ】本文中にアドセンス広告をいれる場合
<aside>【アドセンス広告】</aside>
</section>
セクションパターン２（カテゴリーページや新着一覧のような複数の記事のまとめページなど）
<section>
独立したコンテンツとして成り立つ場合はarticleタグで囲む。
<article>
<h2>記事のタイトル</h2>
<p>記事の概要</p>
</article>
articleタグは複数あってもOK
<article>
<h2>記事のタイトル</h2>
<p>記事の概要</p>
</article>
</section>
記事フッター
<footer>
<p>著者の情報</p>
</footer>
</article>
</main>
サイドバー
<aside>
・バナー広告
・新着記事
・カテゴリーリンク
・よく読まれる記事
・月次アーカイブ
・サイト内検索
</aside>
ページフッター。本でいう裏表紙。
<footer>
ページフッターナビゲーション
<nav>
<ul>
<li>【プライバシーポリシー】</li> EAT（権威性、信頼性、専門性）の観点から必ずつける
<li>【特定商取引法に基づく表示】</li> 法で要求されているページへのリンクを必ずつける
</ul>
</nav>
<p>【著作権情報】</p>
</footer>
</body>
</html>

HTMLタグの解説（ヘッド要素）

htmlタグlang属性

「<html>要素」のlang属性は、ページの記述言語を検索エンジンに示します。日本語の場合は「ja-JP」を指定するだけです。

htmlタグlang属性の例

<html lang="ja-JP">

他の言語の指定例

<html lang="en-US"> <!-- 英語アメリカ用 -->
<html lang="en-UK"> <!-- 英語イギリス用 -->
<html lang="en-CA"> <!-- 英語カナダ用 -->
<html lang="zh-Hant"> <!-- 中国語（繁体） -->
<html lang="zh-Hans"> <!-- 中国語（簡体） -->
<html lang="zh-Hanz-TW"> <!-- 台湾用中国語（繁体） -->

ヘッド要素（<head>タグ）

「<head>要素」はページの概要を指定したり、ページの本文以外の設定をするためのタグです。

検索エンジンに向けた様々な情報を記述する場所であり、SEOに重要な要素を数多く含みます。

ヘッド要素のHTML例

<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<title>【タイトル】</title>
<meta name="description" content="【ページの説明文】">
</head>
<body>
【文書の中身】
</body>
</html>

メタチャーセット

「<meta charset="utf-8">タグ」の「charset」とは「キャラクターセットの略」であり「文字コード」のことを示します。このタグの最適化は１つしかありません。「utf-8」を指定するだけです。

メタチャーセットのHTML例

<meta charset="utf-8">

「utf-8」は、世界中のほとんどの文字の表現できる世界共通のコードです。

また、メタチャーセットを「utf-8」にすることは「AMP（アクセラレーテッドモバイルページ）」と呼ばれるモバイル専用のページで「必須」のタグです。必ず指定しておきましょう。

タイトル要素（<title>タグ）

言わずと知れた<title>タグ。

通常、<title>要素はページの内容を最もよく表した文章で表現され、検索結果に大きく表示されます。

タイトル要素のHTML例

<title>ページの内容を最もよく表した文章</title>

タイトル要素にはキーワードを含める

以前はこの原則は揺るぎないものでした。

ですが今日、タイトルタグは幾分SEO的な価値は下がっています。

なぜなら検索エンジンはタイトルに正確なキーワードを指定しなくとも、ページに含まれる全ての要素に基づいて、ページの内容が解釈されるようになりました。

それゆえか、Googleは次のような場合に、検索結果のタイトルをあなたの意思に反して変更します。

  • タイトルにキーワードが詰め込まれてすぎている
  • タイトルと検索キーワードが一致しない
  • ユーザーが辿ったリンクテキストの方が適切である

検索エンジンはキーワードの意味を理解しています。

無駄に繰り返したり、ページ内容にそぐわないタイトルにしても意味がなく、むしろ問題が発生する可能性の方が高いです。

タイトルタグの最適化方法

タイトルはユーザーの目に触れるため、ランキング決定要素である「クリック率」 に影響します。

数字入れたり、括弧を入れたり、ブランド名を入れたりしながらより魅力的なタイトルにすることで、ユーザー体験の向上に繋がります。

クリック率を上げるための具体的な方法は【図解】SEOクリック率【感情サークルとパワーワード331選】をご覧ください。

クリック率とは

【図解】SEOクリック率【感情サークルとパワーワード331選】

Googleの検索結果におけるクリック率（CTR）の計算方法や業界平均とその重要性についての完全理解。クリック率を上げるための対策マニュアルでは「感情サークル」や「感情的になるパワーワード」を使ったクリック率の改善方法を解説しています。

タイトルの文字数

32文字程度にしましょう。
それ以上でも構いませんが、Googleに切り取られてしまいます。

この32文字というのは、実際には検索結果のタイトル部分のピクセル数（デスクトップでは約600px、モバイルではデバイスの幅による）の中に入る長さになります。

日本語の場合が大体32文字ということですね。

タイトルにはクリックを促すためにキーワードを含める

重要なキーワードほどタイトルの最初の方に置き、せいぜい２単語程度そのページで使われているキーワードを含めます。

タイトルにキーワードを含めることは、検索エンジンのためではなく、検索結果をクリックするユーザーのために行う最適化です。

メタロボット

「<meta name="robots">タグ」は、そのページを検索エンジンがインデックスするかどうかを指定します。

メタロボットタグがそのページのHTMLに記述がない場合、検索エンジンはそのページの全てをクロールしてインデックスを作成します。

そのため、通常は指定しなくても構いません。インデックスをさせたくないようなページがある場合のみ使用するといいでしょう。

インデックスさせないサンプル

<meta name="robots" content="noindex, nofollow">

機能的には「robots.txt」に似ていますが、「robots.txt」はサイト全体、メタロボットタグはそのページに対しての指定になります。

また、robots.txtファイルとメタロボットタグではrobots.txtの方が優先されます。

メタロボットタグに指定できる属性は次の通りです。

  • noindex 検索エンジンがページのインデックスを作成できないようにします。
  • nofollow 検索エンジンがページ上のすべてのリンクをたどらないようにします。
  • noarchive ページのキャッシュされたコピーが検索結果に表示されないようにします。
  • nosnippet ページの説明が検索結果に表示されるのを防ぎ、ページのキャッシュを防ぎます。

メタビューポート

「<meta name="viewport">タグ」には、ページの画面サイズをどのようにブラウザに認識させるかを指定します。

このタグの最適化は次のように指定されていれば問題ありません。

メタビューポートのHTML例

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

「カノニカル:canonical」とは「正典」を意味する言葉であり、「<link rel="canonical">タグ」を<head>要素に指定することで、検索エンジンに「正規ページのURL」を伝えます。

カノニカルタグの使用例

<link rel="canonical" href="ここに正規ページのURLを絶対パスで記述" ">

次のような類似ページや重複ページへの対処として使われます。

  • ページングがあるような記事一覧ページ
  • フィルターをかけることで表示が変わるような商品一覧ページ
  • サイズや色が異なるのみで同一商品であるページ
  • 多言語で書かれた記事のあるページ
  • モバイル専用で異なるURLがあるページ
  • AMP（アクセラレーテッドモバイルページ）バージョンのページがある

全ての類似ページや重複ページで指定する

カノニカルタグを指定する場合は、全ての類似ページや重複ページに指定します。

そうすることで、検索結果には正規ページのURLが表示されるようになります。

重複や類似ページを１つのページに集約すると、検索エンジンからの分散されていた評価も集約されます。その結果、大きくランキングが向上する場合もあります。

一方、間違って設定してしまうと、そのページのランクが全て失われてしまう、危険なタグでもあります。

カノニカルタグはSEOにとって強力なタグであり、諸刃の剣でもあります。

またURLは相対パスでなく「絶対パスで指定」しなければなりません。

良い例（絶対パス指定）
<link href="https://www.cloudeffects.com/seo/html-structured-markup" rel="canonical">
悪い例（相対パス指定）
<link href="/seo/html-structured-markup" rel="canonical">

AMP（アクセラレーテッドモバイルページ） を指定する

AMPはページをモバイルフレンドリーにするための最適化の１つです。

オリジナルページの他にAMP用バージョンとしてページを作りますが、その際にカノニカルタグを使用して、 AMP ページがあることを検索エンジンに伝えます。

AMPは、AMP ガイドラインに沿って、正規ページと AMP バージョンのページを指定する必要があります。

「<link rel="alternate" hreflang="言語コード">要素」は、内容が同じで、異なる言語で書かれたページが他に存在することを検索エンジンに伝えます。

<html>要素で指定する文字コードと同じ仕様のコードをhreflang属性に指定して、その言語で書かれたページのURLをhref属性に指定します。

日本語がメインのページでアメリカ用英語で書かれたページがある場合のHTMLサンプルです。

日本語版とアメリカ版の指定方法

<link rel="alternate" hreflang="ja-JP" href="https://www.example.com">
<link rel="alternate" hreflang="en-US" href="https://www.example.com/en-us">

多言語版のある全てのページに指定して、メインとなる言語のページも必ず指定する必要があります。

また、href属性には、完全修飾形式（https:// or http:// から始まる完全URL）で指定します。

詳しくはGoogleの「ページのローカライズ 版についての記事」を参照してください。

メタディスクリプション

「<meta name="description">要素」は、直接のランキングには影響しませんが、タイトルと同様にユーザーの目に触れるので「クリック率」に影響します。

さらに、メタディスクリプションとコンテンツの内容が一致すればするほど「直帰率の低下」にも貢献します。

ページをSNSで共有した場合にそのページの概要として使われます。

メタディスクリプションHTML例

<meta name="description" content="ここにディスクリプションを記述" ">

メタディスクリプションの文字数

以前はメタディスクリプションの長さは固定であり、約160文字程度でしたが、Googleはこれまでのアップデートによりメタディスクリプションを大きく変えてきました。

「更新日」や「移動先」、「動画のサムネイル」など、実に多彩に表現されます。

「平均では200文字程度」であり、「多い時は350文字程度」まで表示されます。

いずれにしてもメタディスクリプションの文字数は？という問いには答えはありません。

メタディスクリプションではページをアピールしよう

メタディスクリプションには、検索ワードとして入力されたキーワードに最も近い内容が表示されることは確かです。

ならばページの内容をユーザーにアピールしてみましょう。

ページの内容をより簡単にユーザーに伝えるのです。

メタディスクリプションにはキーワードを含める

メタディスクリプションには、検索されたキーワードが太字になって表示されます。

これはユーザーのクリックを誘うことに繋がり、ユーザー体験信号を観察するランクブレインに検知されます。

そのため狙ったキーワードによってメタディスクリプションを最適化することは、たとえ「ランキング決定要素ではない」とは言われど、依然として重要なことは確かです。

構造化データを使用してリッチにする

後述する構造化データマークアップを使えば、メタディスクリプションをリッチに飾ることができます。

  • ５つ星評価
  • ユーザーレビューの数
  • 画像
  • 商品の情報（料理のレシピ、摂取カロリー、価格など）

メタオープングラフ

「<meta property="og:*">タグ」は、<head>要素の中に含める追加の<meta>要素です。

ページをSNSでシェアする際に使用されます。2010年にFacebookによって初めて導入され、他のSNS（LinkedIn、Google My Businessなど）でも使用されています。

オープングラフの最適化方法

オープングラフタグはSNSでページを共有する時に反映されるものであり、ページそのものの表示は変わりません。

オープングラフタグを最適化することは、SNS上でのクリック率の向上や、そこからのページへの流入、被リンク獲得などが見込めます。

SNSで共有することを前提とするならば、必ず設定するべきものです。

オープングラフタグには様々な種類があり、下記のようなタグを指定することで最適化を行います。

オープングラフタイプ

<meta>要素である「<meta property="og:type">タグ」は、そのページで扱うコンテンツの内容や共有されるSNSによって変わりますが、通常のブログでは次のように記述します。

オープングラフタイプHTML例

<meta property="og:type" content="article">

オープングラフURL

<meta>要素である「<meta property="og:url">タグ」は、そのページのURLを記述します。

オープングラフURL使用例

<meta property="og:url" content="ここにオープングラフURLを記述">

オープングラフタイトル

<meta>要素である「<meta property="og:title">タグ」は、「日本語であれば30文字程度」までにしておきましょう。

そうしないと、共有先のSNSで切り捨てられる場合があります。

オープングラフタイトルHTML例

<meta property="og:title" content="ここにオープングラフタイトルを記述">

オープングラフディスクリプション

<meta>要素である「<meta property="og:description">タグ」は、前述のメタディスクリプションの内容をそのまま記述してもいいのですが、「文字数は60文字程度」までしか表示されません。

ogディスクリプションHTML例

<meta property="og:description" content="ここにオープングラフディスクリプションを記述">

オープングラフイメージ

<meta>要素である「<meta property="og:image">タグ」は、そのページの代表となる画像のURLを記述します。ブログサイトでは「キャッチ画像」が相当しますが、それ以外にそのページを最もよく表す画像があれば、そのURLを指定します。

オープングラフイメージHTML例

<meta property="og:image" content="ここに画像のURLを記述">

twitterカード

<meta>要素である「<meta property="twitter:card">タグ」は、twitterでのみ使用される専用のタグです。オープングラフタグにそっくりですが、twitterでそのページを共有する際にツイートと一緒に表示されます。ブログ記事、商品・サービス、ニュースなどをツイート上で強調することができます。

また、「summary_large_image」を指定することで、大きな画像を使用したカードをタイムラインに表示させることができます。

twitterカードHTML例

<meta property="twitter:card" content="summary_large_image">

twitterサイト

<meta>要素である「<meta property="twitter:site">タグ」は、通twitterのアカウント名を記述します。「@」以降の部分です。

twitterサイトHTML使用例

<meta property="twitter:site" content="@CloudeffectsLLC">

twitterクリエイター

<meta>要素である「<meta property="twitter:creator">タグ」は、そのページを作成した人が、上記のサイトタグで指定したアカウント名と違う場合にそのアカウント名を記述します。

サイトを複数人で運営しているときなどに使用します。

twitterクリエイタータグ使用例

<meta property="twitter:creator" content="@CloudeffectsLLC">

twitter画像URL

<meta>要素である「<meta property="twitter:image:src">タグ」は、twitterタイムラインに表示される画像のURLを指定します。

twitter画像URLタグ使用例

<meta property="twitter:image:src" content="ここにtwitter用の画像URLを記述">

twitterカードは他に指定できる項目があります。

詳しくはこちらのツイッター公式サイトを参照してください。

構造化データマークアップ

JSON-LD要素

別名構造化タグ（スキーマタグ）と呼ばれるこのタグは、2024年以降のSEOにおいてウェブページに要求されるほとんどのことがこのタグ内に集約されます。

その理由は、HTMLだけでは表現できない細かい情報をユーザーに提供するためです。

細かい情報とは次のような情報です。

  • パンくずリスト
  • よくある質問
  • ハウツー
  • 画像の著作権情報
  • 商品情報
  • レシピ情報
  • ユーザーレビュー
  • AMP（モバイル専用ページ）

これらの情報を「構造化データ」としてページに埋め込み、検索結果に表示させようというものです。

すでにスニペットとして表示されているのもありますね。

これは「JSON」と呼ばれるjavascriptのフォーマットが使われます。

現時点でウェブページにこの構造化データを含めることは必須ではありません。（AMPページを除く）

ですが、今後音声検索などの次世代検索が出てくるようになり、ユーザーの欲しい情報を素早く提供する必要が出てくると、含めるのと含めないのは大きな差が出てきます。

この構造化マークアップの各項目については別の記事で解説したいと思います。

HTMLタグの解説（ボディ要素）

ボディ要素（<body>タグ）

「<body>要素」はページの文章を記述していく場所です。「本で例えたら本の中身」といえます。

ボディ要素の使用例

<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<title>【タイトル】</title>
<meta name="description" content="【ページの説明文】">
</head>
<body>
【文書の中身】
</body>
</html>

ヘッダー要素（<header>タグ）

「<header>要素」は、「本で例えると表紙」のような意味を持ちます。

このテンプレートでは２カ所で使用しています。１つは、記事の導入部分、もう１つはグローバルナビゲーションの部分です。

記事の導入部分では、ページに<article>要素があることで、「１つの独立した記事」となり、「独立した記事の中の表紙」として解釈されます。

記事の導入部をキーワードで最適化

Googleはページの最初に見える部分を非常に重要視しています。下記のマット・カッツ氏のツイートからそれがわかります。

記事の導入部分の<header>要素にターゲットキーワードを含めることでSEOに効果的に働きます。

また、この部分には、くれぐれも「広告を載せるようなマネ」はしないでください。ランキングが確実に下がります。いまだに見るのがグローバルナビゲーションの上部です。

記事の導入部分のHTMLサンプル

<article>
<header>
<h1>ミドルキーワード</h1>
<p>ロングテールキーワード</p>
</header>
</article>

ページ全体にかかる<header>要素

グローバルナビゲーションの部分では、そのページ全体（バナー広告やカテゴリーなどの記事以外のコンテンツも含む）の中の<header>要素として定義します。

グローバルナビ部分のHTMLサンプル

<body>
<header>
<div>
<img src="ロゴ画像のURL">
</div>
<nav>
<ul>
<li>【ホーム】</li>
<li>【カテゴリー・商品】</li>
<li>【プロフィール・会社案内】</li>
</ul>
</nav>
</header>

「<nav>要素」は、サイト内及びページ内のナビゲーションであることを示します。

  • グローバルナビゲーション
  • パンくずリスト
  • サイドナビゲーション
  • 目次（ページ内ナビゲーション）

ナビゲーション要素の使用例

<body>
<header>
<div>
<img src="ロゴ画像のURL">
</div>
<nav>
<ul>
<li>【ホーム】</li>
<li>【カテゴリー・商品】</li>
<li>【プロフィール・会社案内】</li>
</ul>
</nav>
</header>

<nav>要素は、慣例的に<footer>要素内では使われないことが多く、その理由は画面の下部にあり、検索エンジンからもあまり重要視されないからです。

メイン要素（<main>タグ）

「<main>要素」は、そのページ内で主要となるコンテンツの部分を示します。<header>要素と<footer>要素の間に置かれます。

メイン要素の使用例

<body>
<header>各種タグ</header>
<main>各種タグ</main>
<footer>各種タグ</footer>
</body>

記事要素（<article>タグ）

「<article>要素」は、文章に意味を持たせる構造化HTMLタグの１つであり、記事であることを示します。<article>タグで囲まれた部分は、そのページ内で独立したコンテンツとして検索エンジンに伝えられます。

<article>要素と<section>要素は、よくセットで使われますが、それぞれページ内で複数使うことができるため、しばしば混乱します。

基本的な考え方はその記事から独立したコンテンツとして切り出せるかどうかを考えたとき、切り出せそうなら<article>要素として、そうで無い場合は<section>要素としてマークアップします。<section>要素で詳しく解説しています。

記事要素の使用例

<article>
<header>
<h1>【h1】</h1>
</header>
</article>

セクション要素（<section>タグ）

「<section>要素」は、見出しをつけることができる文章の集まりです。「本で例えると章」になります。セマンティックに意味を持たせる構造化HTMLタグの中でも重要なタグとなります。

<section>要素は、記事が示すトピックから、その部分を切り出すことができない文章のことをいいます。下記のサンプルは１つの<article>要素の中に複数の<section>要素があるケースです。

１本の記事の場合のHTML例

<article>
<header>
<h1>【h1】</h1>
</header>
<section>
<h2>見出し</h2>
</section>
<section>
<h2>見出し</h2>
</section>
</article>

もう１つのサンプルは１つの<section>要素の中に複数の<article>要素があるケースです。１つのまとまりである新着記事一覧を<section>要素でマークアップし、独立した記事を<article>要素でマークアップしています。

複数の記事HTML例

<section>
<h2>【新着記事一覧】</h2>
<article>
<h3>記事のタイトル</h3>
<p>記事の概要</p>
</article>
<article>
<h3>記事のタイトル</h3>
<p>記事の概要</p>
</article>
</section>

見出し要素（<h1>〜<h6>タグ）

「<h1>〜<h6>要素」は、ページのセクションを６段階で階層的にします。本で言えば「章」、「節」、「項」により、文章の内容を細かいピースに分け、意図するトピックをセマンティックに区切ります。

キーワードを<h1>〜<h6>要素で最適化する

<h1>〜<h6>要素を使用して、狙ったキーワードを階層構造に最適化していきます。

<h1>要素は１ページにつき１つであり、ほとんどの場合<title>要素と同じです。

<h1>要素の文を「ロングテールキーワード」で論理的に<h2>要素を使って分けていきます。

必要に応じて<h3>〜<h6>を使って、さらに階層構造にしていきます。この時、見出しのレベルをスキップしないようにしてください。

また、無駄に多くの見出しを記述しないようにします。あくまで各セクションにおける要点や検索意図によって階層的にするような感じです。

<p>要素などでキーワードを説明し、そのセットを<section>要素でマークアップすることで、検索エンジンに「意味のあるセクション」として伝えることができます。

見出し要素には、「狙ったキーワードそのものを含めるのもいいですが、キーワードの同義語（共起語）となるような単語」も含めることでも「意味を把握する検索エンジンには効果的」になります。

  • 「やり方」と「方法」は同義語です。
  • 「購入」と「買う」は同義語です。

キーワードのマークアップ例

<section>
<h1>【ミドルキーワード最適化】</h1>
<p>【ミドルキーワードの説明】</p>
<section>
<h2>【ロングテールキーワード最適化】</h2>
<p>【ロングテールキーワードの説明】</p>
</section>
<section>
<h2>【ロングテールキーワード最適化】</h2>
<p>【ロングテールキーワードの説明】</p>
</section>
</section>

文字数の多いランディングページなどでは<section>要素でマークアップすることで、意味のあるセマンティックなコンテンツを検索エンジンに伝えられるようになります。

<h1>〜<h6>要素でページを読みやすくする

事実、<h1>〜<h6>要素をページに使用しなくても、Googleは問題なくクロールしてくれます。

ただ、「ページが読みやすくなる」という視点からでもSEOには重要です。例えば何のメリハリもない、同じ文字で、同じサイズで、かつ同じ色の文章がいきなり表示されたら、ユーザーはどんな行動をとるでしょうか？

たちまちページから離れていくことは想像に難しくありません。

つまり、

ページを読みやすくする＝「ユーザー体験の向上」に繋がる

ということです。

「ユーザー体験の向上」は、「直帰率」と「滞在時間（ドウェルタイム）」に関わる間接的なランキング決定要素です。

段落要素（<p>タグ）

「<p>要素」は、ページの本文を書くタグです。「パラグラフ:paragraph」の頭文字のことで「段落」を意味します。

段落要素のHTML例

<p>ここに本文を記述</p>

ウェブページは国語の文法は関係ありません。

国語の教科書には段落の定義がありますが、スマホで読むときなどは長い段落が多いとユーザーが疲れてしまいます。

ユーザーが読み易ければ短い文を段落としても一向に構いません。

できれば２〜３行までとし、それ以上になりそうなら、段落を切ったり、文字にアンダーラインを引いたりして可読性を上げましょう。

読みやすい文章は<h1>〜<h6>要素と同じく「直帰率」や「滞在時間」に影響します。この２つは間接的にランキング決定要素に繋がります。

読みやすい　＝　ランクが上がる

と意識しましょう。

リスト要素（<ul>, <ol>, <dl>タグ）

「<ul>, <ol>, <dl>要素」は、項目をリスト形式にして表示します。

リスト要素のメリットは、複雑なコンテンツを簡単に見せることです。ユーザーもリスト要素でマークアップされた部分は、自然と目が行き、内容をすぐに理解します。

リスト要素は、<ul>要素（順序なしリスト）と<ol>要素（順序付きリスト）がよく使われます。

リスト要素は、入れ子構造にすることができます。

リスト要素HTML例

<ul>
<li>順序なし</li>
</ul>

<ol>
<li>順序あり</li>
</ol>

<ol>
<li>順序あり</li>
<li>順序あり
<ul>
<li>順序なし</li>
<li>順序なし</li>
</ul>
</li>
</ol>

「<dl>要素」の使い道

リスト要素には、上記以外に、もう１つ<dl>要素があります。このリスト要素は「説明リスト」と呼ばれ、一連の用語を説明する際に使用します。「よくある質問」に使われる要素です。

実はこの要素、検索エンジンに単語を効率良く伝えることができるので、SEOに非常に効果的なのですが、あまり積極的に使われていません。

例えば「：」を使って単語や文章を表現する時などでは、<ul>要素を使って表現されるのをよく見かけますが、CSSをちょっと使えば、セマンティック度が向上します。

<ul>要素のタグ例

<ul>
<li>TechAcademy：オンライン完結でプログラミングを学びたい方</li>
</ul>

<ul>要素の出力例

  • TechAcademy：オンライン完結でプログラミングを学びたい方

<dl>要素で再定義した例

<style>
.dl-inline {
padding-left: 2em;
}
.dl-inline dt {
float: left;
margin-right: 0.3em;
font-weight: normal;
}
.dl-inline dd:before {
content: "：";
}
.dl-inline dt:before {
content: "\02022";
padding-left: 1.25em;
padding-right: 0.5em;
}
.dl-inline dd, .dl-inline dt {
margin: 0;
padding: 0;
}
</style>

<dl class="dl-inline">
<dt>TechAcademy</dt>
<dd>オンライン完結でプログラミングを学びたい方</dd>
</dl>

<dl>要素の出力例

TechAcademy
オンライン完結でプログラミングを学びたい方

アンカー要素（<a>タグ）

「<a>要素」は、サイトの内部ページや、外部ページ、pdfなどのファイル、同じページの他の位置、メールアドレスや電話番号などへのハイパーリンクを作成する要素です。

アンカー要素のHTML例

<a href="https://www.cloudeffects.com">他のページへのリンク</a>
<a href="#toc">同一ページにある要素のidが「toc」である要素へリンク</a>
<a href="mailto:me@website.com">me にメールを送る</a>
<a href="tel:+12345678900">+12345678900に電話をかける</a>

<a>要素にはよく使われる属性として、ブラウザの動きを制御する「target属性」と、

サイトの外部ページにジャンプした時の動きを制御する「rel属性」があります。

「rel="sponsored"」属性をつける

ユーザーは広告を嫌います。ならば、Googleも広告を嫌います。

されど、Googleも企業なので収益を上げないといけません。

Googleのこんなジレンマを考えながらアンカータグをつけましょう。

アフィエイトサイトへのアンカータグには、「rel="sponsored"」を指定します。そうすることで、検索エンジンはその先のリンクを「広告」として認識してくれます。

<a href="URL" rel="sponsored">アフィリエイト先リンク</a>

「rel="noopener"」属性をつける

これはSEOというより、セキュリティ分野の話です。

アンカータグに「target="_blank"」属性を指定すると、ブラウザの新しいタブが開いてページが表示されます。

実はこの時、リンク先のページに下記のようなJavascriptコードが埋め込まれている場合、違うページにさらにジャンプできるようになります。

window.opener.location = newURL

つまり、外部リンク先のページにこのコードがあれば、あなたのページの外部リンクをクリックしたユーザーに意図しない動作を強いる可能性があるということです。

これを回避するには、リンクタグに「rel="noopener"」を追加してください。

アンカー要素のHTML例

<a href="URL" target="_blank" rel="noopener">サイト外部へのリンク</a>
<a href="URL" target="_blank" rel="sponsored, noopener">アフィリエイトサイトへの外部リンク</a>

アンカー要素target属性

target属性説明
target="_blank"リンク先のページをブラウザーの新しいタブで開く
target="_self"リンク先のページをブラウザーの既存のタブで開く（デフォルト）

アンカー要素rel属性

rel属性説明
rel="sponsored"この属性は「有料リンク」に対して指定します。つまり広告ですね。以前は「nofollow」という属性でしたが、こちらに変更されました。「nofollow」でも使用できますが、「sponsored」が最新です。Googleのガイドライン「リンクプログラム」をご覧ください。
rel="ugc"ページにコメント投稿機能あり、ユーザーが作成できるコンテンツがある場合、そのコンテンツのリンクにはこの属性を指定します。
rel="noopener"リンク先のjavascriptコード「opener」を無効にする属性です。外部リンクにはこの属性をつけることをお勧めします。

イメージ要素（<img>タグ）

「<img>要素」は、文書に画像を埋め込みます。

有用な画像にalt属性をつける

<img>要素のalt属性は、指定された画像の説明を記述する属性です。

そして、検索エンジンにその「画像の意味」を伝える役割も果たします。

そのため、SEO的に通常の検索はもちろん、画像検索をする場合などのランキングに影響する「非常に重要」な属性です。

イメージ要素のHTML例

<img src="ここに画像のURL" alt="ここに画像の説明">

ページ上の全ての画像についてalt属性を記述するっていうことではありません。記述するべきはそのページにおいて「有用な画像」です。

有用な画像は次のようなものです。

  • 商品画像
  • ページで説明しているスクリーンショット
  • データなどを示したグラフやインフォグラフィック
  • ロゴ
  • 本文の説明に欠かせない写真

alt属性は狙ったキーワードを最適化する

ヘッダータグと同じく、ターゲットとしたキーワードに最適にしてください。そうすることで、画像検索にヒットしやすくなります。

アサイド要素（<aside>タグ）

「<aside>要素」は、記事本文の「補足情報」であることを示します。「本で例えるとコラム」 に相当します。<aside>要素でマークアップされるべき情報は、ブログサイトでの「サイドバー」や「本文中の広告」などです。

特にアドセンスの広告には必ず<aside>要素でマークアップしましょう。

アサイド要素のHTML例

<article>
<aside>
<ins class="adsbygoogle">【アドセンス広告】</ins>
</aside>
</article>

「<footer>要素」は、その名の通りフッターであることを示します。「本で例えると裏表紙や背表紙」といったところです。

<header>要素と同じように、テンプレート中では、「記事のフッター」と「ページのフッター」があります。

記事のフッターは<article>要素の下部に配置し、その記事を書いた著者の情報を記載します。

ページのフッターは<body>要素の下部に配置し、利用規約、プライバシーポリシー、特定商取引に基づく表示や著作権情報などを記載します。

記事フッターのHTML例

<article>
<header>【ヘッダー】</header>
<section>【セクション】</section>
<section>【セクション】</section>
<footer>
<p>【著者情報】</p>
</footer>
</article>

ページフッターのHTML例

<body>
<header>【ヘッダー】</header>
<main>【メイン】</main>
<footer>
<p>利用規約、プライバシーポリシー、特定商取引に基づく表示や著作権情報など</p>
</footer>
</body>

まとめ

HTMLはWordpressのビジュアルエディタをなどを使えば、あまり意識しないで書くことができますが、

HTMLをWordpress任せにしてしまうと、無駄なタグや属性が勝手に追加されることがよくおきます。

自動で作っても結局後から変更する手間を考えれば、HTMLの知識は今後のサイト運営においてもどうしても必要なスキルとなってきます。

HTMLの知識は付ければつけるほど、サイトの表現の幅が広がり、ユーザーやGoogleに対して有用なコンテンツを提供できるようになります。

目次
上へ