SEO効果の高いHTML・マークアップ方法【2019 最新版】

今回は、SEO効果を上げるための正しいHTML・マークアップについて記事にまとめます。

HTMLを正しく書いてSEO効果を高めよう！

SEOガイドラインにもあるように、HTMLの記述やマークアップは正しく行うことが重要視されています。

正しくHTMLが書かかれていれば、クローラーにサイト内のどの部分が重要なのかを伝えることができ、SEO的に有利なページとなります。
正しいHTMLの書き方を考えて、しっかりタグを見直して構成を組むことをマークアップといいます。

Googleのクローラーは、HTML（ソース）を読んでサイトを評価するのです。
Webサイトはユーザー（人間）に見てもらうために作るものですが、SEO的にはGoogleに正しく情報を伝える必要もあります。

Googleのクローラーは瞬時にサイト内の情報を読み解きます。

• SEOキーワードに沿ってユーザーメリットの高い内容が書かれているか
• SEOキーワードに関連する共起語がきちんと含まれているか
• オリジナルテキストが豊富に入っているか

等の情報を文章から読み解くことはできますが、人間が見ているような目で「デザインがカッコイイな～」とか「面白い文章だな～」といった見方はしません。

例えば、まったく同じレベルのライバルサイトがあったとしましょう。
同じくらいのコンテンツ評価、同じくらいのサイト速度、同じくらいのインデックス数･･･
その時、検索順位の勝敗を分ける要因の一つとして、クローラーがサイト巡回しやすい綺麗なHTML・マークアップがものを言うというわけです。

といっても、SEO的な面から私の正直な見解を言うと、ハッキリ言って多少は間違えていても影響は少ないです。
何と言っても一番重要なのは結局、コンテンツの中身（文章のオリジナル性やユーザーニーズに応えられる内容になっていること）なんですよね…。

だからといってHTMLをテキトーに書いていいわけではないし、マークアップもしっかり行うのがSEO対策というものです。

ですので、SEO効果を高めよう！なんて見出しに書きましたが、正しく書くことはSEOの基礎をしっかり作っておく、という認識でいると良いでしょう。

それでは、細かい話になってきますがHTMLマークアップについて解説していきます。

TITLE

Titleタグは、SEO上、最も重要なタグです。
Titleタグを変更してFetch as Googleを掛けただけで、ほんの数分のうちに検索順位の変動が起こるほど重要なものです。
基本的には、Titleタグの左詰めでSEOキーワードを配置すると良いでしょう。

例えば、「SEO 検索上位」で1位を目指したい！という場合

 <title>最新のテクニック！Googleの検索上位を狙うためのSEO対策方法 | サイト名</title>

こんな風に「最新」とか「テクニック」とか「Google」とか、無駄なキーワードを入れすぎるとSEOキーワードがぶれてしまい、Googleにどのキーワードがメインなのか伝わりにくくなってしまいます。
また、メインのキーワードがtitleタグの後半に配置されているので、これもGoogleから見ると重要性が低いと判断されてしまいます。

もっとシンプルに！

 <title>SEO検索上位を狙うための３つの法則 | サイト名</title>

といったように、できるだけ左側にSEOで狙いたいキーワードを配置して、無駄なキーワードはなるべく削りましょう。

ただし、「2018年・最新版！」とか「完全保存版」とか「必読！」といったキーワードは、ユーザーの目を引くのでクリック率（CTR）を高める効果が期待できますので、その辺も考慮して取捨選択すると良いでしょう。

H1

記事の中で一番大きな見出しとなるH1タグは、Titleタグの次に重要です。
HTML5のルールではsection・articleを正しく区切れば1ページ内に何度でも使用して良いとされています。
しかし！ 私の経験則からSEO的には1ページにつき1回を推奨します。なぜなら1ページ内に複数のテーマで記事を書くことは稀である上に、SEOキーワードがぶれてしまうためです。
また、テーマが複数あると記事の文字数も大量に必要になってしまうので、ユーザーにとっても読みにくくなるといった弊害も起きてしまうことでしょう。
諸々の理由から、1ページにH1は1回だけ！というルールになります。

