サイドバーやヘッダーに理想的なhタグを設定しよう【THE THORを使って解説】

  • 2020年4月21日
  • 2020年4月21日
  • wordpress
サイドバーやヘッダーに理想的なhタグを設定しよう【THE THORを使って解説】
サイドバーやヘッダーのhタグって何を使うのが理想的なの?

この記事にたどり着いた人はhタグがSEOで重要なのはご存じの通りと思います

本文のhタグには気を使っていてもサイドバーやヘッダー等のナビゲーション部分のhタグはどうだろうか、ワードプレスではサイドバーのメニュータイトル等に自動的にhタグが施されています。

この記事ではサイドバーやヘッダー等、本文以外のhタグを自分の理想通りにカスタマイズする方法をテーマ「THE THOR」を使って解説します。

この記事ではWordPressのPHPを直接カスタマイズします。編集前に必ずバックアップを取るようにしてください。
お使いのテーマによってはデザインが崩れる等不具合が発生する可能性があります。動作を保証はできませんが、お問合せを頂ければ解決方法を一緒に模索していきますので気軽にご連絡ください。

THE THORのhタグの使われ方

TOPページのhタグ配置位置

それではTOPページと記事ページのhタグはどうなっているのか画像を見てみましょう。赤線で囲っている部分がh2タグ、黄色で囲われている部分がh3タグです

THE THOR TOPページhタグ位置

如何ですか?意外なとこにh2タグが使われていますね。

HTMLからhタグだけ摘出して並び順を確認してみます。ラッコツールズさんの「見出し摘出」が確認に非常に便利です

→外部リンク:ラッコツールズhタグ確認

ラッコツールズ見出し摘出

サイトのタイトルが「h1」に使われています、その次にヘッダーメニュー部分に「キーワード」「カテゴリー」「タグ」が「h3」として続いています。ヘッダーメニューの見出しです。

ヘッダーメニュー見出し

その下にカルーセルスライダーやTOPスライダーのタイトルがh2タグとしてピックアップへと続いていきます。

少しh2が多すぎますね。それに、h1の次にh3が配置され「タグ」や「カテゴリー」等サイトの趣旨とマッチしていないキーワードで構成されているのもよろしく思いません

変更予定を各部位毎にまとめておきます。

  1. メニューのh3「タグ」「キーワード」「カテゴリー」→これらは「div」に変更
  2. カルーセルスライダーのページタイトル「h2」→「h3」へ変更
  3. PICKUPの「h2」→「div」に変更
  4. ピックアップ記事「h3」→「h2」へ変更
  5. 各記事のタイトル「h2」→「h3」へ変更
  6. サイドバーメニュ「h2」→「h4」へ変更
  7. フッタータイトル「h2」→「h4」へ変更

記事ページのhタグ配置位置

続いて記事ページを見ていきます。本文以外のhタグを抜き出しています。

記事ページhタグ配置位置

TOPページではサイトタイトルがh1となっていましたが、記事ページでは記事毎にh1が設定できます。この記事では「テスト」が「h1」タグですね。

メニューやサイドバー、フッターのナビゲーションに関してはTOPページと同様のhタグとなっています。

記事内では前の記事や次の記事、関連記事等に「h」タグが使われ「コメントを書く」にも「h2」タグが使用されています。

記事ページも気になる点がいくつかありますので、このように見出しを変更したいと思います。

  1. ナビゲーションに関してはTOPページと同様
  2. 「Prev」「Next」の「h3」→div
  3. 関連する記事の「h2」→「h3」
  4. 関連する記事タイトルの「h3」→「div」
  5. コメントを書くの「h2」→「div」
  6. 「カテゴリー名+最新記事」の「h2」→「h3」
  7. 上記の各タイトル名「h2」→「div」

カテゴリーページやタグページに関してはカテゴリー名が「h1」記事タイトルに「h2」が使われていればOKです。THE THORではそのように設定されていますので、変更はなしとします。

PHPを編集してhタグを書き換える

WordPressのPHPをカスタマイズしていきます。必ずバックアップを取っておきましょう
それではテーマ「THE THOR」のhタグ出力をカスタマイズしていきます。
他のテーマを使用の方も凡そ同じ方法でhタグの編集は可能となっておりますが、編集するPHPファイル名等は異なる場合がございます。動作は保証できませんので、ご了承ください。
まずは、ダッシュボード外観 > テーマエディターより親テーマを選択してください。
または、レンタルサーバー会社にアクセスしてファイルマネージャーより直接PHPを編集する事も可能です。(一括置換ができる為、経験者はコチラのほうがおススメです。)

サイドバー等のウィジェットエリアのhタグをカスタマイズ

THE THORでは外観 > ウィジェットにて設置できるウィジェットのタイトルが全て「h2」となります。サイドバー及び追従サイドバーを「h4」へと書き換え、その他の項目は「div」へと書き前ます。

inc > widget > setting.phpを開きます。

register_sidebar( array(
‘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コードを探します。

<?php if(get_option(‘fit_conFootCta_title’)):?><h2 class=”heading heading-commonCtr u-white”><?php echo get_option(‘fit_conFootCta_title’) ?></h2><?php endif; ?>

先ほどと同じように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」です。

カスタマイズ前
THE THOR TOPページhタグ位置
 
カスタマイズ後
TOPページhタグ配置位置カスタマイズ後
記事ページはコチラです。
カスタマイズ前
記事ページhタグ配置位置

カスタマイズ後
記事ページhタグ配置位置カスタマイズ後

まとめ

この記事ではサイドバーやフッター等本文以外のhタグの設定をカスタマイズする方法を解説しました。

SEOにそこまで深く影響はしないと思われる本文以外のhタグですが、h2タグだらけというのはやはり気になる!納得いくまでとことんカスタマイズしましょう。

>プログラミング情報サイト「In-Output」

プログラミング情報サイト「In-Output」

当サイトではプログラミング言語の情報を発信しています。
HTMLやCSSのマークアップ言語の学習方法や解説、WordPressでのサイト開設方法、python等のプログラミング言語を使用して日頃の作業の効率化等、皆様のお役に立てるサイトを目指しています。

CTR IMG