SEOに欠かせないWordPressの見出しの付け方・デザイン

Web制作をするにあたって、WordPressを使ってサイト構築をしている担当者も多いと思います。更新や管理がスムーズにでき、かつSEO対策を考える上でも有利なWordPressは、今後もWebサイト制作の重要なツールとして重要な位置を占めます。

WordPressに限らず、WebサイトのSEO対策やユーザビリティを考えた時に、重視したいのが「見出し（hタグ）」です。適切に見出しを設定することで、コンテンツの内容も分かりやすくなり、SEO効果があるとされています。

WordPressを使うと、簡単に見出しを設定できます。さらに、おしゃれなデザインになるように調整したり、見出しを自動で出力して目次を生成したりすることも可能。WordPressを使うからこそ、見出しを最大限活用したコンテンツ制作ができるとも言えます。

今回は、WordPressを使ってSEO効果の高い見出しを設定する方法を分かりやすく解説します。

見出しの基礎知識

具体的なWordPressの設定方法に入る前に、「見出し」の役割や重要性について改めて触れておきます。hタグの重要性について十分理解している、という方は飛ばしていただいて構いません。

Webサイトにおける「見出し」とは、hタグを使って記述されるテキストです。文章がズラズラと並んでいる文章は人間にとっても検索エンジンにとっても読みにくいので、見出しタグを使うことで文章にメリハリを付け、読みやすくすることが大切です。

見出しタグは<h1>から<h6>まで6種類あり、ページの構成に合わせて使用します。

hタグは他のテキストとデザインに差をつけることができ、見た目でも文章の区切りを分かりやすく伝えることができます。

下の画像を見ていただくと、見出しがあると文章にメリハリがあることがよくわかっていただけるはずです。

見出しをつけるメリット

見出しをつけるメリットをまとめます。

記事が読みやすくなる

先程比較した画像を見ても分かる通り、見出しの有る無しで読みやすさが大きく変わります。いくら良いコンテンツでも、読みにくいと感じたらユーザーはすぐに離脱してしまいます。対象ユーザーにしっかりコンテンツを読んでもらうためにも、見出しを使って、分かりやすい構成を心がけましょう。

目次の役割を果たす

WordPressには見出しを自動で出力して目次を生成する機能があります。目次を記事冒頭やサイドバーに掲載することで、「全体的にどんな内容が書いてあるのか」「いまどこまで読んだか」をユーザーに伝えやすくなります。

SEO対策

見出しを適切に設定すると、検索エンジンがページをクロールする際にコンテンツの中身や構成をスムーズに理解でき、SEO効果が高まることが期待できます。特に、見出しの中でも高い階層にある見出しに重要なキーワードを含めて記述することで、そのコンテンツが何を表しているのかが効率的に伝わるようになります。

その他、見出しについての詳しい解説は以下の記事を参考にしてください。

見出しの付け方

ここからは、WordPressの編集画面キャプチャを入れながら見出しの設定方法を具体的に説明していきます。WordPressには旧バージョンの「クラシックエディタ」と、「Gutenberg（グーテンベルク）」と呼ばれるブロックエディタがあります。お使いのバージョンに合わせて参考にしてください。

クラシックエディタでの見出し設定

クラシックエディタでは、Wordのように見たままでHTMLが編集できる「ビジュアルモード」と、タグを直接打ち込む「テキストモード」があります。

ビジュアルモードでは、普通にテキストを書いた後、見出しにしたい部分にカーソルを当ててください。

その状態で、編集エリア上部のプルダウンメニューから、設定したい見出しレベルを選択します。

編集画面にて、見出し適用されているのが分かります。

思ったように設定できたら、投稿もしくは更新ボタンを押し、記事に反映させましょう。

テキストモードの場合は、通常のHTMLタグを書くときのように設定します。hタグで囲みたい部分のテキストを<h2>～</h2>(h2タグの場合)で囲んでください。

そのまま投稿もしくは更新ボタンを押すと、記事に反映されます。

ブロックエディタ（Gutenberg）での見出し設定

新しいブロックエディタの場合は、「段落」「見出し」「画像」などのブロックを組み合わせて記事を構成していきます。見出しを設定したい部分に「見出し」ブロックを挿入するというのが設定手順です。

新規ブロックを追加する＋ボタンを選択し、その中から「見出し」を選びます。

入力フォームが表示されるので、そこに見出しのテキストを入力します。

h1～h6の見出しレベルについては、ブロックを選択した状態でブロック上部のメニューか、左サイドバーから選ぶことができます。使っているWordPressのテーマにもよりますが、ここで見出しの文字色やデザインバリエーションを既定バリエーションの中から選ぶこともできます。

見出し作成のポイント

見出しをSEOの観点から適切に設定するためには、以下のポイントを意識しましょう。

h1タグは1記事に1回

見出しタグの中でも最上位に位置する「h1タグ」は、記事中で１回の使用にとどめましょう。いちばん重要な見出しということは、記事の本質を要約したテキストということでもあります。むやみにh1タグを作ってしまうと、「結局この記事の本質はなにか？」という点が揺らいでしまいます。

