TCD は SEO に弱いのか? H タグの使い方と修正方法

ブログ運営と改善

TCD は SEO に弱いのか? H タグの使い方と修正方法

この記事は約 9 分で読めます。

ユウキです。

「 TCD のテーマって SEO 対策で不利って聞いたけど大丈夫?」

この噂はネット上で割と多く見かけますが、あなたが TCD のテーマを検討しているなら気になりますよね。

なぜ SEO に弱いと言われているのか。理由は H タグの構造にあるようです。

先に結論だけ言うと、TCD「Be」などの最新テーマは既に修正済みですので利用されている方はご安心ください。

TCD テーマの見出し装飾をカスタマイズされたい方はこちらの記事を参考にどうぞ。

最新テーマでは修正されているとはいえ、過去に販売されたテーマや、当ブログで利用している「MAG」など影響するものはあります。

ですが、正しく修正と設定さえすれば構造の問題は解決しますし、SEO 対策に有効なモバイルフレンドリーへの対応も、Google のウェブマスター向け検査ツール Lighthouse にて、モバイル表示スコア 90 点以上をアベレージで出せるモバイルフレンドリーなテーマですから、気にする必要はありません。(画像は2020年5月18日時点の最大値)

トップページの Lighthouse パフォーマンススコア 97

個人的な使用感は Google 検索で上位表示できていることや、デザイン性と SEO 効果の両面で優れた印象から、TCD テーマを使うメリットがあると感じています。

今回の本題、過去に販売されていた TCD「MAG」の H1 ロゴ修正方法について詳しく解説していきます。

H1 タグの構造が問題?

H1タグの構造が問題?

TCD のテーマで H1 タグが問題と議論されている理由は、主見出しである H1 タグがブログのロゴタイトルだからです。

実際に公式の MAG デモサイトのソースコードを確認してみると、

実際に公式のMAGデモサイトのソースコードを確認してみると

ロゴに H1 タグが使用されているのが確認できますね。(クリックで画像拡大)

ロゴにH1タグが使用されている

H タグの正しい使い方

H タグ(見出し)は基本的に階層にする必要があり、下の画像のように H1 → H2 → H3 のように順に使うことを推奨されています。

Hタグの正しい使い方1

見出しの繰り返しや重複については下の画像のように【中見出し】→【小見出し】の構造にします。

Hタグの正しい使い方2

なぜ H タグを重要視するのか?

Googleのジョン・ミューラー氏は H タグについて以下のように言及しています。

Googleは検索エンジンにおいて見出しを使用します。 しかし、ページ上のコンテンツをよりよく理解するために使用します。

H1、H2、H3、見出しをどのように並べればいいのか、そしてコンテンツはどうあるべきなのか、私の観点からすると、それは実際には関係ありません。

引用元:MARKETIMESの記事 Googleウェブマスターズ英語版オフィスアワーより

Google がページを理解するために見出しを使用していることは読み取れますね。

別の記事も確認すると、見出しの使い方が検索順位に大きな影響を与えているとは言えないかもしれないけど、

検索エンジンがよりよく理解して、ユーザーへ適切にコンテンツを配信するためには重要であると捉えられます。

h1タグ、h2タグ、h◯タグの順番はグーグルにとって重要か?重要ではない。でもユーザビリティやアクセシビリティにとっては重要だ。なのにどうして修正しないのか?

「検索ランキングに直接影響するものだけを改善すればいい」という考え方は、本当に憎むべきものだと思う。

引用元:Web担当者Forumの記事 元グーグル社員 ペドロ・ディアス氏のツイートより

TCD のテーマで、H1 タグがロゴに使われていることで起きる問題は、各ページのタイトルの重要度が薄まってしまったり、主見出しが重複してしまうことによって、Google は「何が重要なのか」理解しづらくなることです。

TCD 公式サイトでロゴに H1 タグを使用している理由について、以下のように回答されています。(2016年6月17日)

TCDシリーズ各テーマではH1タグをロゴに設定しておりますが、SEOを考慮してH1タグを記事の見出しに使いたいというお問い合わせをいただくことがあります。H1タグを記事見出しに使うことがSEOに効果が有るか否かに関しては意見が分かれるところではあります。

厳密な見出しタグのルールによると、H2タグやH3タグの後にH1タグを表示する事は、文章の構造上間違っていると判断されます。これはSEOとして不利になる可能性があります。

弊社テーマでは、ロゴよりも前に文章や見出しがないことから、文章構造ミスを生じる可能性を最小限にするために、H1タグをロゴに設定するという仕様としています。私たちは、H1タグを不自然な形で表示するのではなく、デザインに沿った自然な表示方法を選択することが、長期的に見て最も有効なSEOであると考えています。
※SEOに関しては、あくまでも弊社としての考え方であり、その効果を約束するものではありません。

