h1タグと見出しタグ|SEO女子コラム

そろそろSEOの知識も深まったところですが、まだまだ最適化したいタグがたくさんあります。そこで今回はこんなタグに注目です。

第16回コラムテーマ「h1タグ(見出しタグ)について」

今回もSEOに関連があるタグになっているので、最適化はしたいところですよね。サイトの中でどのように使って行ったら良いのでしょうか?
それでは、コラムスタートです☆

見出しタグの使い方

担当者:つじさん

今回ご紹介するのは見出しタグと呼ばれるタグについてです。SEOにも関わりのあるタグですが、私は単純に見出しタグの設置方法と使い方を紹介しようと思います。

見出しタグとは?

ページの<body>内に書かれている文章に見出しをつけていくためのタグです。内容をおおまかに分類し、そこに書かれる文章を端的にまとめて付けて要点を伝えるためのタグとなります。
見出しタグは<h1>というような書き方をします。HTMLのバージョンによって細かな規定が変わりますが、HTML5以降では<h1>~<h6>までが見出しタグとして用意されています。

見出しタグを付けることのメリットは主に2つ。

  • 検索エンジンに「ここはこんなことが書いてあるよ」と要点を伝える
  • サイトを見るユーザーに見出しを伝える

基本的には本文に見出しを付けて、わかりやすくしよう!というのが見出しタグの役割です。長い文章を書く時は特に文章を見やすくまとめる為に使っておきたいタグとも言えます。

例えば下記のような文章をサイト内に入れるとします。
珈琲について

珈琲が好きなのでつい内容が…。と、話題については一旦置いておいて、今は短いので読めますが、これがもっと長かったらと思うと読む気がなくなっちゃいますよね。
ではこちらはどうでしょうか?
珈琲の説明2

これなら次の段落には何が書いてあるのかある程度把握しながら読むことが出来ますよね。一旦区切りも付くので読む分にも読みやすく感じるのでは無いでしょうか?

見出しタグを付けることでこういった読みやすさやわかりやすさを出すことも出来ます。

見出しタグの設置方法

見出しタグは<body>内で使用します。文字数の制限は特に決まっていませんが、長すぎては見出しの意味がありません。また、<h1>~<h6>まであるタグを重要度によって使い分ける必要があります。見出しタグは数字が小さければ小さいほど、より重要であると区別されます。h1タグは一番数字が小さいので、大見出しに当たるタグになります。
また、記述をする順番も決まっており、「h1→h2→h3→h4→h5→h6」の順番に使っていく必要があります。
順序さえしっかりと守っていれば、ページ内で何度使用しても構わない、というルールになっています。
順序について

上記のように、h3タグを使っていないのに、いきなりh4タグへ飛ぶことは出来ません。しかし、同じタグは何度でも使うことが出来ます。
ただし、一番数字が小さく重要であるh1に関してはのちほどおかもっさんに説明をしてもらいましょう。

見出しタグはその意味合いから、タグを使用したコンテンツの文字サイズなどが変わります。その部分の重要度に合わせて目立つようになっているんです。だからといって、文字サイズを変えるためだけに見出しタグを使用することはやめましょう。あくまでもコンテンツを分類して見出しを付けるために使いましょう。

デザイン上、文字サイズが大きくなってしまっては困る!といった場合はCSSなどを使って上手く調整と変更をしてあげて下さい。

h1タグのSEO的見解

担当者:おかもっさん

辻さんに解説していただいたようにh1は大見出しのタグで、同時にSEO的にも大切なタグとなっています。
私はh1タグのSEO効果などの調査結果と見解を書いていきたいと思います!

SEO対策に効果的な記述は?

まずh1タグはそのページの重要なキーワードやテーマを検索エンジンに伝えることが出来ます。
なのでページに設置することでSEO効果を高めることは可能だそう。
ただ、むやみに対策したいキーワードを盛り込み過ぎたり、記述が長くなりすぎてしまうとページのレイアウトが崩れる可能性があるので注意です!
h1タグに記述する文字数ですが、基本は150文字以内で記述するのがいいとのこと。
100文字以上のh1タグにSEOの効果があるのかといわれると、無いことはないそうなんですが、h1の役割である大見出しとしての認識がされづらくなる可能性があります。
Googleはページのテーマ性やコンテンツを重視している傾向にあるので、ページのテーマが伝わりにくいのは良くありません。
それ以前に大見出しなのに色々書きすぎて長くなっていたらページを訪問した人にも伝わりませんよね。
ページの訪問者や、SEO対策を考慮した上でh1タグを記述するなら以前お話したタイトルタグと同じく、キーワードを厳選して簡潔な内容にした方が良いのでしょう。

タイトルタグと同じように簡潔な内容で…と言いましたが、よくサイトの設定でh1タグとタイトルタグの内容が同じになっていることがあります。
このタイトルタグとh1タグの内容が一緒なこと自体は特に問題はありません。
ただ、タイトルタグとh1タグで表示される場所が異なるということは理解しておきましょう。
タイトルタグは検索エンジン上に、h1タグはページ内に表示されます。
h1タグは検索エンジンに設置しているタイトルタグと同じ内容にするよりも、各ページのテーマに合った内容を記述することでユーザーからの評価も上がります。
検索エンジンの為のタイトルタグと、ユーザーの為のh1タグと認識した上でh1タグの内容を考えましょう。

画像にh1タグを設定している場合

サイトのレイアウト上、文章でh1を記述することが難しい…という方には画像へh1タグを設定する方法があります。
もちろんテキストの方がh1としては適しているとは思いますが、レイアウトの問題なら仕方がありません。
その時に、画像のaltタグを記述することで、その記述内容をh1の内容とすることが出来ます。そのため、ロゴなどをh1にする時はaltタグで記述した方が良いでしょう。
テキストの背景に画像を置き、テキスト自体をCSSで隠すと言った手法も取られていましたが、あまりおすすめしません。
なぜCSSよりもaltタグが良いのかというと、CSSだと「隠しテキスト」となる可能性があるからです。
CSSでの記述(主にtext-indent: -9999px;の手法が多いです。)にするとサイトには表示されませんが検索エンジンには認識されます。
このため隠しテキスト=スパム(不正行為)として扱われるかもしれません。
altタグですとユーザーも検索エンジンも認識出来る記述ですのでスパムにはなりません。
もしh1の画像へテキストを設定するならaltタグでの記述が安心です。

複数設置した時のSEO効果

大見出しのh1タグは1個だけにしないといけないのでは?と思うかもしれませんが、実際は複数設置をしても大丈夫!とも言われています。
ただ10個や20個も設置してしまうとSEOの効果が薄れるそうです。
h1タグを沢山設置しすぎることで検索エンジンのh1タグ=大見出しという認識が薄れてしまい、最終的に検索エンジンはh1を無視してしまいます。
このため、h1タグはできるだけ少なめか、1つに絞るのがいいと考えられます。

SEOだけでなく、文章を書く上でも見出しは大切です。わかりやすい文章を目指したいものですね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.