基本的には、記事のタイトルが自動でh1タグに設定されているWordPressテーマが多いです。（SEOの観点から、デジ研でWordPressテーマの選び方を紹介した際も、「ページタイトルがh1タグである」テーマを推奨しました。

ですので、本文中で使うhタグはh2以下から選ぶようにしましょう。

見出しタグの順番

見出しタグは<h1>から<h6>までありますが、<h2>の下の階層には<h3>というように、順番を守って設定する必要があります。見出しタグは、単に見出しテキストを強調するものではなく、コンテンツの階層構造を正しく伝える役割があるからです。

h2タグの次にh4タグが設定してあるなど、文書構造を混乱させる見出し設定はやめましょう。ユーザーにとっても検索エンジンにとっても、「分かりにくいコンテンツ」と思われるリスクが高くなります。

また、自動出力で目次を生成する場合にも、間違った順番で見出しを付けていると、目次本来の役割を果たすことができません。

無意味に使用しない

まれに、見た目を強調したいためだけに（例：太字にしたい、下線をつけたい、フォントサイズを大きくして目立たせたい）見出しタグを使う人がいます。

見出しはテキストの見た目デザインのためではなく、ページ構造を伝えるために使うものです。見出しの乱用は、ユーザーや検索エンジンがコンテンツを正しく理解するのを邪魔します。

見た目の強調は、<strong>タグや<em>タグ、その他スタイルシートなどを使って行うようにしましょう。

見出しのデザインをおしゃれにカスタマイズ

WordPressの場合、使用するテンプレートによってある程度見出しのデザインは決まっています。テーマによっては、好みに応じて見出しデザインを選択できる場合もあります。

ただ、オリジナルの見出しを設定して差別化を図りたい、という人もいるかと思います。その場合は、おしゃれにカスタマイズしてより読みやすいコンテンツを目指しましょう。

見出しをデザインするメリット

見出しをWebサイトに合わせてデザインすると、

• 文章を読むときにメリハリがつく
• 他のブログとの差別化ができる

というメリットがあります。

デザイン要素はSEOに関係する要素ではありませんが、Webサイトのイメージや読みやすさに大きく寄与するポイントです。ユーザーに良い印象を与えることができれば、より多くのコンテンツを読んでもらえることにつながり、結果的にコンバージョン率アップも期待できます。

WordPressの見出しデザインの設定方法

基本的には、WordPressのテーマごとに見出しがデザインされています。テーマによっては、同一テーマ内でも好みの見出しが選べる場合もあります。

例：WordPressテンプレート「Lightning」の場合

しかし、デフォルトの見出しデザインではなく、少し調整したデザインを利用したいという場合は、直接スタイルシートを編集することになります。

まず、左のメニューから「外観>カスタマイズ」を選択してください。

カスタマイザー画面のメニュー下部にある「追加CSS」をクリックします。

すると、CSS用のテキストエリアが表示されるので、ここに見出しのスタイルを記述すると、オリジナルのデザインを反映させることができます。

例えば、

と記載すると、h2タグに「太い黒下線」を設定することができます。

同様に、<h3>～<h6>も個別デザイン設定が可能です。いくつかデザイン例をご紹介します。

背景をオレンジにし、角を丸くする

左に線のあるデザイン

CSSでの見出し装飾は、デザインの自由度が高く、好みやサイトの雰囲気に合わせてこだわりがいのある部分です。例えば、以下のサイトのように見出しデザインを複数紹介しているページもあるので、必要に応じて参考にし、デザインにこだわってみてください。

参考：CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

見出しを目次に自動反映するプラグイン

見出しを適切に設定すると、分かりやすい階層構造のコンテンツができあがります。せっかくなので、見出しによる階層構造を上手に活用して、目次を自動生成しましょう。

プラグインを活用すると、以下のような見出しを自動で生成できます。

使うプラグインは、「Table of Contents Plus」です。左のメニューから「プラグイン>新規追加」を選択し、プラグインをインストール、有効化してください。

有効化すると、「設定>TDC＋」という項目がメニューに追加されています。ここで基本設定を行います。

最低でも、①位置②表示条件③以下のコンテンツタイプを自動挿入④見出しテキスト　の4つを設定しておくことをオススメします。

位置	見出しを自動挿入する場所です。基本は、リード文の後、最初の見出しの前に表示するのが一般的です。
表示条件	見出しが少ない記事に目次がある意味はあまりないので、「最低◯つ以上見出しがある場合に自動生成する」と決められます。
以下のコンテンツタイプを自動挿入	どのタイプのページに挿入するかを決めます。基本的にはpost（投稿）、page（固定ページ）を選択することが多いです。
見出しテキスト	目次部分のタイトルです。ユーザーが目次を閉じ開きできるような設定も可能です。

他にも表示する見出しレベルの設定や、目次部分のデザインなど、細かくカスタマイズできるので、いろいろ調整してみてください。

おわりに

見出しは、SEO効果も期待できるだけでなく、コンテンツの読みやすさを大きく左右する部分です。WordPressでは簡単に見出しの設定もできるので、上手に活用して読みやすいコンテンツを心がけましょう。

さらに、デザインをこだわったり、目次を自動生成したりすることでよりユーザーに好まれるサイトに近づけることができます。

この記事をきっかけに、サイトの見出しを見直し、工夫をこらしてみましょう。