これでもう迷わない!SEOのためのhタグの使い方

Webデザイン

こんにちは!
みなさん、SEO改善にはhタグの使い方も大切なのはご存知ですか?
今回はhタグとは何なのか、という基本的なところから、SEO改善のための正しい使い方までを徹底解説します。
「それくらい知ってるよ!」なんて人にもきっと眼から鱗な内容になってますので、是非とも最後までお読みくださいね。

hタグとは?


hタグとは、ページ内で見出しを表す部分に使うタグのことです。
h1からh6まであり、数字が小さいものほど大きな見出しであることを表します。

hタグを使うメリット


hタグを使うメリットは、訪問者や検索エンジンに対して内容の理解を助け、特に訪問者に対しては「自分が求める情報がそのページにあるのか、あるのならどの位置にあるのか」を把握しやすくできることです。
以下の例をご覧いただければ一目瞭然、見出しがあるとそれをざっと見るだけで記事の内容がざっくりと予想できます。

hタグはあくまで見出しであり装飾目的ではない


通常、pタグなどに比べ大きな文字であり、加えて装飾されている場合もあることから、Web製作者の初学者や、詳しくない方は見た目、装飾を重視して使い分けてしまう人もいるようですが、hタグはあくまで見出しとして機能するべきものです。
後に続く本文の内容を端的に表し、しっかりと階層構造を意識してh2の次にいきなりh4が来たりすることが無いよう記述しないといけません。

SEOとは?


hタグの基本を理解できたなら、続いてSEOとは何か?を理解しましょう。

SEO=訪問者に役立つページを作ること


SEOとはなんたるや、というのを細かく説明するとそれだけで一つの記事になってしまいそうなのですが、簡単に言えば「いかに訪問者の役に立つページを作るか」ということを意識するべきです。
なぜなら、「訪問者にとって役立つページにアクセスしやすい(=上位に表示される)検索エンジン」こそが優れた検索エンジンであり、Googleなどが目指す検索エンジンだからです。
具体的には、

  • コンテンツの内容にオリジナリティを持たせしっかり作り込む
  • 訪問者が求めている情報にアクセスしやすい構造にする

といったことが大切になります。
余談ですが、検索エンジンの中で圧倒的シェアを占めるのはGoogle Cheomeであり、加えてYahoo!もGoogle Cromeと同じアルゴリズムを使っているのでSEO=Google Chromeで上位表示されるようにすることと言えます。

間違ったSEOとは?


SEOの一例として、よく言われる以下のようなものが挙げられます。

  • titleタグやdescriptionタグ、記事本文にキーワードを上手く盛り込む
  • 被リンクを獲得する

これらは筆者が思うにも意味のある施作ですが、それが「訪問者にとって役立つページを作る」ことに反しないことが大前提です。
上記二つを意識するあまりに、必要以上にキーワードを羅列したり、不自然な被リンクを増やしてしまってはむしろ逆効果。
最悪の場合、スパム扱いされてしまいます。
また、Googleは検索エンジン最適化(SEO)スターター ガイドというページを公開しており、その内容も十分に参考にすべきものですが、決して「何を以って良質なページと判断するか」の基準を公にするものではありません。
つまり、SEOに明確な答えや正しいと言い切れるものはなく、その都度ユーザビリティを考えて自分で判断するしかないのです。
判断に困った場合は、「訪問者にとって良いページになるのか」を基準にすればよいでしょう。
逆に言えば、「訪問者にとって良いページにならない」ような施策は間違ったSEOと言えます。

SEOの観点から見たhタグの使い方


さて、hタグとSEOの基本が理解できたら、それらを踏まえた上でhタグをどう使うべきか、見ていきましょう。

階層構造を意識する


先ほども述べたように、hタグは重要度の高いものから順に記述し、階層構造を持たせることが重要です。
これによって、訪問者はもちろんクローラー(検索エンジンがページの内容を判断するために各ページを巡回させるもの)も内容を把握しやすくなります。
この記事を例に挙げて、hタグのみを抜粋すると以下のようになっています。

このような綺麗な階層構造を持たせられていなければ、内容の把握がしにくく、かつ訪問者は自分が欲しい情報がどの位置にあるのかを一見するだけでは把握しづらいものとなってしまいます。

hタグの内容は簡潔に


hタグは、その後に続く本文の内容を簡潔に表す内容であるべきです。
hタグに長々と、本文と区別がつかないような内容を記述してしまうとそれはもはや見出しではなくなり、訪問者にとっては必要とする情報へアクセスしにくくなってしまいます。
例えば、この記事のこのセクションを例に挙げると、「hタグの内容は簡潔に」という見出しを見るだけで「hタグの内容は簡潔にするべきということと、その理由が書いてあるんだろうな」と判断できますが、「hタグは、その後に続く本文の内容を簡潔に表す内容であるべきです。hタグに長々と…」というような長文を書いてしまうとその文を全て読み終えるまで内容が何か予想することが難しくなります。
具体的には、本文よりも大きな文字サイズでも一行に収まり、かつ内容を表すキーワードが適切に盛り込まれているようにしましょう。

h1タグは基本的に1ページに1つまで


SEOの観点からhタグについて述べる時、多く言われるのがh1タグは1ページに1つまで、ということ。
これは、ルール上そういった決まりがあると捉えている人もいますが、そういう訳ではなく、h1タグ(=一番大きな見出し)はページ全体の内容を簡潔に表す見出しであることから、訪問者にとって理解しやすい構造にしようとすると自ずと1ページに1つになる、というわけです。
逆に言えば、h1タグを複数配置した方が訪問者にとって分かりやすいページになる、という場合があればそうすべきです。
ただそのようなケースは珍しいためh1タグは1つまでが良いとされようになり、加えて言うと、titleタグもそのページ全体の内容を端的に表しているべきという点でh1タグと同じなので、この2つの内容は同じになることが望ましいです。

h1タグ内に画像を配置するには


例えばホームページのトップページで、どこにh1タグを配置すべきかを考えてみます。
記事ページであれば、その記事のタイトルにh1タグをあてるべきであることがほとんどですが、トップページであればそのホームページ名にh1をあてるべきであることが多いでしょう。
ですが、もしホームページ名をロゴ画像で表すとしたら?
中にはh1タグに文字データとしてホームページ名を入れ、それを訪問者には見えないようにCSSで調整する、といったことをしているホームページもありますが、正しくはh1タグ内にロゴ画像を入れ、altを設定してそこにホームページ名を入れるべきです。
ただし、この時にaltには画像の内容を正しくテキスト入力するのが望ましく、訪問者に見えないのを良いことにキーワードを羅列するというのは望ましくありません。

まとめ


いかがだったでしょうか。
ここまでお読み頂ければ、hタグの役割やメリット、SEOを考えた時の使い方までご理解いただけたことかと思います。
加えて、訪問者にとって価値のある良いページを作ることこそがSEOに繋がるという大前提をしっかりご理解いただき、より良いコンテンツ制作に繋がりますと嬉しく思います。