Webサイト（ホームページ）やブログサイトなどで、手軽に導入できて便利なCMSのWordPressは、多くの方が利用されているかと思います。
基本的な操作方法さえ覚えれば、お知らせやニュース、ブログなどの記事の投稿は簡単に行えますが、昨今の生成AIの普及によって、ユーザーの情報収集の手段が変わり、従来の検索（SEO対策）だけでなくAIO（AIによる概要）やGEO（生成AI検索最適化）で回答から参照元として選ばれるよう、コンテンツの作り方が求められるようになりました。
実際、WordPressで普通に記事を書く場合、見出しを置いて本文を入力する作業の繰り返しになります。
ブロックエディタの標準挙動では、pタグや見出しタグがそのまま並んで出力されるので、HTML上にセクションの区切りはありません。
文章のまとまりごとにsectionタグで囲み、個別のidを割り当てておくと、記事全体に意味のある構造を持たせることができます。しっかり範囲を整えておくことで、AIや検索エンジン側も「どこからどこまでが何についての記述なのか」を理解しやすくなります。
ここでは、この構造化が必要な理由と、WordPressのブロックエディタを使ってsectionとidを設定する手順についてご紹介します。
WordPressの標準機能しか使わないので、初心者の方でも簡単に対応できます。
なぜ記事にsectionタグとid属性が必要なのか
WordPressで出力される標準のHTMLは、pタグや見出しタグが連続して出力される構成になります。ブラウザ上の表示には問題ありませんが、コードとしては情報のまとまりや境界線が定義されていません。
見た目だけでなくHTMLの文書構造としてコンテンツを整理しておくことは、SEOやアクセシビリティ、サイトの動作において次の観点から重要になります。
AI検索（AIO / GEO）への最適化
GeminiやChatGPTをはじめとする生成AI（LLM）は、Webページを参照する際にHTMLの構造（セマンティクス）をそのまま解析しています。
文脈の区切りごとにsection>タグで囲み、固有のidを割り当てておくと、各ブロックに記述されている内容の境界線がはっきりします。AIが特定の文脈を抽出・引用する際の精度向上にもつながる部分です。
Webアクセシビリティの向上
スクリーンリーダーなどの支援技術を利用するユーザーにとって、見出しと本文のまとまりがsectionやidで整理されている構造は重要です。
支援技術がページ内の構造（ランドマーク）を正しく識別できるようになり、キーボード操作や音声読み上げによるページ内ナビゲーションが機能しやすくなります。
目次プラグインや内部リンクの動作の安定
WordPressの目次プラグインやページ内アンカーリンク機能は、見出し文字列から自動でIDを生成することが多く、日本語見出しのままだとURLがエンコードされて長くなったり、環境によってリンク切れが発生したりするリスクがあります。
あらかじめ手動で半角英数字のidを指定しておけば、URLの文字化けが防げて、リンク構造の崩れを回避できます。
適切なマークアップは、検索エンジンやAIに対する情報伝達をスムーズにするだけでなく、アクセシビリティの確保やサイト動作の安定といった面でも意味を持ちます。
HTML Living Standardの仕様に沿ったセマンティックな記述を行うことは、コンテンツ自体の品質向上に繋がります。
ブロックエディタでの実装手順
WordPressの標準ブロックエディタ（Gutenberg）では、HTMLを直接編集することなく、基本機能だけでsectionタグ化とid属性の付与ができます。
グループブロックでセクション全体を囲む
セクションとしてまとめたい要素（見出し、本文段落、画像、コードブロック、スペースなど）を複数選択して、ブロックツールバーから「グループ」を選択します。
要素をグループ化すると、画面右のメニューの「ブロック」パネルより、グループブロックの確認や細かな設定が行えるようになります。
sectionタグ化とid属性の付与は、「高度な設定」の項目から行います。
HTML要素をsectionタグに変更する
画面右側の「ブロック」設定パネルの「高度な設定」の項目を開いて、「HTML要素」の設定を <section> に変更します。（デフォルトでは <div> になっています）
HTMLアンカーにid名を入力する
同じく「高度な設定」の項目にある「HTMLアンカー」の入力欄を確認します。
こちらに、このセクションの内容を表すidとして、半角英数字でid名を入力します。
（例: object-fit-container など、小文字のハイフン区切り）
あとは記事を保存・更新して完了となります。
◼️ 出力結果の確認
実際の出力結果をブラウザのデベロッパーツールなどでソースコードを見ると、対象のブロック全体が <section id="入力したID名"> で囲まれているのが確認できます。
ページ全体を通して、各トピックのブロックから最後のまとめのブロックまで、しっかりと構造を作るといいでしょう。
まとめ
WordPressの標準機能だけでコードを直接編集することなくHTMLの構造を整えることができ、「グループ化」「sectionへの変更」「id指定」を行うことで、アクセシビリティを高めつつ検索エンジンやAIに記事の文脈を正しく伝える状態を作れます。
こうしたセマンティックなマークアップの積み重ねが、従来のSEOだけでなく、AIOやGEOといったこれからのAI検索環境で参照元として選ばれるためのベースになります。
記事制作の途中でもいいですが、記事公開前の最後にも仕上げとして、HTML構造を確認しておきましょう。
