キラッとはてログ

ポヤポヤの主婦ポヤラが本気で取り組むブログ運営

記事内に商品プロモーションを含む場合があります。

【はてなブログ】正しい見出しの使い方|大見出しをh2にする方法

690

こんにちは♪はてなブログ大好き、ポヤラです!
今日はSEOライティングでとても重要な見出しについて考えてみましょう。

 

ポヤラさーん!たいへんだよ〜!!
はてなブログの大見出しはh3なんだって!!
.………それってダメなことなの??

【hタグとは
  • 「hタグ」はHTMLで見出しを意味します
  • はてなブログの見たまま編集で書いた大見出しをHTML編集で見ると「<h3>大見出し</h3>」と表示されています。
  • つまり、はてなブログの大見出しはh3タグが使われています。

【HTMLとは】

  • ちなみに「HTML」とはコンピューターにwebページの構造を伝える言語です。

う〜ん…絶対ダメではないけれど、できれば修正したいかな。
本文の最初にくる見出しはh2が一般的ですからね。

見出しって順番が決まっているの?知らなかった〜!!
他にも決まりごとがあるのかな?
見出しのこと、ちゃんと教えて〜!

 

はーい♪
ブログでの見出しの使い方はてなブログの大見出しについて、わかりやすく説明しますね。

■この記事でわかること■
  • hタグとは何か
  • 見出しの正しい使い方
  • はてなブログの大見出しをh2にする方法

 

   

 

見出し(hタグ)は記事内容をわかりやすく伝えるモノ

見出しはとても重要です。
見出しを正しく使えば読者やGoogleに記事の内容をわかりやすく伝えることができます。
しかし逆に間違った使い方をすれば記事は読みづらくSEOに悪影響…Googleからの評価が下がります。

見出し(hタグ)は装飾ではない

私はブログ初心者のころ、見出しの意味を全く理解しておらず文字装飾として使っていました。
強調したい部分にわけもなく中見出しを使ったり、文字のサイズを変えたい時にいきなり大見出しを使ったり・・・お恥ずかしい限りです汗

もちろん見出し(hタグ)は装飾に使うものではなく、読者とGoogle(検索エンジン)に記事構成をわかりやすく伝えるために使います。

見出しと読者の利便性

 ブログ記事は、見出しをつけることで格段に読みやすくなります。

この章の冒頭を見出しなしで表示するとこうなります。パッと見ただけでは記事の内容がわかりませんね↓↓

f:id:poyara:20210819142007j:plain

 

見出しをつけると、視覚的に何が書いてあるのかわかります↓↓

f:id:poyara:20210819140520j:plain忙しい読者は記事を読みとばします。

しかし、見出しが適切に表示されていれば・・・

  • 読み飛ばしても記事の内容を把握できる
  • 興味のある章だけを読む選択もできる

これは読者には嬉しいことですよね。

つまり、適切に見出しが使われている記事は読者ユーザビリティ(利便性)が高いといえます。

見出しだけを追っても内容を理解できる記事は読者ファーストなんだね♪

検索エンジンはhタグで記事の構造を理解する

見出し(hタグ)は読者だけでなく、コンピューターにも記事の内容を伝えています。

hタグとHTMLについて簡単に説明しますね。

hタグとHTMLについて

「見たまま編集」で記事が書けちゃう私たちにはあまり実感がありませんが、ブログ記事はHTMLで出来ています。(チラッと「HTML編集」を覗くとわかりますね)

HTMLはコンピューターにwebページの構造を伝える言語です。

例えば、「画像」や「表情」や「段落」は

画像→<img>、表→<table>、段落→<p>

と表します。

そして「見出し」を表すHTMLは
見出し→<h1>,<h2>,<h3>,<h4>,<h5>,<h6>

です。

*厳密にいえば、「hタグ」は「重要なテキスト(文章)」を表します。
「そこに書いてある内容をまとめたテキスト」ということです。

だから記事全体の内容をまとめたテキストであるタイトルには「h1」を使うんですね。

検索エンジンに記事の内容を正しく伝える

あたり前のことですが、検索エンジンはコンピューターです。

検索エンジンが私たちのブログ記事に検索順位をつけるとき、実際の記事を読んでいるわけではなく、HTMLを読み込んでいるのです。

だから、正しい構造で記事を書くことが大切なんですね。

アクセシビリティを考えよう

