はてなブログの見出しが正しく使われているか見直してみた

スポンサーリンク

今までは記事を書くときに何も考えずに見出しを使ってきましたが、どうやらタグには正しい構成というものがあるみたいです。アクセスアップ、SEOにおいてもかなり重要なことなのだとか。

ということで、すぐさま全ての記事を見直してみました。「画像の最適化」のときと同じように全記事修正旅の始まりです。

ブログ記事数がやっと30を超えたので画像の最適化について考えてみた

2015.12.05

見出しとは?

見出しとは、「hタグ」と呼ばれているものになります。

ちなみに上の「見出しとは?」で使われているタグは「h3」になります。

はてなブログで普段使う見出しは「大見出し(h3)」「中見出し(h4)」「小見出し(h5)」の3つです。

f:id:afrokanchan:20151207112613j:plain

h3は、はてな記法の「大見出し」という部分にあたる箇所です。ソースを見ていくと、ブログタイトルがh1、サイト説明がh2、そして記事タイトルに再びh1が登場します。

本来、タグというものは「見出し」ですから、hタグの中でも最も重要と言ってもいいh1タグが全ページ共通のブログタイトルに使われているというのも少しおかしい気もしますね。

理想としては、大見出しh1、それに続いてh2、h3……と配置していくのが綺麗な構造になります。とは言ったものの、「hタグの順番はそこまで気にしなくてもいい」とGoogleの中の人がコメントも出しているようです。

h1タグの使用はhtml5以降、複数回使用しても良くなったので、こういったブログサービスなどでh1がタイトルなどに固定されてしまう場合は、他に別のh1タグを使用しても問題はないようです。

しかし、可能な限り綺麗なhタグ構造をしていったほうが無難でしょう。

重要度の高い見出しタグ

1.titleタグ

titleタグとは、そのまま記事のタイトルのことですね。検索エンジンが最も重要視しているタグのひとつです。

ここで気をつけるべき点は3つ。

  • タイトルは自然な構成にする
  • キーワードは2つ、または3つが理想
  • 文字数は30文字程度

色々な議論が交わされているところもありますが、大体こんな感じでよろしいんではないでしょうか。

また、ページごとにtitleタグ内のキーワードは変えましょう。

2.h1タグ

h1タグとは、記事のタイトルになる部分です。自然で簡潔なものにしましょう。

検索エンジンはこのh1タグを一番最初に認識し、そしてh2、h3と続いていきます。

はてなブログに関しては「大見出し」がh3なので、h1を利用したい場合は直でhtmlに記述するしかなさそうです。

3.h2〜h6タグ

hタグはh1の他に、h2からh6まであります。h3までで構成されているWebページがほとんどですね。

hタグについては、こちらの記事がとてもわかりやすく解説をされています。

delaymania.com

さっそく直してみる

大見出しとしてよく使っているこのデザイン。これ、実は中見出しなんです。

つまり、大見出し(本来ならばh3)としてよく使っているものは中見出し(h4)ってことです。主に見栄え的な観点からh4を好んで使っていました。

ですので、今回直していくところは、以下の2つ。

  • 見出しのデザインを改める
  • htmlの記述を正しく直す

それではひとつずつ見ていきましょう。

1.見出しのデザインを改める

h4として使われていたデザインをh3に移行、h5として使われていたデザインをh4に移行していきます。わかりやすく画像で説明するとこんな感じ。

f:id:afrokanchan:20151207112632j:plain

CSSでhタグのデザインを変更していきます。CSSの変更に関しては、こちらの記事を参考にしてみてください。

tsukuruiroiro.hatenablog.com

よろしければこんな記事もどうぞ。

はてなブログを始めて4ヶ月を過ぎたので開設当初からのまとめ

2015.12.07

2.htmlの記述を正しく直す

hタグのデザインを変更し終わったら、次に全ての記事の「h4」だった箇所を「h3」、「h5」だったところを「h4」にHTML編集で直していきます。

f:id:afrokanchan:20151207114513j:plain

mi – テキストエディタなどを使って一気に置き換えていきます。

今回はDreamweaverでこちらの記事を参考にhタグを置き換えました。

それでは全記事を修正していきます……。

Dreamweaverでの置き換え方法

Dreamweaverでの置き換え方法を写真付きでさらっと解説してみるので、必要のない方は飛ばしちゃってください。ちなみにMacでの操作方法なのでショートカットキーにはご注意を。

まず、置き換えを行いたいブログ記事をHTML編集で開き、[command+A]で全選択、それを[command+C]でコピー。

f:id:afrokanchan:20151207151028j:plain

次にDreamweaverに移り、先ほどコピーしたものを[command+V]でペースト。さらに[command+F]でDreamweaverの検索画面を表示します。

最初にオプションの「正規表現を使用」にチェック、「検索」を特定のタグにし、今回はh4をh3にしたいのでその隣はh4を選択。

アクションを「タグの変更」にし、変更をh3、そしてすべて変換のボタンを押せばh4がh3に置き換わります。

f:id:afrokanchan:20151207151151j:plain

置き換えが完了したらまた[command+A]で全選択、[command+C]でコピーします。

はてなブログの記事編集画面に戻り、置き換える前の記事を[command+A]で全選択、続いて先ほどDreamweaverでコピーした全文を[command+V]で入れ替えて、「記事を更新する」ボタンを完了です。

修正完了後のまとめ

見た目には何も変わりはありませんが、html内のhタグの表記が変わりました。

h4やh5で見出しを書いていたのを、h3、h4に直すことで、アクセスアップ、SEOにほんの少しでも良き変化をもたらすと信じて気長に待ってみます。

にしても、やはり全記事修正はキツいですね……。

スポンサーリンク

関連記事



この記事を書いた人

あめよふれ

あめよふれっていいます。どうぞよろしく。

「”とり”あえずやっ”てみ”る。略して、とりてみ」がモットーの24歳。ノマドチャリダー。自転車で日本一周してます。アニメ聖地・心霊スポット・世界遺産巡り。趣味はアニメ鑑賞・ベース演奏・旅行・カメラなど。