見出しタグの使い方 失敗例と成功例から見る正しい使い分け

見出しタグの使い方 失敗例と成功例から見る正しい使い分け

見出しタグを使って記事の見出しを使うときに「ユーザーが見て分かりやすい見出しの構造にすること」がわたしは一番に大切なことだと思っています。

しかしユーザーが見やすい見出しにするだけでは、どれだけ素晴らしい記事を書いたとしてもSEO対策ができていないと検索してもらえない。

検索してもらうには、やはり検索結果の上位表示をできるようになることが大切です。

基本的な見出しの使い方を理解したはいいけど、実際に自分の記事で見出しを使っていると色んなパターンの見出しの使い方になる事があって悩むときがありました。

悩みながら見出しを使った結果、悪い見出しの使い方と良い見出しの使い方ができてる記事が出てきてしまう。

それならば見出しの基本的な使い方を覚えておいて、自分のサイトの見出しの使い方からヒントを得ようと思いました。

 

見出しとは

 

見出しとはHTMLのタグの一種で「heading」を略して「hタグ」とも表現します。

見出し(hタグ)を使うと文中の見出しの中の文字は太字で協調されるので長い文章に区切りをつける「段落」の役割にもなり記事をよみやすくすることができます。

そしてhタグで段落を使うときにはhタグ(大見出し)からh6(小見出し)へと見出しを階層構造にすることも出来るのですが、その場合にはhタグに番号をつけてh1、h2、h3、h4、h5、h6とすることで見出しの重要性を階層化して大見出し(h1)から順番に使う事ができます。

 

 

階層化された見出しタグはhtmlと実際の表示を同時に見ると分かりやすいのですが、hタグの開始タグと閉じタグの中に、その見出しで使用する文字を入れることで実際の記事の見出しを段落として表示させることが出来ます。

 

見出しの使い方の基本

 

まずは見出しの中で一番重要度の高い見出しのh1についてです。

h1タグはHTML5の場合、複数回使用しても良いのですが検索エンジンを考えたときに最重要となるh1タグが記事内にいくつもあるようでは一体どれを重要とすればいいのか分かりずらくなってしまいます。

h1はタイトルで一回使用するのがベストな使い方です。タイトルにはキーワードを使ってタイトル決めをするので、検索エンジンにはh1タグを使いタイトルを重要と判断してもらえるように使います。

 

h2からの使い方

h1をタイトルに使用したら記事内の最初の見出しはh2にします。

 

h2を飛ばしてh3から始めない。

 

記事内の見出しの使用でタイトルのh1以外を統一するならh2にします。これもh1、h3、h2などのように見出しの見出し順番を飛ばした使い分けは間違った使い方になります。

そして見出しタグを入れ子にすることでユーザーに分かりやすい記事の内容を把握してもらえるもう一つの利点はhタグが目次として使えるようにできること。

記事を実際に書いていてると色々な見出しの使い分けが必要になります。

そして色々な見出し使い分け方によって目次の見やすさ、分かりやすさに関係してきます。

見出しの使い方を悪い例良い例で比較して見ると、記事ごとに使いやすい柔軟な見出しの使い分けができる使い方ができるようになれると思います。

参考にこのサイトの記事で検索順位がかなり低い見出しと、検索上位に表示できてる記事の見出しを比較してみたいと思います。

 

悪い例の見出し

 

「WordPress SSL化(https)と301リダイレクト設定」という記事があります。

悪い見出しの例となったのは記事内での使い方でした。

 

 

WordPressを始めたばかりの初心者だったころの記事ですが上記画像のようにh2の見出しにペーパーボックスを使ってしまっています。

 

 

それとHTMLでは<div>タグの子要素でh2タグを使うのは入れ子ルールでは問題ないのか気になりましたが使用しても問題ないようです。

問題はないですが実際の表示で見たときに見出しが分かりずらくなっています。

そしてhタグで生成された目次で見た場合に見出しの順番は問題ないですがh1で使用してるタイトルに対して記事の内容が分かりずらい目次にしてしまってます。

ユーザビリティが低くて悪い見出しの使い方です。

 

修正後

そりゃそーだろという修正ですが、見出しとペーパボックスを分けて見出しを分かりやすくしました。

あまりこのような間違いをする人はいないと思いますが参考程度にしていただきたいです。

 

 

