読者です 読者をやめる 読者になる 読者になる

私のフリーノート

本のレビューや気になることを自由に書き綴っているブログです。

はてなブログで見出しタグの使い方を間違えてたかも??

タイトルの通りですが、私は多分はてなブログで見出しタグの使い方を間違えていたような気がしてきました。


すでにご存じの方も多いかと思いますが、「見出しタグ」って何なのかといいますと・・・

見出しタグ(<h1>~<h6>タグ)は、文書に見出しをつけ、 文書構造をわかりやすく伝えるために使用するタグです。

ウェブブラウザで表示した際に見出しタグはテキストが大きくなり太字で表示され、閲覧者に見出しであることがわかりやすく表示されます。

また、検索エンジンに文書の構造がわかりやすく伝わるため、どの部分が特に重要なのかという点が理解してもらいやすくなります。

出典:見出しタグの使い方。hnタグ(h1~h6)を正しく使い階層構造をもたせよう | SEOのホワイトハットジャパン

whitehatseo.jp


↓例えば、こんな感じでh1とかh2とかのタグで囲むことによって、文字を見出しぽっく文字サイズを変更することができたり、検索エンジンに見出しだと認識させることができます。

----------------------------------------------------------------------
▼見出しタグの記述例
<h1>h1タグは最も上位の見出しです。</h1>
<h2>h2タグはh1の次に上位の見出しです。</h2>
----------------------------------------------------------------------


見出しタグは単に文字サイズを大きくしたり、太くしたりするためだけのものではなくて、検索エンジンに分かりやすく文書構造を伝えるために、正しく使わないとだめなんですね。

使い方が間違っているとSEO(エス・イー・オー)的にも、あまり影響がよろしくないようです。

検索エンジン最適化(けんさくエンジンさいてきか、英: Search Engine Optimization、SEO、サーチ・エンジン・オプティマイゼーション)はある特定の検索エンジンを対象として検索結果でより上位に現れるようにウェブページを書き換えること。または、その技術のこと。

出典:検索エンジン最適化 - Wikipedia


h1が一番上位の見出しなので、h1→h2→h3…って感じで順番に使うのが正しい使い方なので、例えば、h1を使わないでh2を使ったり、h1とh3を使ってh2を使わないのは間違いみたいです。

これまではh1はページに1つだけの使用、複数使ってはいけないというHTMLのルールがあったのですがHTML5のバージョンからは、1ページにh1タグを複数使ってもいいことになったそうです。

▼ただし、HTML5でh1を1ページに複数使う場合には注意点がありますので、詳しくはサイトなどでご確認下さい。

www.web-labo.jp


話がちょっとズレました。
話をはてなブログでの見出しの使い方に戻します。

実際にはてなブログで見出しタグを使う方法としては、以下の2パターンあります。(たぶん)


【方法1】はてなブログの管理画面の「みたまま」の編集モードの状態で、
文字を選択して、見出しの種類を選択する。

タグが苦手な人には分かりやすくて便利なのですが、ちょっと設定しづらいときもあります。うまく説明できないのですが、文字選択の仕方で設定できない時があるようです。
 

はてなブログのm見出しタグ

 
【方法2】はてなブログの管理画面の「HTML」の編集モードの状態で、直接h3タグで文字を囲む

f:id:freenotes:20150818215953g:plain

方法1でも方法2でも、同じ結果になります。
実際に私のブログでh3タグを使ってみますとどんな感じになるかといいますと・・・

↓こんな感じになります。

見出し3

ふつうの文字よりも文字サイズが大きくて、太いです。


【方法1】のやり方の通り「みたまま」の編集モードの状態で『大見出し』を選択すると選択した文字が<h3></h3>で囲まれます。


そして、ここで私は「おや??」と思ったのです。

 
なぜかというと私はずっとHTML編集で自分で勝手に見出しには<h2></h2>を使っていたからです。

なぜ<h2>を使ってきたかというと、なんとなく<h1>タグはすでに使われているだろから、なんとなく<h2>ぐらいでいいんじゃないの?という軽い考えでした。

そこで、実際にはてなブログのソースでHTMLの構造を確認してみました。
すると・・・以下のようになっていました。

h1:ブログ名
h2:ブログの説明

はてなブログのソース

 

つまり、はてなブログの設定の画面に入力した「ブログ名」と「ブログの説明」

はてなブログの設定画面

 
このブログ名(H1)とブログの説明(h2)は、自分のはてなブログのページ全部に入っているから記事では見出しはh3になるのだと思います。

h2は1ページに複数存在してもHTMLのルールとして間違いではないはずなので、記事にh2を書いても間違いではないかと思いますが・・・
なんだか知ってしまうと、少し気になりました。

私自身、HTMLにそんなに詳しいわけではありませんので、間違ってたら指摘いただけると幸いです(>_<)

結論

はてなブログの記事の見出しタグは、たぶん<h3>~使うのが正解。
(まちがえてたらごめんなさい)

最後にまとめ

最後までお読みいただき、ありがとうございました。
説明が下手すぎて、なんだかやたらと長くなってしまいましたが、結論は短かったですね^^;
見出しタグがSEOに関係あると書きましたが、最近ではSEOへの影響はどんどん少なくなってきているようなので、少々間違えてても、そんなに凄い影響はないかと思いますので、そんなに神経質にならなくてもいいかとは思います。(たぶん)
それ以上に記事の内容やブログ記事のタイトルなどの他の影響のほうが大きい気がします。
SEOを気にしている方だけ、少し見出しタグの使い方に気を付けてもいいのかな~と思いました。