ホームページやブログを作ってみようとお考えの方が、最初に「SEO対策」として取り掛かるのがこの「見出しタグ(hタグ)」です。
htmlタグの文章におけるSEO上大事な要素「見出しタグ(h1,h2,h3,h4,h5,h6)」の使い方について
使い方自体については、特に難しいことはありません。
が、このページをご覧の方には小手先だけでなく、htmlの構造から見出しタグの使い方を理解していただきたいのです。
(もちろん、答えだけが知りたいという方のため、見出しに解答を記載しています。答えだけ知りたい方は、そこだけ読んでご自身のHPやブログの改修を進めてください。)
セマンティックWebに準拠したHTML5の基本構造と間違いやすいポイント
見出しタグ(hタグ)のSEO対策。それは「h○を数字の順番に使う」こと！それだけ！
ね？簡単でしょ？ ただ、これだけで終わらないのが見出しタグ。
SEO的に最大限の効果を発揮させるためには、以下の特徴を覚えておきましょう。
見出しタグ(h○)は「○の数字が小さいほど大事な情報」と検索エンジンに認識される
検索エンジンは、我々の作るサイトやブログの内容をどう判断しているか。それは、htmlコードでしか判別する術がありません。
htmlの強調タグ(bold,strong,em,i)の意味とSEO効果について、太字にするならどれが良いか考える
そして、検索エンジンがhtmlコードで特に重要と判断するタグが「見出しタグ(hタグ)」に当たるという訳です。
検索エンジンが、各見出しタグの重要性をどのように判断しているか。
それが、h○の数字の部分に当たり、数字が小さいほど重要な情報であると検索エンジンは認識します。
そのため、私たちもそのルールに沿ってhtml構造を整える必要があるのです。
見出しタグ(hタグ)には「ユーザーのことを考えて」キーワードを入れるべき
よく、SEO対策のために見出しタグには上位表示を狙っているキーワードを入れておきましょう、と言って紹介しているサイトが多いです。
しかし、これは全くの誤りと言っていいです。
本当は「ユーザーが見やすく感じる見出しだから」検索エンジンに評価が伝わり、SEO効果も強まる
実例を出しましょう。
①ロレックス 時計 スイスの高級時計 付加価値
②ロレックスの時計はなぜ付加価値が高いのか。スイスの高級時計の秘密に迫る
①と②どちらを読みたいと感じましたか？
どちらも狙っているキーワードは同じですが、全く違った印象を与えることが良く分かると思います。
HTML5におけるtitleタグでSEO効果を高めるための使い方・文字数・キーワード数まとめ
これまでは見出しタグにキーワードを詰め込みまくるSEOが流行っていましたが、今のgoogleの検索エンジンは非常に高度な物になっており、欺くことはできません。
だって、Googleって最高峰のエンジニアが集まる集団ですよ？僕の浅はかな知識では到底欺けません。
(僕はやりませんが、h1タグにscriptタグを入れ、ユーザーには通常のタイトルを表示させるようにしつつ、クローラーには関連キーワードを山ほど表示することも可能ですが、恐らくGoogleは対策しているでしょうね。)
↑これをやってペナルティーを受けても責任は取れません。
※ちなみに、画像タグ(<img>)を見出しタグにただ入れるだけにしてしまうのは、SEO的に問題ありです。
検索エンジンは画像から情報を読み取ることは現状不完全にしかできていません。
alt属性は視覚障害者のための音声読み上げに使われるテキストであり、imgタグを見出しタグに入れる場合は検索エンジンに読み取ってもらえる唯一の文字列になります。
もし画像をhタグに入れている場合は、早急にテキストに置き換えるか「alt属性」を付けるべきです。
SEO的に正しくimgタグでWebページに画像ファイルを置く(HTML5)
見出しタグ(hタグ)は数字の順に使おう(巻き戻しはNG)
物事に順序があるように、検索エンジンも順序だった見出しタグ(hタグ)の存在するサイトを綺麗なコードで書かれたサイトと判断します。
見出しタグのみに限って言えば、階層構造を意識して順番通りに作るといいでしょう。
大見出し(h1タグ)
中見出し(h2タグ)
小見出し(h3タグ以降)
ということは、見出しが細かすぎて大変なことになるのでは？とお考えの方、鋭いですね！ 次の項で説明します。
h1タグはページに付き1つのみ。各ページでユニークにする必要がある(基本タイトルを入れる)
上記でhタグは数字の順番に書いていく必要があると書きました。
しかし、Googleの現状のhタグ認識のルールから言うと、h1タグは同じページ内で複数指定すべきではなく、主にタイトルを入れているのが主流です。
(見出しタグの挿入はテキストを考える必要があるため、意外と工数がかかります。企業内だと。個人で運営する分には、タイトルとは異なったユニークなh1タグを設定するのもありです。)
h1タグについては1つで大丈夫ですが、その他の見出しタグ(h2~h6)は何度用いても問題はありません。
そのため、コンテンツの階層構造に当てはめてh4からh2に続くことは問題ないのです。(詳細を知りたい方は最後までお読みください。)
見出しタグ(hタグ)はデザインのために利用するのではない！htmlの構造のために設置するタグである
最後に、見出しタグ(hタグ)の利用方法について書いておきます。
未だに見出しタグをデザインのために利用しようと考えている人がいるようですが、全くの間違いです。
デザインなんて、自分で<span>タグでも置いてcssで調整すればいくらでも可能なんですから。
きちんとしたhtml構造であることを検索エンジンに認識させるために設置するタグだということを、忘れないでください。
htmlで下線を引くのにuタグはNG！spanタグかCSSで「text-decoration: underline;」で指定しよう
見出しタグ(hタグ)をhtmlの構造から考える
<!DOCTYPE html>
<html>
<head>
<title>ここにタイトルを入れよう</title>
</head>
<body>
<h1>ここにタイトルを入れよう(<title>の中身と同じでいい)</h1>
<h2>大見出しを入れる</h2>
<p>ここに文章を挿入</p>
<h2>二個目の大見出しを入れる</h2>
<p>ここに文章を挿入</p>
<h3>中見出し1</h3>
<h3>中見出し2</h3>
<h4>小見出し</h4>
<h2>以下同様に続ける</h2>
</body>
</html>
一般的なhtmlの構造は上記のようになっています。
見出しタグがページの構成を決める結構な要因になっていることがお分かりでしょうか？(h2以降のタグは繰り返しても大丈夫なのもお分かり頂けたかと思います。)
見出しタグ以外に用いられるhtmlタグは、数えるくらいしか種類がありません。
上記コードを検索エンジンがクロールすると、重要性の高い情報がどこに記載されているのかが分かりやすいのです。
見やすい綺麗なコードになっていることが、イコールSEO対策にも繋がるということを覚えておきましょう。