また、よくクライアントから「TitleタグとH1は同じでいいの？変えたほうがいいの？」といった質問を受けることがありますが、私は個人的にどちらでも良いと判断しています。
変える場合にはTitleで書いた内容と意味が異なるものにならないように気を付けましょう。

例えば･･･
Titleが「SEO対策の簡単なやり方について」だったとしたら
H1は「SEO対策は簡単にできるんです！」といった具合に、同じ意味となるようにしてください。

Titleは、ページ全体を通してどういう内容が書かれているかを示すもので
Hタグは、ページ内の各セクションごとに内容を分けてあげるための見出しです。

H2以下

H2以下は、H3,H4,H5,h6～と無数にありますが、私の経験則ではH2～H4までとしています。
これはサイト全体（サイドバーやフッターのメニュー名なども含め）でH4までと決めています。
Hタグは、クローラーに示すページ内の重要度の順番と言っても過言ではないです。
また、素人がやりがちなのが、H2を使わずにいきなりH3を入れたり、階層が正しくないHタグ構成です。
ユーザーの読みやすさも考えて、しっかり分かりやすい階層で示してあげると良いでしょう。

<h1>大見出し</h1>
　<h2>中見出し</h2>
　<h2>中見出し</h2>
　　<h3>小見出し</h3>
　　<h3>小見出し</h3>
　　　<h4>小小見出し</h4>
　　　<h4>小小見出し</h4>
　<h2>中見出し</h2>
　　<h3>小見出し</h3>
　　　<h4>小小見出し</h4>
　　　<h4>小小見出し</h4>

↑こんな感じが理想のHタグ構成です。

<h1>大見出し</h1>
　　<h3>小見出し</h3>
　<h2>中見出し</h2>
　　<h3>小見出し</h3>
　<h2>中見出し</h2>
　　　<h4>小小見出し</h4>

↑こんな風にHタグの順番を飛ばして使用するのは間違いです。

STRONG

strongタグは、けっこうSEO効果が高いです。
文章中のSEOキーワードに使用してください。
よくやりがちなのが、文章の一行まるまるstrongタグを入れてしまうケースです。

 <strong>私は昔からSEO対策が大好きなので色々な実践をしています。</strong>

 私は昔から<strong>SEO対策</strong>が大好きなので色々な実践をしています。

私はこのように、SEOキーワードとなる単語の部分だけにstrongタグを入れるようにしています。
そもそもstrongタグは「強調」の意味を持たせる時に使うタグなので、SEO的な視点で見ればGoogleに重要なキーワードを示す役割があると言えます。
そのため、文章一行をまるまるstrongタグを当ててしまうと、SEOキーワードが分散してしまいます。
※文章一行を目立たせたい時は、CSSで太字にするかboldタグを使いましょう。

ちなみに
私の場合、Strongタグは１ページ内に１～３ヵ所と決めています。
使う箇所については、狙いたいキーワード「SEO対策」←こればっかりに使ってしまうと不自然ですので、最初のStrongタグは狙いたいキーワードに１回。
2個目以降は関連性のあるキーワードにStrongタグを割り振ってあげています。

WordPressの人は要注意

WordPressで記事を書いてる人は、テキストモードの時に出てくる「ｂ」のボタンがstrongタグになっているので、装飾としてこのボタンを使っている人は注意してください。
※strongタグを多用するとSEOスパム扱いを受けることがあるので要注意！

B

「bold」という太字に装飾するためのHTMLタグで、文章の中で強調したい箇所に使います。

文字の強調や装飾を目的としたタグは色々ありますが、それぞれに用途が決まっており、SEO的なパワーとしては以下のような構図と考えられます。

私は今まで、最重要なSEOキーワードに３つまでStrongタグを付け
SEOに関係のない文字を強調したい時にはBを使うようにしていました。

しかし！ 昨今、Bタグも多用しすぎるのはダメという風潮があります。
実際に競合サイトと比較してみると、あまりBタグを多く使っていないサイトが上位に来ていることからも、多用しすぎないようにしたほうが良さそうです。

それでも「SEOキーワードじゃないけど、どうしても太字にしたい箇所が多くある…」という時は、Ｂではなく「span」を使ってCSSで装飾するようにしましょう。