引用元:ワードプレステーマTCD | WordPressのテーマ・カスタマイズ情報サイトより

上記回答から既に3年半以上も経過していますし、最新のテーマでは H タグ構造を修正されていましたので、SEO 対策として重要であると捉えるべきですよね。

H タグの使い方を配慮すると共に、主見出し(記事タイトル)に重要なキーワードを含めるのは、検索エンジンとユーザーへ適切に情報を伝えるためなので、あなたがこれからブログを始める段階、もしくは始めて間もないのであれば、しっかりと踏まえておくべきです。

TCD テーマ MAG の H タグを修正する

ここからは「MAG」のテーマファイルを編集して、ロゴの <h1> とディスクリプションの <h2> を変更する方法について記載します。

必要な編集は以下の9ヶ所です。

  • functions/header-logo.php
  • テーマヘッダー (header.php)
  • メインインデックスのテンプレート (index.php)
  • 個別投稿 (single.php)
  • 個別投稿ページ (page.php)
  • page/template1~4.php

順に説明していくので、変更箇所を修正、もしくはコピー&ペーストしてください。

テーマファイルを変更するので、念のためバックアップを取ってください。

サイトロゴの H1 を最適化する

インストールした状態の TCD「MAG」は、全てのページでサイトロゴ(ブログのタイトル)が <h1> になっています。

ここではトップページのみ、このブログで言うと https://blog-de-affili.com/ のページだけ <h1> で表示するように変更します。

【functions】→【header-logo.php】に移動して、画像の箇所で 7 ~ 25 行目あたりの記述を以下のコードに書き換えます。

トップページのみサイトロゴをH1になるように変更する


/**
 * フロントページにロゴを表示する
 */
function the_dp_logo(){
  $logo = dp_logo_to_display();
  $option = get_desing_plus_option();
  $title = get_bloginfo('name');
  $tagline = get_bloginfo('description');
  $url = home_url();

    if(is_home() || is_front_page() || is_category()){

  if($logo){
    echo "<div id='logo_image'>\n";
    echo '<h1 id="logo"><a href=" ' . $url . '/" title="' . $title . '" data-label="' . $title . '"><img src="' . $logo['url'] . '?' . time() . '" alt="' . $title . '" title="' . $title . '" /></a></h1>' . "\n";
    echo "</div>\n";
  } else {
    echo "<div id='logo_text'>\n";
    echo '<h1 id="logo"><a href="' . $url . '/">' . $title . "</a></h1>\n";
    echo "</div>\n";
  }

  }else{

  if($logo){
    echo "<div id='logo_image'>\n";
    echo '<div id="logo"><a href=" ' . $url . '/" title="' . $title . '" data-label="' . $title . '"><img src="' . $logo['url'] . '?' . time() . '" alt="' . $title . '" title="' . $title . '" /></a></div>' . "\n";
    echo "</div>\n";
  } else {
    echo "<div id='logo_text'>\n";
    echo '<div id="logo"><a href="' . $url . '/">' . $title . "</a></div>\n";
    echo "</div>\n";
  }
}
}

ディスクリプションの H2 を div に変更する

サイトロゴ下のディスクリプション(キャッチコピー)が <h2> になっているため、<h2> を <div> に変更して階層を修正します。

テーマヘッダー (header.php)に移動して、画像の箇所で 57 行目あたりの記述を以下のコードに書き換えます。

【Ctrl + F】で検索機能が使えるので、該当箇所を探す時間短縮になりますよ。

ディスクリプションのH2タグをdivに変更する


<div id="site_description"><?php bloginfo('description'); ?></div>

トップページの投稿見出しを H3 から H2 に変更する

トップページに表示されている各投稿の見出しは <h3> が設定されています。

ブログタイトル下の階層表示を最適化するため、 <h2> へ変更しましょう。

メインインデックスのテンプレート (index.php)に移動して、画像の箇所で 15 ~ 17 行目あたりの記述を以下のコードに書き換えます。

トップページの投稿見出しを H3 から H2 に変更する


