はてなブログの見出しタグを普段から意識していますか？
実は、はてなブログの『見たまま編集』には見出しのhtml構造が不適切という欠点があります。
これは、何も考えずに『見たまま編集』で記事を書き続けると、html構造が不適切となりGoogleなどから低い評価を受けることを意味しています。
逆に言えば、記事のhtml構造を正すことで正しい評価が受けられるとも言えます。
つまり、見出しタグを改善するだけで、記事の検索順位が上がり、ユーザーに記事を読んでもらえる機会が増える可能性が上がるということです。
本記事の対象者
- はてなブログの『見たまま編集』を何気なく使っている方
- ブログのGoogle検索順位を上げたい方
本記事では『はてなブログの見出しのhtml構造を正しくする方法』を紹介します。
ちなみに、初心者でも簡単にできるので難しく考えなくて大丈夫ですよ。
html構造とは？
まず最初にhtml構造について簡単に説明します。
html構造と聞くと難しく思えるかもしれませんが、そこまで難しく考える必要はありません。
『記事のどの部分が何の役割を持っているのか？を表す記号』と思っておけば大丈夫です。
一度、はてなブログの記事編集ページで『HTML編集』を見てみましょう。
すると、記事の文章がタグと呼ばれる<〇></〇>という記号で挟まれていることがわかります。
この〇の部分で、挟まれた文章がどのような意味を持つのかを表現しています。
いくつか代表例を見てみましょう。
htmlタグの代表例
- <h〇>：見出し
※〇には数字が入る - <p>：段落
- <br>：改行
- <a>：リンク
- <img>：画像ファイル
このような意味を持つタグで文章を挟むことで、その部分が持つ意味をGoogleなどの検索エンジンに伝えることができます。
そしてこの意味に従って、様々なユーザーのパソコンやスマホに狙い通りに記事を表示させることができています。
そのため、html構造は正しい情報を伝えるために大変重要で、html構造が不適切な文章は不適切な記事を言えます。
当然、不適切な記事ほどGoogleなどから低い評価を受け、検索順位は上がりにくくなるでしょう。
そして怖いことに、はてなブログの『見たまま編集』では、基本設定が不適切なhtml構造になっています。
見出しの意味とhtmlタグ
はてなブログの『見たまま編集』では次の見出しを使うことができます。
はてなブログの見出し
- 大見出し
- 中見出し
- 小見出し
この見出しは本の目次のような意味を持ち、次のように使われるべきです。
見出しの正しい使い方
- 【大見出し】自転車を安全に運転する方法
・【中見出し】自転車に乗る前の確認事項
・【小見出し】タイヤの空気圧の確認
・【小見出し】ブレーキの確認
・【小見出し】ライトの確認
・・・・
・【中見出し】発進時の安全確認
・【小見出し】周囲の安全確認
・・・・ - 【大見出し】おすすめの自転車
・【中見出し】・・・・
このように、
- 大見出しで、その部分の話の全体像を伝える
※本ならば『章』 - 中見出しで伝える内容を細かく分ける
※本ならば『節』 - 中見出しの中でも、箇条書きで分類できる内容を小見出しで分ける
というように、同じ見出し同士で同程度の重要性のテーマを持たせながら、より下位の見出しで話を細かく分けていきます。
これにより、読者が今読んでいる部分のテーマをより明確に意識することができ、記事が読みやすくなります。
そしてこの見出しに対応するhtmlタグは次のとおりです。
見出しのhtmlタグ
- h1：タイトル
- h2：大見出し
- h3：中見出し
- h4：小見出し
- ・・・以下、h6まで
hが見出しを意味し、その後の数字が大きいほど下位になります。
そのため、見出しを使う場合はh2 ⇒ h3というように徐々に数字が小さくなるように設定します。
なお、Googleはこのように『段階的に見出しを使うべき』と公式に指摘しています。
世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書
はてなブログの見出しの問題点
はてなブログの見出しの問題点は『h2タグがない』ということです。
一番重要なh1タグは記事のタイトルです。
記事を象徴するタイトルに一番重要な見出しが割り当てられるのは当然です。
しかし、はてなブログでは、その後の大見出しはh2ではなくh3になっています。
つまり、h1 ⇒ h2 ⇒ h3 ・・・となるべきところが、h1 ⇒ h3 ⇒ h4 ・・・となっているわけです。
一応これでも、記事の見た目には問題はありません。
そのため、この不都合に気付かずに記事を書き続ける方が多いのです。
しかし、これでは見出しの分類が飛んでおり完全にhtmlの構文に違反しています。
これが、はてなブログの『見たまま編集』の見出しの問題点です。
Google対応の改善策
この『はてなブログの見出しの不具合』の改善方法は簡単です。
記事の作成完了後に、html編集モードで
- h3をh2に
- h4をh3に
- h5をh4に
というように、各見出しの数字を1だけ小さい数字に置き換えればOKです。
これを聞くと面倒に思うかもしれません。
しかし、誤ったhtml構造の見出しを持つ記事では、その分、検索面で不利に働く可能性があります。
ブログ活動は、自分の書いた記事をユーザーに読んでもらうことが目的です。
自分の記事の見直しと合わせて行えば、この改善策はそこまで面倒ではありません。
記事をより読んでもらえるためにも、この程度の手間は惜しまないようにしましょう。
まとめ
- はてなブログにはh2タグがない
- 各見出しタグ(<h></h>)の数字を1だけ小さい数字に置き換えてhtml構造を最適化する
いかがでしたか？
便利な機能は、その機能の裏に隠された仕組みを理解しないと、何も気付かぬままに損する可能性があります。
今回の見出しは非常に対処しやすい事例ですが、他にも気をつけるべきことはあるでしょう。
この気づきのためには、
- 自分の記事がどのようなhtml構造になっているか？
- 上手くいかないのは何故か？
・自分の思いどおりの表示にならない
・思った以上に記事が読まれない
を、その都度考えていき、1つずつ改善していくことが重要です。
日々のブログ活動の中のささいな疑問に改善のヒントがあるので、放置せずに確認していきましょう。
なお、htmlの基本を知るだけでも、自分でできることの幅が大きく広がります。
例えば、はてなブログのデザインCSSを自分で書くことで、思いのままに記事を装飾することができたりします。
私が実際に勉強した次の本は、イラストや事例が丁寧で、初心者でもわかりやすく勉強できる一冊でした。
今では、この本の内容をもとに自分のブログデザインをカスタマイズしています。
この機会に、
- htmlやcss（デザイン）を知りたい方
- 自分でブログデザインをカスタマイズしたい方
は、是非チェックしてみてください。
