TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法を紹介していきたいと思います。
TCDテーマではh1タグにロゴが適用されており、h2タグは記事のタイトルに使用されていました。これをロゴ⇒DIV、記事タイトル⇒h1に変更していきます。
今年の夏にTCD(034)テンプレートを購入して、ワタシの料理ブログで使用していますが、TCDのテンプレートには独特のSEO設定が施されているという話を聞きました。
あまり気にも留めていなかったのですが、SEO的にも良くないという事なので、どういう構造になっているのか調べてみる事にしました。
目次
ブログの見出しを表すhタグとは？
ブログで記事を作成していると見出しが必要になります。見出しを付けた方が読者には分かり易いんですね。新聞や雑誌でも見出しは必ずあります。
| h1 | 大見出し | 記事タイトル |
|---|---|---|
| h2 | 中見出し | 記事の見出し |
| h3 | 小見出し | 記事の小見出し |
| h4 | ||
| h5 | ||
| h6 |
基本的にh1タグは記事内に1回だけしか使用してはいけないとされてきましたが、最近では複数回の使用もOKになってきたみたいですね。
h1タグはブログの記事タイトルなので、この記事の中では「TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法」になり、h2タグは中見出しなので、「ブログの見出しを表すhタグとは？」になります。
ブログの見出し(Hタグ)の順番
h2タグの中で更に小見出しを付けるならば、h3タグを使います。
という風に、h2タグの直後はh2タグかh3タグでなければなりません。h2タグからh4タグに飛ぶのはNGです。
TCDテンプレートのデフォルトのhタグの配置
ここで問題になってくるのは、TCDのテンプレートのhタグの配置です。
TCDテンプレート『IZM(tcd034)』では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
FTPソフトを起動して、テーマの『izm_tcd034』内の『functions』の中にある『header-logo.php』をローカルにダウンロードします。
TeraPad等のテキストエディターでファイルを開き、以下のコードを書き換えます。
変更前
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"; } } |
ファイルを上書き保存して『IZM(tcd034)』の子テーマにアップロードしてやります。
single.php
こちらも『header-logo.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タグ と順序よく並んでいますね。
まとめ
今回は、TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法を紹介しました。
今までは投稿ページのロゴがh1タグに、記事タイトルがh2タグ、記事の見出しがh3タグに充てられていました。ロゴをdivに変更して記事タイトルをh1タグに、見出しをh2タグに変更する事で、SEO的にも良い影響が出てくると思います。
| 今回での変更点のおさらい | |
|---|---|
| 1 | トップページ以外(投稿・アーカイブ・カテゴリ)のロゴをh1からdivに変更。 |
| 2 | 記事の見出しをh2からh1に変更。 |
注意点として、親テーマを直接カスタマイズした事です。子テーマを変更するだけでは反映されませんでした。
注:カスタマイズは自己責任でお願いします。