アクセシビリティとはどんな人でもサイトにアクセスして情報を得られることです。

何らかの障がいを抱えて、一般的なパソコンの操作が困難な人でも、何らかの方法で操作、アクセスをして情報を得られることをいいます。

 

例えば、視力に障がいのある方はweb記事の内容を読み上げるツールを使って情報を得るそうですが、もちろんツールはコンピューターです。HTMLが正しく表示されている方が内容が理解しやすいでしょう。

見出しのhタグがあればさらに内容が理解しやすいですね。

■代替テキスト(altタグ)■
余談ですが・・・
同じ理由で画像の「代替テキスト(altタグ)」の設定も大切ですよね。何らかの理由で画像が見えない(表示されない)場合でも、どんな画像か説明があれば内容が伝わります。

 

 

見出し(hタグ)の使い方

見出しを正しく使うためには2つの決まり事があります。

  1. 順番を守る
  2. 構成を守る

ひとつずつ説明していきますね!

 

順番を守る

一般的にブログ記事はこのような構造になっています。
*記事の長さによって見出しの数は変わります

h1  タイトル
  リード文
  目次
 h2  大見出し
  本文
  h3  中見出し
   本文
   h4  小見出し
    本文
   h4  小見出し
    本文
  h3  中見出し
   本文
 h2  大見出し まとめ
 

記事の中でhタグ(見出し)はこのように使います。

【h1タグ→タイトル】
h1は記事内に一つしか使いません。ブログでは記事タイトルになります。

【h2タグ→大見出し】
ブログ記事の本文は必ずh2から始まります。 

【h3タグ→中見出し】
h2の内容をさらに詳細に説明するのがh3です。必ずh2タグの次に使います。

【h4タグ→小見出し】
h3の詳細がh4です。必ずh3タグの次に使います。h2の次にいきなりh4を使ってはいけません。

*以下h5、h6まであります。使い方はh4までと同じです。h5はh4の詳細、h6はh5の詳細になります。 

 

見出しは必ずh2から順番に使うんだね
…初心者のころのポヤラさんみたいに、順番を無視して装飾で使ってはダメだよ笑

 

構成を守る

見出しの決まり事の2つ目は、構成を守ることです。
わかりやすく例を出して説明しますね。

例えば料理のレシピを紹介する記事で…

h2  パスタのレシピ
 h3  ミートソースの作り方
 h3  カルボナーラの作り方
 h3  カツ丼の作り方→✖️
 h3  ペペロンチーノの作り方

 h2「パスタのレシピ」の詳細に「カツ丼の作り方」は入りませんね。カツ丼はパスタではありませんから…。

この場合は、新しくh2「丼のレシピ」を作り、その詳細としてh3「カツ丼の作り方」を載せればスッキリします↓↓

h2  パスタのレシピ
 h3 ミートソースの作り方
 h3  カルボナーラの作り方
 h3  ペペロンチーノの作り方
h2  丼のレシピ
 h3  カツ丼の作り方→○

 

例だとわかりやすいのですが、実際に記事を書くと見出しの構成がブレることがあります。気をつけたいですね。

 

はてなブログの大見出しをh2に修正する理由

ポヤラさーん!正しい大見出しはh2なんだよね。
だけど…はてなブログの大見出しはh3だよ…。どうしよう〜!

そうなんです。

一般的に大見出しはh2タグを使います。だけど、我らがはてなブログの大見出しはh3なんですよね。これは悩ましい。

しかし私は、はてなブログの大見出しはh2にするべきだと思っています。

 

Googleの中の人が見出しについてこのようにおっしゃっています。

*以下、こちらの記事から引用させていただきました。ありがとうございました↓

h1 h2 h3 など見出しタグの順番はSEOで重要か? ランキングへの影響は? | 海外&国内SEO情報ウォッチ | Web担当者Forum

英語版オフィスアワーで次のような質問が出た。

h1タグ、h2タグ、h3タグの順番が間違っていたら問題になりますか?

(h1タグやh2タグがなく)h3タグばかりだったら問題になりますか?

 グーグルのジョン・ミラー氏は次のように答えた。

実際には問題にならない。ページの内容を理解するために見出しタグを多少は使っているが、厳密に正しい順番である必要はない。

オフィスアワーとはGoogleのYouTubeチャンネルで定期的に開催されるイベントです。

*オフィスアワーではGoogleのエキスパートに誰でもビデオ通話で質問できます。

 

