このような疑問にお答えします。
最後にこれらのHTMLを使ったテンプレートコードも記載しておきます。
このブログでわかること
- 正しいHTMLを使うとなぜSEOに強くなるのか
- SEOでよく使うタグ
- 使わないほうがいいHTML
- どんなときにどのHTMLを使えばいいのか
このブログに信頼性について
- SEO歴：11年
- 現在もウェブマーケティングの会社に所属し、SEOコンサルに携わっています。
- SEOコンサルだけではなく、実際にエンジニアとしてサイト制作をやっています。
正しいタグを使うとなぜSEOに強くなるのか
まずなぜ正しいHTMLを使うとSEOに強くなるかというと・・・
GoogleもHTMLを読むことができるからです。
もう少し、詳しく話すとGoogleはHTMLタグを見てそこにあるものがどういう意味で使っているかを見ているからです。
例えば、見出しを表すHタグを使えばGoogleは「この文は見出しに部分だから、このあとの文は見出しに対する文章があるんだな」という風に解釈をします。逆に見出しに当たる文を<div>タグなどで表した場合、書いている人の本来の意図がGoogleに伝えることができなくなってしまいます。
世界トップレベルのGoogleでも数億、数兆とあるウェブページすべてを人の目で見ているわけではありません。基本的にはGoogleが開発した「Googlebot」という機械があなたのページの読みます。
そのため、あなたが書いたコンテンツを正しく理解してもううためには正しいHTMLを使ってあげる必要があるのです。
正しくページを理解してもらう意味
なぜGoogleに正しくページを理解してもらわなければならないかというと・・・
Googleが正しくあなたのページを理解できるほど評価が上がりやすいからです。
たとえばあなたが料理ブログを運営していてとても美味しい「焼きうどん」を作ってそのレシピをブログに載せたとします。
しかし、あなたがこの「焼きうどん」という料理名をうっかり紹介せずにレシピだけを頑張って説明をしてもこれがそもそもなんの料理のレシピなのかが伝わらりません。
もしかしたら見る人によっては「パスタ」に見えたり、「焼きそば」に見えたりするかもしれません。それではせっかくあなたが紹介した美味しい焼きうどんのレシピも「焼きうどんのレシピ」でGoogleから評価されないかもしれません。
SEOでよく使うタグ
では、実際にSEOに強いHTMLタグとは何でしょう？
すべてのタグを覚えておかなければならないかというとそんなことはありません。
100個以上あるHTMLをすべて覚えるのはしんどいですし、それだけでSEO対策のハードルが縛上がりしてしまいます。（僕もすべてのHTMLを覚えてはいません）
ここでは実際にSEOを意識したサイトコーディングを行っている私がSEOを意識する上でよく使っているHTMLを実際のコーディング例を用いてご紹介いたします。
- titleタグ（重要度：★★★★★）
- meta description属性（重要度：★★★★☆）
- hタグ（重要度：★★★★☆）
- imgタグ（重要度：★★★☆☆）
- headerタグ（重要度：★★★☆☆）
- mainタグ（重要度：★★★☆☆）
- sectionタグ（重要度：★★★☆☆）
- navタグ（重要度：★★★☆☆）
- pタグ（重要度：★★★☆☆）
- ulタグ（重要度：★★★☆☆）
- olタグ（重要度：★★☆☆☆）
Titleタグ
ページタイトルに使うHTMLです。ここで記載した文言が検索結果のタイトル画面に表示されます。
GoogleはこのTitleタグを見てこのページテーマを理解しようとします。
SEOにおいては超基本的なものになりますので覚えましょう。
<title>SEOを意識したコーディングで覚えておきたいHTMLタグの使い方 | oshikeblog</title>meta description属性
ページの概要を説明するタグです。タイトルよりも多く書くことができるのでタイトルで書ききれない内容をここで補填するイメージです。descriptionはGoogleの検索結果にも出る箇所なのでなるべくちゃんと書くこと。おすすめします。
<meta name="description" content="ページの概要を書く" />hタグ
hタグはページの見出しに使います。
h1〜h6まで使う事ができます。
h1はそのページの大見出しとして使い、h2〜h6は小見出しとして使います。
<h1>ページの大見出し</h1>
<h2>ページの小見出し</h2>imgタグ
画像を表示するためのタグです。SEOで重要な事はalt属性をしっかり入れてあげる事です。
<img src="example.png" alt="ここに画像の説明を書く">headerタグ
ページのヘッダーに使います。
<header>
ヘッダー
</header>mainタグ
ページのメインコンテンツに使うタグです。メインコンテンツとはヘッダー、フッター、サイドバーなどのサイト全体を通した共通項目以外のそのページ独自のコンテンツエリアの事を指します。
<main>
サイトのメインコンテンツ
</main>sectionタグ
メインコンテンツ内の各セクションに使うタグです。大体は見出しとセットで使うことが多いです。
<section>
セクション
</section>navタグ
グローバルナビやサイドメニューなどのナビゲーションに使います
<nav>
ナビゲーション
</nav>
pタグ
段落に使うタグです。よく特に意味もないような画像に対してpタグを使っているサイトを見ますが、意味がない画像を囲うときはdivが正しいです。
<p>文章</p>ulタグ
リストに使うタグです。箇条書きやグローバルナビなどそれぞれのコンテンツがリスト的な意味をもつものに使います。
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>olタグ
ulタグとよく似ていますがこちらはリストの並びに意味がある場合に使います。
たとえば、パンくずリストは「トップ ＞ 下層ページ」というように順番に意味がありますし、
「ご登録の流れ」なども順番に意味があるのでolタグを使います。
ulかolで迷ったら「リストの順番が変わってもいいか悪いか」で判断するといいでしょう。
<ol>
<li>番号付きリスト１</li>
<li>番号付きリスト２</li>
<li>番号付きリスト３</li>
</ol>テンプレートコード
上記のようなHTMLを使った全体的なコードは下記のようなものになります。
テンプレートとしてもお使いいただけます。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル文言を書く</title>
<meta name="description" content="ページの概要を書く" />
</head>
<body>
<header>
<nav>
<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>
</nav>
</header>
<main>
<h1>大見出し</h1>
<section>
<h2>中見出し</h2>
<img src="example.png" alt="画像の説明を書く">
<h3>小見出し</h3>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ol>
<li>番号付きリスト1</li>
<li>番号付きリスト2</li>
<li>番号付きリスト3</li>
</ol>
</section>
</main>
</body>
</html>以上がSEOで意識したHTMLの使い方でした。
正しいHTMLを使えばGoogleから正しい評価をもらいやすくなるので覚えておくといいでしょう。
