ワードプレスの有料テンプレートTCD(034)のIZM(イズム)のh1タグをカスタマイズしていきたいと思います。
今年の夏にTCD(034)テンプレートを購入して料理ブログで使用していますが、TCDのテンプレートには独特のSEO設定が施されているという話を聞きました。
あまり気にも留めていなかったのですが、SEO的にも良くないという事ですので、どういう構造になっているのか調べてみる事にしました。
目次
ブログの見出しを表すhタグとは？
ブログで記事を作成していると見出しが必要になります。見出しを付けた方が読者には分かり易いんですね。新聞や雑誌でも見出しは必ずあります。
| h1 | 大見出し | 記事タイトル |
|---|---|---|
| h2 | 中見出し | 記事の見出し |
| h3 | 小見出し | 記事の小見出し |
| h4 | ||
| h5 | ||
| h6 |
基本的にh1タグは記事内に1回だけのしか使用してはいけないとされてきましたが、最近では複数回の使用もOKになってきたみたいですね。
h1はブログの記事タイトルですので今回では「TCDテンプレートIZMの見出しのカスタマイズ【内部SEO】」になります。
次のh2は中見出しですので「ブログの見出しを表すhタグとは？」になります。
h2タグの中で更に小見出しを付けるならば、h3を使います。
順番的には
という風にh2のあとはh2かh3でなければいけません。h2からh4に飛ぶのはNGです。
TCDテンプレートのデフォルトのhタグの配置
ここで問題になってきますのはTCDのテンプレートのhタグの配置です。
TCDのIZMではh1タグがブログのロゴになっており、h2は記事のタイトルに使用されていました。
念のために確かめておきましょう。
ブログのトップページでマウスを右クリックしますと「ソースの表示」という項目がありますので選択します。
ソースの表示で「h1」で検索してみますと＜h1 id=”logo”＞という風になっていました。
h1は大見出しになりますのでGoogleでも最重要視されていると思うのですが、ロゴがh1というはどうなんでしょうか？
TCDシリーズ各テーマではH1タグをロゴに設定しておりますが、SEOを考慮してH1タグを記事の見出しに使いたいというお問い合わせをいただくことがあります。H1タグを記事見出しに使うことがSEOに効果が有るか否かに関しては意見が分かれるところではあります。
厳密な見出しタグのルールによると、H2タグやH3タグの後にH1タグを表示する事は、文章の構造上間違っていると判断されます。これはSEOとして不利になる可能性があります。
TCDのサイトではこのように解説されています。
一方で当サイトの無料テーマ Simplicityのソースを表示させてみますと、＜h1 id=”site-title”＞でした。
TCDテーマのh1タグの変更方法
トップページで他のh1を探しましたがロゴ以外見当たりませんでしたのでこのままh1タグをロゴに使用しても問題ないと思います。
しかし記事ページでのロゴがh1では都合が悪くなってきます。
記事タイトル(大見出し)がh2になっていますので中見出しがh3からという事になります。この記事タイトルをh1に変更していきますとブログのロゴとh1が2つ存在してしまいます。
なので、記事ページのh1のみを変更していきます。カスタマイズは子テーマで行います。失敗してもファイルを削除すればもとに戻せます。子テーマの作り方はこちら
・header-logo.php
・single.php
header-logo.php
変更前
1 2 3 4 5 6 7 8 9 10 | 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"; } } |
変更後
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | if($logo){ echo "<div id='logo_image'>\n"; if(is_home()||is_front_page()){ echo '<h1 id="logo"><a href=" ' . $url . '/" title="' . $title . '" data-label="' . $title . '"><img src="' . $logo['url'] . '?' . time() . '" alt="' . $title . '" title="' . $title . '" /></a></h1>' . "\n"; }else{ 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"; if(is_home()||is_front_page()){ echo '<h1 id="logo"><a href="' . $url . '/">' . $title . "</a></h1>\n"; }else{ echo '<div id="logo"><a href="' . $url . '/">' . $title . "</a></div>\n"; } echo "</div>\n"; } } |
single.php
変更前
1 | <h2 id="post_title"><?php the_title(); ?></h2> |
変更後
1 | <h1 id="post_title"><?php the_title(); ?></h1> |
以上で変更完了です。
しかし変更を加えても全く変化はありませんでした。試行錯誤を繰り返しましたが駄目でした。
仕方なく子テーマの変更を諦めて直接親テーマをいじりましたところようやく変更されました。
トップページのみロゴがh1でその他のページではdivになるように変更しました。これで記事ページにh1が重複しなくなりました。
投稿ページではこのようにh1➝h2➝h3と順序よく並んでいますね。
まとめ
今回はWordPressのTCDテンプレートの見出しタグをカスタマイズしていきました。
今までは投稿ページのロゴがh1に。記事タイトルがh2。記事の見出しがh3に充てられていました。ロゴをdivに変更して記事タイトルをh1に、見出しをh2に変更する事でseo的にも良い影響が出てくると思います。
| 今回での変更点のおさらい | |
|---|---|
| 1 | トップページ以外(投稿・アーカイブ・カテゴリ)のロゴをh1からdivに変更。 |
| 2 | 記事の見出しをh2からh1に変更。 |
なお注意点としては、親テーマを直接カスタマイズした事です。子テーマを変更するだけでは反映されませんでした。
注:カスタマイズは自己責任でお願いします。