えっ??hタグは厳密に正しい順番である必要はない??
…じゃあ、大見出しはh3のままでいいいのかな?

待って…先ほどの記事には続きがあるのよ。

 

さて、ミューラー氏のアドバイスはアドバイスとして、元グーグル社員だったペドロ・ディアス氏の反応を紹介したい。このQ&Aを聞いて、ディアス氏は次のようにコメントしている。

h1タグ、h2タグ、h○タグの順番はGoogleにとって重要か?
重要ではない。でもユーザビリティやアクセシビリティにとっては重要だ。なのにどうして修正しないのか?
「検索ランキングに直接影響するものだけを改善すればいい」という考え方は、本当に憎むべきものだと思う。

つまり、ディアス氏は「Googleは大見出しがh3でも検索順位を下げることはないけれど、読者の利便性を考えたら修正するべきだ」と言っています。

引用させていただいた記事は2018年に書かれたものです。

3年経った2021年の現在、Googleは

  • 読者ユーザビリティ(読みやすさ、使いやすさ)
  • アクセシビリティ(高齢や障害を持つ方など、どんな人もアクセスしやすいこと)

をこれまで以上に大切にしています。

こう考えると・・・はてなブログの大見出しは世界標準のh2タグに修正するべきだと思います。リライトをする時にでも少しずつ修正してみましょう。

 

はてなブログの大見出しをh2にする方法

はてなブログの大見出しをh2にする方法はいくつかあります。

  1. HTLM編集で手動で修正する
  2. Google Chromの拡張機能を使う
  3. はてなブログ定型文を使う

 定型文を使う方法

ここでは圧倒的に簡単なはてなブログの定型文をつかう方法をご紹介します♪

①編集サイドバーを開き

②定型文のアイコンをクリックします

f:id:poyara:20210818155608j:plain

 

③「定型文を作成する」をクリック

f:id:poyara:20210818155836j:plain

 

④タイトルを記入します。「h2タグ」「大見出し」などわかりやすいものがオスススメ。

⑤HT MLを記入します。こちらをコピペしてね↓↓

<h2>大見出し</h2>

 ⑥「保存する」をクリック。

f:id:poyara:20210818132551p:plain

 

定型文の作成はこれで完了です。簡単でしょ?
実際に記事作成で使ってみましょう。 

①「定型文」のアイコンをクリック。

②作成した定型文「h2タグ」を選択。

③大見出しを表示したいところにカーソルを合わせて「選択した定型文を貼り付け」をクリック。

 

f:id:poyara:20210818160716j:plain

 

するとこのように表示されます↓↓

①表示された「大見出し」の文字に続けて見出しを記入します。

②「大見出し」の文字を消せばOK。

f:id:poyara:20210818160751p:plain

これでh2タグの大見出しが表示されます。
大見出しをh2にしたら、忘れずに中見出し→h3、小見出し→h4に修正してね!

 

■便利な定型文の活用法■
とても便利なはてなブログの定型文の使い方をまとめました↓↓

poyaran.com

 

   

まとめ

この記事では、はてなブログの見出しの使い方について詳しくまとめました。

  • 見出しは装飾ではありません。読者と検索エンジンに記事の内容をわかりやすく伝えるために使います。
  • 見出しはh2、h3、h4…と順番と構成を守って使います。
  • はてなブログの大見出しはh3タグになっています。
    このままでも検索順位に影響はありませんが、読者のユーザビリティ(使いやすさ)やアクセシビリティ(アクセスのしやすさ)を考慮すれば、h2に修正する方がいいでしょう。
  • 大見出しをh2タグで表示する方法はいくつかありますが、この記事では定型文を使う方法をご紹介しました。とても簡単なので、ぜひやってみてくださいね。
    大見出しをh2にしたら、中見出し→h3、小見出し→h4…に修正するのもお忘れなく!
■ブログの書き方■
タイトルのつけ方やリード分の書き方など、ブログの書き方についてもっと詳しく知りたい方はこちらをどうぞ↓↓

ブログの書きかた - キラッとはてログ

 

最後までお読みいただきありがとうございます!
「キラッとはてログ」では、初心者がはてなブログで月5万円ほどの収入を得るまでに必要な情報を発信しています。
興味のある方はぜひ読者登録やTwitterフォローをお願いいたします。 

 ごいっしょにはてなブログを楽しみましょう!