この記事にたどり着いた人はhタグがSEOで重要なのはご存じの通りと思います。
本文のhタグには気を使っていてもサイドバーやヘッダー等のナビゲーション部分のhタグはどうだろうか、ワードプレスではサイドバーのメニュータイトル等に自動的にhタグが施されています。
この記事ではサイドバーやヘッダー等、本文以外のhタグを自分の理想通りにカスタマイズする方法をテーマ「THE THOR」を使って解説します。
お使いのテーマによってはデザインが崩れる等不具合が発生する可能性があります。動作を保証はできませんが、お問合せを頂ければ解決方法を一緒に模索していきますので気軽にご連絡ください。
THE THORのhタグの使われ方
TOPページのhタグ配置位置
それではTOPページと記事ページのhタグはどうなっているのか画像を見てみましょう。赤線で囲っている部分がh2タグ、黄色で囲われている部分がh3タグです。
如何ですか？意外なとこにh2タグが使われていますね。
HTMLからhタグだけ摘出して並び順を確認してみます。ラッコツールズさんの「見出し摘出」が確認に非常に便利です。
→外部リンク：ラッコツールズhタグ確認
サイトのタイトルが「h1」に使われています、その次にヘッダーメニュー部分に「キーワード」「カテゴリー」「タグ」が「h3」として続いています。ヘッダーメニューの見出しです。
その下にカルーセルスライダーやTOPスライダーのタイトルがh2タグとしてピックアップへと続いていきます。
少しh2が多すぎますね。それに、h1の次にh3が配置され「タグ」や「カテゴリー」等サイトの趣旨とマッチしていないキーワードで構成されているのもよろしく思いません。
変更予定を各部位毎にまとめておきます。
- メニューのh3「タグ」「キーワード」「カテゴリー」→これらは「div」に変更
- カルーセルスライダーのページタイトル「h2」→「h3」へ変更
- PICKUPの「h2」→「div」に変更
- ピックアップ記事「h3」→「h2」へ変更
- 各記事のタイトル「h2」→「h3」へ変更
- サイドバーメニュ「h2」→「h4」へ変更
- フッタータイトル「h2」→「h4」へ変更
記事ページのhタグ配置位置
続いて記事ページを見ていきます。本文以外のhタグを抜き出しています。
TOPページではサイトタイトルがh1となっていましたが、記事ページでは記事毎にh1が設定できます。この記事では「テスト」が「h1」タグですね。
メニューやサイドバー、フッターのナビゲーションに関してはTOPページと同様のhタグとなっています。
記事内では前の記事や次の記事、関連記事等に「h」タグが使われ「コメントを書く」にも「h2」タグが使用されています。
記事ページも気になる点がいくつかありますので、このように見出しを変更したいと思います。
- ナビゲーションに関してはTOPページと同様
- 「Prev」「Next」の「h3」→div
- 関連する記事の「h2」→「h3」
- 関連する記事タイトルの「h3」→「div」
- コメントを書くの「h2」→「div」
- 「カテゴリー名+最新記事」の「h2」→「h3」
- 上記の各タイトル名「h2」→「div」
カテゴリーページやタグページに関してはカテゴリー名が「h1」記事タイトルに「h2」が使われていればOKです。THE THORではそのように設定されていますので、変更はなしとします。
PHPを編集してhタグを書き換える
または、レンタルサーバー会社にアクセスしてファイルマネージャーより直接PHPを編集する事も可能です。（一括置換ができる為、経験者はコチラのほうがおススメです。）
サイドバー等のウィジェットエリアのhタグをカスタマイズ
THE THORでは外観 > ウィジェットにて設置できるウィジェットのタイトルが全て「h2」となります。サイドバー及び追従サイドバーを「h4」へと書き換え、その他の項目は「div」へと書き前ます。
inc > widget > setting.phpを開きます。
‘name’ => ‘サイドバーエリア’,
‘description’ => ‘サイドバーにコンテンツを表示します。’,
‘id’ => ‘sidebar’,
‘before_widget’ => ‘<aside class=”widget widget-side ‘.$frame_side.’ %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h2 class=”heading heading-widget’.$heading_side.'”>’,
‘after_title’ => ‘</h2>’,
));
これがサイドバーを出力しているPHPです。「h2」を「h4」に書き換えればOKです。
フッタータイトルのhタグをカスタマイズ
footer.phpよりフッタータイトルを出力しているPHPコードを探します。
先ほどと同じようにh2をh4に書き換えます。
検索メニューのhタグをカスタマイズ
「searchform-refine.php」より「h3」を全て「div」に書き換えます。
共通エリアのhタグはこれで完成です。
TOPページのhタグをカスタマイズ
TOPページのhタグは「front-page.php」でカスタマイズを行います。
ここでは一括で変更を行わず、一つ一つ注意しながらhタグをカスタマイズしていきましょう。
ここからは、クラス名で検索して該当するコードのhタグを変更していきます。
カルーセルスライダーをカスタマイズ
カルーセルスライダーは「heading-carousel」と検索すれば該当コードが出てきます。「h2」を「h3」に書き換えます。
PICKUPをカスタマイズ
PICKUPは「heading-main」と検索すればコードが出てきますので、「h2」を「div」に変更します。
また、それぞれの記事タイトルは「heading-pickup3」で出てきます。「h3」を「h2」に変更しておきます。
※何故これらの記事タイトルを「h2」に変更するのかというとサイトの趣旨に合わせた記事をPIKUPに掲載する予定だからです。
記事タイトルのhタグをカスタマイズ
メインコンテンツ部分の各記事は「loop.php」で作成され「front-page.php」から呼び出されています。
「loop.php」で「heading-secondary」と検索して「h2」を「h3」へと変更しましょう。
以上で当ページのTOPページのhタグカスタマイズは終了です。ランキングTOP10やカテゴリー毎の最新記事を表示しているなら、それらも全て「h2」になっていますので、クラス名から該当項目を探し出してhタグを変更しましょう。
記事ページのhタグをカスタマイズ
記事ページのカスタマイズは項目ごとによってphpファイルが異なります。
コメントに関するhタグ
「コメントを書く」等を見出しにしたくない場合は「comments.php」のh2を全てdivタグに変更しておきましょう。
Prev Nextのhタグ
Prev/Nextのhタグは「singleamp-prevnext.php」でカスタマイズできます。h3→divに書き換えます。
関連する記事のhタグ
関連する記事のhタグは「single-related.php」で変更できます。
まずは、「関連する記事」という見出しを「h2」から「h3」に変更します。「heading-sub」で検索すれば出てきます。
各記事のタイトルは「h3」→「div」へ書き換えます。「heading-secondary」と検索します。
カテゴリーの最新記事
カテゴリーの最新記事は「single.php」でカスタマイズできます。「heading-main」で検索してh2をh3へ
「heading-tertiary」で検索してh2をdivへ変更します。
hタグがどのように変わったか
hタグのカスタマイズは以上です。それでは画像を並べて比較して確認してみます。
赤枠=「h2」黄枠=「h3」紫枠=「h4」です。
まとめ
この記事ではサイドバーやフッター等本文以外のhタグの設定をカスタマイズする方法を解説しました。
SEOにそこまで深く影響はしないと思われる本文以外のhタグですが、h2タグだらけというのはやはり気になる！納得いくまでとことんカスタマイズしましょう。