Strongの項でも説明しましたが、Wordpressのビジュアルエディターにある「B」のボタンは、boldではなくStrongになってしまうので注意しましょう。

ALT

ALTタグは、画像につける代替テキストのことです。
フロント側には表示されない文字ですが、マークアップとして付与しておくことが必要です。

<img src="画像のURL" alt="画像の名前">

そもそもALTタグは目が不自由な方などのために、音声読み上げツールでサイトのコンテンツ内の画像がどういう画像なのかを読み上げるために入れておくテキストなので、必ず入れておくことが必要になります。
また、画像のリンク切れなどで表示されなかった際にも文字としてALTが表示されるようになっているためです。

W3Cの規格でもALTタグを入れておくことが推奨されているのですが、何でもかんでもALTに文字を入れなきゃいけないってワケではないです。
矢印や意味を持たない画像には、[alt=””]このように空ALTといって “” だけでも良いので入れておきましょう。
画像のALTテキストは、Googleの画像検索にもヒットするテキストになりますので、画像SEOの観点からも重要なタグです。

A

aタグは、アンカー・リンクと呼ばれるものです。

<a href="リンク先のURL">SEO効果に関する詳しい記事はこちら</a>

このように、リンク先URLを入れたaタグの間に、SEOキーワードを上手く入れてリンク設置してあげることで、リンク先に対してSEO上のリンクジュースを送ることができます。
また、外部リンクで相手先にリンクジュースを送りたくない場合には･･･

<a href="リンク先のURL" rel="nofollow">SEO効果に関する詳しい記事はこちら</a>

といったように[rel=”nofollow”]を入れてリンク設置するという方法がありますが、最近では「関連性のある有意義なサイトへのリンク」である場合には、あえてnofollowは付けずにリンク設置してあげることが良いとされています。
理由としては、Googleが見た時に「このサイトは、ちゃんとユーザーのメリットを考えたリンク先を設置している」と判断してくれるため、わざわざnofollowを付けてリンクジュースを抑えたりしなくても、きちんと評価してくれるというものです。
私も最近はこの説を有力視しているので、あえて外部サイトを紹介する時にnofollowを付けたりせずに普通にリンク設置しています。

UL

ULタグは、リストタグと呼ばれるタグの一つです。
順番を付ける必要のない項目を書く時に使用してください。

<ul>
<li>ペンギンは可愛いから好き</li>
<li>ネコは爪が怖いから嫌い</li>
<li>犬は忠誠心が強すぎるから嫌い</li>
</ul>

• ペンギンは可愛いから好き
• ネコは爪が怖いから嫌い
• 犬は忠誠心が強すぎるから嫌い

といった具合に、順番が決まってないリストに使います。

素人や、面倒臭がりの人は･･･

・ペンギンは可愛いから好き
・ネコは爪が怖いから嫌い
・犬は忠誠心が強すぎるから嫌い

こんなふうに「・」だけ入れてリスト風の書き方をやりがちですね。
SEO的にこれが悪いということはありませんが、正しくULタグを使用したほうがクローラーに好まれます。

OL

OLタグは、順番が付いているリストタグになります。
順番が決まっている項目を書く時に使用してください。

<ol>
<li>新垣結衣</li>
<li>有村架純</li>
<li>石原さとみ</li>
</ol>

1. 新垣結衣
2. 有村架純
3. 石原さとみ

ちなみにこれは、私が可愛いと思う女優さんの格付けリストでした。
このように順番を付ける時はOLタグを使用してクローラーに好まれるようにしましょう。

DL

DLタグは、定義リストといって定義づけを行う時に使うリストタグです。
リストの見出しと本文という構成ができるので、そのように表現したい時に有効です。

<dl>
<dt>眉毛</dt>
<dd>眼球の上にある毛で、涙や汗が眼球に入るのを防ぐ役割があります。</dd>
<dt>毛髪</dt>
<dd>頭に生えている毛で、年齢を重ねると薄くなったりすることがあります。</dd>
<dt>陰毛</dt>
<dd>陰部の周辺に生える毛で、思春期の頃に生え始めるカッコイイ毛です。</dd>
</dl>