Advertisement

 

 

次は「エックスサーバー申し込み方法と登録手順」という記事です。

 

 

h1タグはタイトルに使用して記事内は全てh2タグを使った見出しの使い方です。

h2タグの使い方は問題ないですがキーワードを使いすぎてしまっていて目次を見るとキーワードを多く使ってる分だけしつこくなってます。

そしてキーワードを多く使った分だけ、見出し文も長くなるh2もあるのでユーザビリティが考えられていないと思います。

この記事の見出しをそのまま使って修正するとしたら以下のような見出しの使い方をするとどうでしょうか

 

 

h2だけでなくh2の下に階層を作りh3タグでh2に対しての細かい内容になるような見出しの使い方に修正しました。

そしてキーワードはh2タグに使用してh3タグのキーワードをなくしてユーザビリティを良くしました。

見出しだけで見れば修正前の見出しより良い見出しの使い方になったと思います。

次は見出しの使い方が良い例も見てみてください。

 

良い例の見出し

 

はじめにh2とh3を使い分けした見出しの使い方です。

「【HTML】headタグの場所を見つけて意味を理解する」という、このサイトの記事を例に見てみます。

 

 

検索上位に表示してる記事の見出しの使い方です。

見出しの順番はh1のタイトルに対してh2から始まりh2のことにh3タグで細かく説明できるような見出しの順番にしてます。

h2タグの見出しを2~3回使用することでh2タグではタイトルに対しての違う目線からの内容にして、h3はh2に対してより細かく説明が書けるようにする使い方が作りやすくなる見出しの使い方になると思います。

見出しを使って流れる読みやすさや、細かくなっていく記事作成が良い使い方と思います。

 

 

Advertisement

 

 

次はh2だけの見出しにした良い例の使い方の「アドセンス広告を目次の上(h2の上)に表示させる方法」という記事です。

 

 

タイトルの内容は1つでも見出し(h2)ごとに違う目線の内容になっていて、h3を使わないでh2だけを使うときは、どの内容もタイトルの次に重要と言える内容があるときの使い方ができます。

重要な悩み解決、疑問解決などの内容がすぐに分かる事ができる見出しの使い方と言えると思います。

 

見出しタグのSEO

 

見出しのSEO効果は直接的な効果はありませんが「hタグは検索エンジン」に「見出しは訪問者」に情報を伝えやすくなるので全く効果がないとはいえません。

検索エンジンはhタグの番号が小さい順で重要度を判断したり見出しに含まれるキーワードの判断もしてくれるので、キーワードを詰め込みすぎで不自然になったりしつこくなったりにならないように気を付けユーザーが知りたい情報や結論を先に書く事も大切です。

または見出しの使い方の良い例で紹介した見出しに使うキーワードに対して色々な目線からの内容にすることでユーザーが目次を見たとき今まで知らなかった情報が見つけられる可能性も高くなります。

hタグを上手に使うことで検索エンジンが簡単にページの理解ができるようになると、検索結果に表示されやすくなりSEO対策につながるんです。

そして見出しのh2は検索結果の表示のときに表示されるのでクリック率を上げられる可能性を高めます。

 

 

上記の画像のように検索結果の表示ではタイトルの下に説明文、そしてその下に記事内で使ってる見出しタイトルが表示されます。

タイトルにない検索ユーザーが気になる見出しがあれば訪問数を伸ばせる可能性があります。

 

正しい見出しの使い分け方で思ったこと

 

どうみても見出しの順番の使い方がおかしくなければ気にしすぎる必要がないと思えますし、現在の検索エンジンは見出しの使い方が間違ってることも理解できるのではないかと思います。⇐予想

意識するべきことはタイトルで使うh1タグの内容をh2やh3を使ってユーザビリティを意識した見出しの作り方だと思います。

h2からの見出しはキーワードを意識した使い過ぎはあまり効果的ではないと思えます。

見出しにキーワードを使う場合はSEO重視のキーワードより訪問者さんが見たときに理解しやすくするためのキーワードを使うイメージのほうが自然な見出しになると思ってます。

どちらに重点を置くかは人それぞれですが、わたしはSEOだけに左右されないユーザービリティの見やすさを重点に置こうと思います。

WordPressカテゴリの最新記事