<h2 class="title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php if($i == 1) { the_title(); } else { trim_title(40); }; ?></a></h2>
<?php } else { ?>
<h2 class="title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php if($i == 1) { the_title(); } else { trim_title(50); }; ?></a></h2>

投稿ページタイトルの H2 を H1 に変更する

投稿ページのタイトルは <h2> が設定されています。

主見出しとして強調するために <h1> へ変更しましょう。

個別投稿 (single.php)に移動して、画像の箇所で 22 行目あたりの記述を以下のコードに書き換えます。

投稿ページタイトルの H2 を H1 に変更する


<h1 id="post_title"><?php the_title(); ?></h1>

固定ページタイトルの H2 を H1 に変更する

固定ページも投稿ページと同様で <h2> が設定されているので、<h1> に変更しましょう。

個別投稿ページ (page.php)に移動して、画像の箇所で 19 行目あたりの記述を以下のコードに書き換えます。

固定ページタイトルの H2 を H1 に変更する


<h1 id="page_title"><?php the_title(); ?></h1>

固定ページテンプレートのタイトルも H1 に変更する

テンプレートのタイトルも同様に <h1> へ変更しましょう。

【page】→【template1~4.php】の各ファイルに移動して、画像の箇所で 5 行目あたりの記述を以下のコードに書き換えます。

固定ページテンプレートのタイトルも H1 に変更する


<h1 id="page_title"><?php the_title(); ?></h1>

補足:MAG のパンくずリストの修正について

サーチコンソールにて、「data-vocabulary.org スキーマのサポートは終了します」と警告が出ている件について、

デザインプラス社のサポートへ問い合わせたところ、「テーマのアップデートにて対応予定」と返答いただいていました。

 

3月2日のアップデート(ver3.2.1)にて修正されているので、未対応の場合はご確認ください。

併せて WordPress テーマのアップデートは、編集したファイルが初期化されてしまう点を踏まえて進められてください。

MAG のパンくずリストがアップデートにて修正対応

まとめ

お疲れ様でした。これで H タグの修正は完了です。

TCD テーマが SEO 対策に不利かもしれないのは、対処すればとくに問題ないということが分かったと思います。

H タグの使い方と、TCD「MAG」の H タグ修正方法について解説しましたが、構造自体の最適化が重要なのではなく、本質は Google を通じてユーザーに価値あるコンテンツを届けるのが重要であること。

今回の記事を通じて、SEO について理解を深めるきっかけになれば幸いです。

運営しているブログの検索順位が上がらず悩まれていれば、初歩的ですがプラグインの確認で改善されるかもしれません。

モバイル表示速度も重要な SEO 対策のひとつなので、気になる方はこちらの記事を参考にどうぞ。

この記事のタイトルとURLをコピーする

関連記事

  1. Autoptimize で CSS を軽量化してモバイル表示速度を高速化

    ブログ運営と改善

    Autoptimize で CSS を軽量化してモバイル表示速度を高速化

    ユウキです。今回は、Autoptimize を使ってコードの最適化…

  2. TCD「Be」のプロフィールを「MAG」風にカスタマイズする方法

    ブログ運営と改善

    TCD「Be」のプロフィールを「MAG」風にカスタマイズする方法

    ユウキです。TCD「Be」のウィジェットに設置できるオリジナルのプ…

  3. Lighthouse で JavaScript のセキュリティ脆弱性が検出された際の対処法

    ブログ運営と改善

    Includes front-end JavaScript libraries with known…

    ユウキです。モバイル表示速度を改善するために Lighthouse…

  4. Contact Form 7 の設定とカスタマイズを解説

    ブログ運営と改善

    Contact Form 7 の設定とカスタマイズを解説

    ユウキです。ブログのお問い合わせページはカスタマイズされてますか?…

  5. 画像が重いなら EWWW Image Optimizer で解決

    ブログ運営と改善

    画像が重くて表示が遅いなら EWWW Image Optimizer で解決

    ユウキです。サイト表示速度が遅い場合、画像が重いことが原因の可能性…

  6. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin

    ブログ運営と改善

    WordPress のセキュリティ対策をするなら SiteGuard WP Plugin

    ユウキです。WordPress のセキュリティ対策ってされています…

管理人
Blog de Affili の管理人ユウキ

ユウキと申します。

経歴は飲食サービス業のマネージャー、プロップトレーダー、オンラインサロン講師などをしていましたが、組織や人間関係にうんざりして、やりたくないことを捨てました。

ブログアフィリエイトを始めたばかりの頃は 1 年で利益 8000 円。(しょぼ笑)

その後、システム構築やマーケティングを学んで、 3 ヶ月で作った仕組みから 698 万円の売り上げを達成しました。

現在は個人向けにオウンドメディア構築やウェブマーケティングをコンサルしています。

稼いでも時間や人間関係に縛られていたらしんどいだけ。ブログでそこそこ稼いで、ゆったり自分らしく暮らしましょう。

最近の記事
  1. WordPress の目次デザインをおしゃれにカスタマイズ
  2. WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決
  3. Contact Form 7 の設定とカスタマイズを解説
  4. robots.txt is not valid 4 errors found の解決方法
  5. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin
惹きつけるブログはデザインから生まれる
WordPress テーマ Be(TCD076)のレビュー
PAGE TOP