眉毛

眼球の上にある毛で、涙や汗が眼球に入るのを防ぐ役割があります。

毛髪

頭に生えている毛で、年齢を重ねると薄くなったりすることがあります。

陰毛

陰部の周辺に生える毛で、思春期の頃に生え始めるカッコイイ毛です。

これも上手に使うことでクローラに好まれるHTMLとなります。

リストタグのデザインは、UL・OL・DL共にデフォルトだと味気ないので、スタイルシート（CSS）で個性を出すと良いでしょう。

TABLE

tableタグは、表を作る時に使うタグです。
SEO的な視点から見ても、Googleはデータが好きですね。ちゃんとした研究機関とか厚生労働省とかのデータなら尚良しという感じです。

<table>
	<tr>
		<th>食品成分比較</th>
		<th>カルシウム</th>
		<th>脂質</th>
		<th>鉄</th>
	</tr>
	<tr>
		<th>普通牛乳</th>
		<td>220mg</td>
		<td>7.6g</td>
		<td>0mg</td>
	</tr>
	<tr>
		<th>加工乳・低脂肪</th>
		<td>260mg</td>
		<td>2g</td>
		<td>0.2mg</td>
	</tr>
	<tr>
		<th>豆乳</th>
		<td>30mg</td>
		<td>4g</td>
		<td>2.4mg</td>
	</tr>
</table>

テーブルの組み方として[thead]を用いる場合もありますが、使っても使わなくてもSEO的にはどちらも同じです。

もちろん自分で調査してまとめたデータでも、とにかく参考となる資料として数値を示すのはSEO効果が高いです。
テキストだけで表記しても問題はないのですが、tableタグを組んで綺麗に構成してあげるとGoogleに伝わりやすくなるので、tableタグもしっかりと活用してSEO効果を高めましょう。

BLOCKQUOTE

blockquoteは、他のサイトから文章を引用する時に使います。
具体的には以下のような使い方をします。

<blockquote cite="引用元のページURL">
<p>引用する文章、引用する文章、引用する文章、引用する文章、引用する文章。</p>
<footer>引用元：<cite><a href="引用元のページURL">引用元のページ名</a></cite></footer>
</blockquote>

このタグを使わずに引用してしまうと、他サイトからのミラーコンテンツとなりますので、自分のサイト評価を下げてしまう可能性があります。
また、他サイトに書かれている文章であることを明記するタグになるため、このタグの中に書かれた文章は自分のサイトでのSEO価値として扱われることはないと考えておきましょう。

meta description

descriptionは、headタグの中に記入するページの説明文を意味するMETA情報テキストです。
色々なSEO関連のブログで「descriptionはSEO効果が少ない」と言われていますが、私はそんなことはないと思います。

このように、黒文字の部分がdescriptionに当たる文章になります。
タイトルの青い文字が目立ちますが、意外とdescriptionの文字も読まれているので、しっかりと分かりやすく書いてあげると「中身を読んでみよう」と思わせるキッカケになるので、ユーザーが押したくなるような文章を書いてあげるとクリック率（CTR）が上がります。

この、検索結果上でのクリック率は、Googleが公式に発表してるわけではないけど、私はSEO順位に関係性が深いと考えています。いわゆるトラフィックSEOというやつですね。
よくクリックされるページ、見られているページは、SEO的にも需要が高いとGoogleが判定しているのではないか？という考え方です。

文字数は、パソコンで125文字、モバイルで75文字まで表示され、超過した文字は「…」という三点リーダーで略されてしまうので、綺麗に収まるように書くのは難しいですね。
私の場合は「…」で切れてもどんな内容が書かれているか分かりやすくするために、前半に重要なことを書くようにしています。

まとめ

以上がSEO的に重要と思われるHTTMLタグのマークアップでした。
すべて私の経験則に基づいて導き出したSEO対策のためのマークアップなので、これが絶対！というわけではありません。
Googleのアルゴリズムは日々進化しているので、今後このページで紹介している内容を修正していくこともあると思います。
ですので、あくまで一つの例としてご認識ください。