SEOに強いWordPressの見出しの正しい付け方！読まれる見出しのポイントとは？
※本ページにはプロモーションが含まれている場合があります。
・見出しってどうやって使うの？メリットは？
・読者に読まれてSEO効果も抜群の見出しのルールとポイントを知りたい
・WordPressで見出しを作成する方法を知りたい
・見出しと合わせてしておくべきSEO対策に役立つことを知りたい
本記事の内容
- ブログにおける見出しの基礎知識やメリット
- WordPressで見出しを作成する方法
- 読者に読まれてSEO効果も抜群の見出し作りのルールやポイント
- 見出しのデザイン方法や目次を自動生成する方法
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
本記事を読むと、WordPressでの見出しの作り方だけでなく、SEOにも売上にも効果的な見出しのポイントがわかります。
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
＼ 月間1300万PVのプロが解説 ／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！
目次
WordPressの見出しとは？
まずはWordPressの見出しの基礎的な知識について簡単に解説します。
WordPressでは上の画像のようにh2やh3・h4などいくつかの種類の見出しを作成することができます。
ちなみにそもそも見出しとは、文章のまとまりにどんなことが書いてあるのか要点を簡潔に表したもので、文章のタイトルのようなものです。
見出しがあることで、区切りがあって見やすいだけでなく、どんなことが書いてあるのかを一目で把握できるので文章を読むのが楽になります。
見出しとはh2タグ~h6タグのこと
WordPressで見出しを作る時、見出しには以下の5つがあります。
- h2
- h3
- h4
- h5
- h6
WordPressの記事編集画面で見出しを作成しようとすると、上の画像のように「見出し1」や「見出し2」などのように記載されていますが、
これらはそれぞれ以下のタグを表しています。
- 見出し1：h1
- 見出し2：h2
- 見出し3：h3
- 見出し4：h4
- 見出し5：h5
- 見出し6：h6
後ほど詳しく解説しますが、上の画像のサンプル記事のタイトル部分
という箇所がh1です。
見出し1(h1)とは記事タイトルに使うものであり、見出しとしては利用しません。
なので見出しと言うときは実施、h2~h6タグのことを見出しと呼びます。
見出しには2つの役割がある
見出しがあることで読みやすくなったり見やすくなると簡単に触れましたが、WordPressやブログにおける見出しは以下の2つの役割があります。
- 読者に伝えるため
- Googleに伝えるため
役割①：読者に伝えるため
これはごく当たり前の役割で、記事を読みやすくしたり見やすくしたりなど、読者のために役に立つという点です。
役割②：Googleに伝えるため
WordPressやブログなどのWebサイトのおける見出しの役割としてもう１つ重要なのが、Googleに記事の内容を伝えるという役割です。
GoogleはWebサイトを評価するために記事の内容を把握するとき、HTMLタグを使うことで内容を理解します。
つまりhタグ(h2~h6)を適切に使うことで、Googleにも内容を正しく伝えることができます。
WordPressの見出しのメリット
読者が記事が読みやすくなる
当然ですが、1つ目のメリットは読者が記事を読みやすくなることです。
見出しがあることで
- 見た目にメリハリがついて見やすい
- 見出しで内容をざっくり把握できるので理解しやすい
という理由で読みやすくなります。
見出しがない記事
見出しがある記事
「読者が読みやすい」ということは、滞在時間や回遊率のアップに繋がり、SEOで評価されて検索順位が上がる要因の1つになります。
見出しが目次になる
2つ目のメリットは、見出しを作成することで目次を作成することができるという点です。
例えば本記事では以下の画像のような目次が記事の冒頭にありますが、
このように目次があることで、読者は以下のようなことができます。
- この記事にはどんなことが書いてあるのか把握できる
- どこに書いてあるのかを把握できる
- 自分が読みたい箇所・読まなくても良い箇所の区別をできる
逆にこれができず、目次がないと、
記事全部をスクロールしてどこに何が書いてあるのか探さないといけないので、嫌になって離脱してしまいます。
見出しがあることで目次を簡単に作れるようになります。
WordPressで自動で目次を作成するならTable of Contents Plusがおすすめです。
>> 【2021年】Table of Contents Plus(TOC＋)の使い方と設定方法を画像で解説｜目次自動作成プラグイン
Googleに記事の内容が伝わる(SEO対策)
見出しの3つ目のメリットは、Googleに記事の内容が伝わるということです。
SEOで良い評価をされて検索順位で上位表示されるには、
とGoogleに認識してもらう必要があります。
つまりそのためには、まずは「Googleに記事の内容を正しく伝える」ということが大前提になりますが、そのためにhタグが役に立ちます。
Googleは記事にどんなことが書いてあるのかをHTMLタグで認識しますが、その中でも特にタイトルと見出しから内容を把握する割合が大きいです。
つまり、
- 見出しのタグを正しく使うとGoogleに記事の内容が伝わってSEOで評価される
- 見出しがない記事や見出しが雑な記事は、内容がGoogleに伝わらないので、どれだけ内容が良くてもSEOで評価されない
ということになります。
本記事でも「SEOに効果的なWordPressの見出しのポイント」の見出しでSEOで評価される見出しのポイントを解説しますが、以下のツイートで無料で配布している「SEO完全攻略ガイド」でも詳しくSEOのノウハウをまとめています。
／
ついに完成！🥳👏
＼ブログ初心者のための
「SEO完全攻略ガイド」🥳🎉✅必要な記事数が10分の1になる
✅今すぐできて効果的なSEO対策
✅初期から早く収益を出す戦略40時間かけて作ったスライド資料61枚😆
スライド限定の特典🎁もご用意しています☺️
👇応募方法はリプから確認👇 pic.twitter.com/e9KhrNRHuR
— なべたろ🌞半年で1000万PV【SEO】 (@seonabe) January 9, 2021
WordPressの見出しのルール
ルール①：むやみに見出しを使わない
まずは、むやみに見出しを使わないことです。
見出しは読者だけでなくGoogleに伝えるための大切なツールなので、記事の中で重要でもない部分を見出しにするとGoogleに記事の内容が正しく伝わりません。
特にやりがちなのが、見た目を整えたり目立たせるためにhタグを使うこと。
目立たせたいならCSSで装飾したりボックスを使うなどで強調して、見出しは記事の骨組みの箇所だけに使いましょう。
ルール②：見出しには必ずhタグを使う
次のルールは逆に、「見出しには必ずhタグを使う」というものです。
記事の骨組みをhタグでGoogleは把握するので、hタグがないとGoogleに記事の内容が伝わりません。
上の画像で見出しのように見える部分はhタグではなくpタグとCSSで強調しています。
このように、hタグを使わなくても見出しっぽいものを作成することはできますが、pタグではGoogleに正しく伝わらないので、見出しは必ずhタグを使いましょう。
ルール③：h1は記事内では使わない
h1タグは記事のタイトルの箇所のみで使い、記事内では一切使いません。
また、h2~h6タグは1ページで何度も使えますが、h1タグは1ページで1度しか使えません。
と認識しておけばOKです。
つまり見出しとしては、h2~h6タグのみを使用します。
ルール④：見出しの大きさの順序と階層構造を守る
最後のルールは、見出しの大きさの順序と階層構造を守ることです。
見出しには階層構造があり、
の順番で階層が大きくなるように使わないといけません。
つまり、
- h2は、記事全体をいくつかに区別するための見出し
- h3は、h2の内容をいくつかに区別するための見出し(h2の中で使う)
- h4は、h3の内容をいくつかに区別するための見出し(h3の中で使う)
- h5は、h4の内容をいくつかに区別するための見出し(h4の中で使う)
- h6は、h5の内容をいくつかに区別するための見出し(h5の中で使う)
という感じです。
また、h2の中でh3を飛ばしてh4を使うなどのように番号を飛ばして使わないようにしましょう。
・h2タグを一番大きな階層にして、h3、h4と順に階層が小さくなるように使う
・「h2タグの中にh4を使う」などのように数字を飛ばさない
大きさの順序や階層構造の正しい例
以下は順序と階層構造が正しい見出しの例です。
- h2の見出し
- h3の見出し
- h4の見出し
- h5の見出し
- h4の見出し
- h4の見出し
- h3の見出し
- h3の見出し
- h2の見出し
- h3の見出し
- h2の見出し
大きさの順序や階層構造の悪い例
続いて、順序や階層構造が誤っている見出しの例です。
- h2の見出し
- h2の見出し
- h4の見出し(←×：h3を飛ばしてh4を使っている)
- h2の見出し
- h2の見出し(←×：h2の中にh2がある)
- h3の見出し(←×：一番上の階層にh3がある)
- h2の見出し
以下の画像は、「WordPressのおすすめプラグインを紹介」というテーマ(タイトル)の記事の見出しの例です。
h2は最も大きな階層の話題が並び、その中のh3やh4はその話題をさらに細分化するような話題になっています。
WordPressでの見出しの作り方
ここからは、WordPressでの見出しの作り方(操作方法)について、以下の3つをそれぞれ順に解説します。
ブロックエディタ(Gutenberg)での作り方
ブロックエディタ(Gutenberg)で見出しを作成するには、まずは「+」マークをクリックしてブロックのメニューを開きます。
「見出し」をクリックします。
「H2」をクリックすると、
H1~H5が表示されて、使うhタグを選択することができます。
H1タグは一切使いません。
hタグを選択したら、見出しのテキストを入力しましょう。
テキストを入力したら見出しが完成です。
プレビューで確認すると、h2の見出しが作成されています。
クラシックエディタのビジュアルモードでの作り方
次はクラシックエディタのビジュアルモードでの見出しの作り方です。
見出しにしたいテキストを選択します。
テキストを選択した状態のまま、「段落」と書かれた箇所をクリックします。
上の画像のように、プルダウンメニューが表示されるので、使いたい見出しを選択します。
なお、それぞれ以下の見出しを表しています。
・見出し2：h2
・見出し3：h3
・見出し4：h4
・見出し5：h5
・見出し6：h6
見出し1は一切使いません。
見出しを選択したら、見出しの作成が完了です。
エディタの画面でも上の画像のように大きく表示されています。
プレビューを確認すると、h2の見出しになっています。
クラシックエディタのテキストモードでの作り方
最後はクラシックエディタのテキストモードでの見出しの作り方です。
テキストモードでは上の画像のように、見出しにしたい箇所を自分で以下のようなタグで挟むことで見出しを作成できます。
テキストモードでは通常は、上記のタグを自分の手で入力する必要がありますが、次の方法を使うことで効率的に入力することができます。
テキストモードで素早く見出しを作る方法
効率的に見出しを作成するには、AddQuicktagというプラグインを使用します。
>> 【2021年最新】AddQuicktagの設定方法と使い方を画像で解説｜装飾効率化プラグイン
AddQuicktagをインストールして設定をしたら、上の画像のように見出しにしたい箇所を選択して、
「h2」や「h3」のボタンをクリックするだけで、
このように選択した箇所をh2タグで囲うことができます。
AddQuicktagの使い方は以下の記事で詳しく解説しています。
>> 【2021年最新】AddQuicktagの設定方法と使い方を画像で解説｜装飾効率化プラグイン
SEOに効果的なWordPressの見出しのポイント
次は、SEO効果を高めて検索順位を上げるための見出しのポイントを4つ紹介します。
ポイント①：見出しだけで内容が分かるようにする
見出しを見ただけで以下のことがわかるような見出しにすることが大切です。
- どこにどんなことが書いてあるのかわかる
- 見出しを読むだけでその内容がわかる
例えば本記事のこの箇所の見出しは、
という見出しになってますが、
だけでなく
まで見出しに記載することで内容まで一目でわかります。
読者はとにかく楽に情報を手に入れたいと思っており、全くじっくり読んではくれません。
目次を見た時に情報を手に入れにくくて読むのが疲れそうと感じた時点で、読むのをやめてしまうので、
見出しにで内容を見せることで読者のストレスが減り読まれやすくなります。
ポイント②：文ではなく完結な言い回しにする
見出しは長い分ではなく簡潔な言い回しにしましょう。
記事のプレビューを確認した時に、1行におさまるくらいの長さがベストです。
どうしても長くなり2行になる場合もありますが、要点を抑えて簡潔な言い回しにしましょう。
ポイント③：デザインに強弱をつける
h2・h3・h4など見出しの階層に合わせてデザインに強弱をつけましょう。
デザインの強弱がなく、 読者が見た目でh2かh3かh4か判断できないと、
今どの話題のところを読んでいるのか読者が分からなくなり迷子になってしまいます。
見出しの階層構造を読者にわかりやすく伝えるためにも、見出しのデザインに強弱をつけて、以下の順で目立つ見出しにしましょう。
見出しデザインの強弱の悪い例
以下は、h4が大きくh2が小さい悪い例です。
ポイント④：見出しはh2~h4だけでOK
hタグはh1からh6までありますが、見出しとして使うのはh2~h4だけでOKです。
h5とh6は見出しのタグではありますが、よほど使わなくてもOKです。
2万文字を超えるような大きな記事であっても、h2・h3・h4の3つがあれば大体の場合はカバーできます。
あまりに情報量が多い場合はh5も使っても良いと思いますが、基本的にはh2・h3・h4の3つもあれば見出しは十分です。
無駄にh5やh6まで使うとかえって見にくい記事になります。
WordPressの見出しのデザインを変更する方法
見出しごとに強弱をつけたり、さらに読者が読みやすい記事にするためにWordPressの見出しのデザインを変更する方法を解説します。
CSSで見出しデザインを変更する
1つ目の方法は、CSSで見出しをデザインする方法です。
Webサイトの文字の大きさや背景色・枠線や配置など、デザインを指定するためのコード。
詳しいデザイン方法は以下の記事で解説しているので、本記事ではざっくりと解説します。
>> 【コピペで簡単】WordPressの見出しデザインをプラグインなしでおしゃれに変更する方法【初心者】
まずは「外観」→「カスタマイズ」をクリックします。
「追加CSS」をクリックします。
ここがCSSを入力するための場所になります。
上の画像のように、h2・h3・h4それぞれに対してデザインを指定するCSSコードを記載し、「公開」ボタンをクリックすれば完了です。
初心者でもコピペで簡単にプロのようなおしゃれな見出しにする方法は以下の記事で詳しく解説しています。
>> 【コピペで簡単】WordPressの見出しデザインをプラグインなしでおしゃれに変更する方法【初心者】
見出しデザインのおすすめの参考サイト
テーマの設定で見出しデザインを変更する
もう１つの方法は、CSSを使わずWordPressテーマの設定でデザインを変更する方法です。
「外観」→「カスタマイズ」をクリックします。
この後の設定画面や項目名はWordPressのテーマによって異なり、テーマによってはカスタマイズできない場合もあります。その場合は「CSSで見出しデザインを変更する」の方法でご対応ください。
「[+]各テキストとhタグ(見出し)」をクリックします。
デザインを変更したい見出しをクリックします。
デザインの選択メニューなど様々なカスタマイズができるので、自由にカスタマイズしましょう。
WordPressの見出しから自動で目次を作ろう
見出しを作ったら、さらに読者が読みやすい記事にするために、以下のような目次を作成しましょう。
目次があることで、
読者に読まれやすくなり、SEOの効果は抜群、売上にも繋がりやすいというメリットがあります。
目次の作成方法は以下の記事で詳しく解説しています。
>> 【2021年】Table of Contents Plus(TOC＋)の使い方と設定方法を画像で解説｜目次自動作成プラグイン
WordPressの見出しはとにかくこだわろう！
WordPressで見出しを作成する方法や読まれてSEO効果の高い見出しにするためのポイントを解説しました。
見出しはブログの中で最も大切な部分と言っても過言ではないので、本記事の内容をもう一度おさらいしてポイントを抑えておきましょう。
見出し作りや文字装飾に役立つプラグインAddQuicktagについては以下の記事で解説しています。
>> 【2021年最新】AddQuicktagの設定方法と使い方を画像で解説｜装飾効率化プラグイン
初心者でもコピペで見出しデザインをオシャレにする方法は以下の記事で解説しています。
>> 【コピペで簡単】WordPressの見出しデザインをプラグインなしでおしゃれに変更する方法【初心者】
見出しから自動で目次を作成する方法は以下の記事で解説しています。
>> 【2021年】Table of Contents Plus(TOC＋)の使い方と設定方法を画像で解説｜目次自動作成プラグイン
公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。
LINE参加者の声
400名が以上参加中！無料で読めます♪
＼ 最短で収益化 ／
