【Cocoon】FAQブロックの質問を見出し（H3）に変更するカスタマイズ｜SEO・可読性・回遊率UP

Cocoonの「FAQブロック」は、よくある質問を分かりやすく整理できる便利なブロックです。

ただしデフォルトのままだと、質問文は見出しタグではなく通常のdiv要素として出力されます。

そのため、

• 目次に表示されない
• 記事構造として評価されにくい
• 長文記事では読み飛ばされやすい

といった弱点があります。

そこでこの記事では、CocoonのFAQブロックの「質問部分」を 見出し（H3）に変換するカスタマイズ方法を紹介します。

コードはコピペで使えるので、初心者の方でも安心です。

FAQをただ置くだけで終わらせず、「記事構造の一部」として活かしたい方は、ぜひ取り入れてみてください。

Cocoon｜FAQブロックの質問を見出し（H3）に変えるメリット

CocoonのFAQブロックは便利ですが、初期状態では質問文が「見出し」として扱われません。

構造化データとしては適切に出力されていても、本文側ではセクションとして認識されにくいため、SEO面でもFAQの価値を十分に活かしきれないケースがあります。

FAQの質問を h3見出し化 すると、SEOだけでなく読者体験も改善されます。

主なメリットは次の3つです。

• SEO評価の向上
  • 検索エンジンがページ構造を理解しやすくなる
  • FAQの質問文がロングテール検索にも拾われやすくなる

• 読者の可読性UP
  • 目次にFAQ質問が並び、探しやすくなる
  • 知りたい情報へすぐジャンプできる

• 回遊率・滞在時間UP
  • 見出しジャンプで目的FAQに直行できる
  • 関連FAQも続けて読まれやすくなる

単なる見た目の調整ではなく、「検索エンジン」と「読者」の両方にやさしい構造に変えられるのが、このカスタマイズの最大のポイントです。

サンプル｜見出し化したFAQブロックの表示例

ここでは、FAQブロックの表示イメージを紹介します。

このサンプルでは、質問文が h3 として出力されるため記事上部の目次にもFAQが並び、長い記事でも「知りたい質問へ一発でジャンプできる構造」になります。

Cocoon｜FAQブロック見出し化カスタマイズのポイント

CocoonのFAQブロックを見出し化する際は、安全に・SEO的にも効果が出る形で実装するために、次のポイントを意識しています。

FAQブロックの質問テキストだけを取得

FAQブロックには「Qラベル」「装飾用HTML」なども含まれています。

そこで、

• 質問テキストのみを対象
• HTML部分はそのまま維持
• 中身だけをh3で包む

という形にすることで、見た目を崩さずSEO効果だけを高められます。

FAQ構造化データはそのまま活かす

CocoonのFAQブロックは、FAQページの構造化データを自動出力しています。

今回のカスタマイズは、表示部分のみ調整で構造化データ自体は変更しないため、

• リッチリザルトを維持
• 見出し構造も強化
• SEO評価もプラス方向

という形で併用できます。

Cocoon｜FAQカスタマイズの実装前に知っておきたい注意点

実装は必要なコードのコピペだけですが、PHPを編集するためいくつか注意点があります。

• 必ずバックアップを取る

• PHPの編集を間違えると重大なエラーが発生することがあります。
• 作業前に以下バックアップをおこない、元に戻せるようにしておくと安心です。

• 子テーマの functions.php
• 子テーマの style.css（スタイルシート）

• 必ず「子テーマ」に追加する

• 子テーマの functions.php、style.css に追加してください。
• 親テーマに入れると、アップデート時に上書きされてしまいます。

実装方法｜FAQブロックの質問をH3化する手順

作業はとてもシンプルでコードを1つ追加するだけ。

必要に応じて見出しスタイルもCSSで調整します。（後述します）

手順①：子テーマの functions.php を開く

管理画面から次の場所へ進みます。

外観 → テーマファイルエディター → 子テーマ → functions.php

---

ここからは、有料パートで具体的な実装方法を解説します。

など、そのまま実装できる形でまとめています。

• 「FAQを目次に出したい」
• 「SEO評価をもう一段階上げたい」
• 「読者が迷わない構造にしたい」

という方は、この先を読めばすぐに導入できます。

作業はコピペだけなので、コードが苦手な方でも問題ありません。