こんにちは、mongomeです。
ブログを書き始めてから早くも1年が経ちました。WordPressを使い始めたのが2015年の8月末、それから今年の5月まではフリーのテンプレートであるStinger5を使用していました。
今回は、stinger5に代わって5月から使っているテンプレート「TCD CORE(tcd027)」のタグをカスタマイズする方法をご紹介します(オリジナルでも十二分に良いテンプレートですので、修正は自己責任でお願いします)。
気分転換にテーマを変えてみました
TCDのCOREに変えた理由は有料のテーマを使ってみたかったという好奇心だけです(WordPressのテーマをStinger5からCORE(tcd027)に移行してみた)。stinger5に特に不満はありませんでした。
それでも、さすがは有料(確か1万円以上)。カスタマイズ無しの状態でも十分過ぎるくらい見栄えがよくなり、テンプレートを購入した直後は、「サイトを運営している」感にどっぷり浸ることができました。
ただ、1つだけ落とし穴が。。
デザイン100%で選んだテンプレートだったため、PHPとCSS内にSEOの観点から修正が必要な箇所がいくつかありました。
h1タグとh2タグを変更する理由
一番驚いたのはタグの配置。最近のサイトやブログでは、記事のタイトルはh1タグ、見出しの大項目がh2タグとなっていることが多い。これは、h1タグとh2タグがGoogleで検索されるキーワードの対象となっているからです。
それがtcd COREの場合、h1タグはブログのロゴに使われており、記事タイトルにh2タグが使われています。そうなると、見出しの大項目にはh3やh4タグが使われます(タグは上から下へ、階層的に使用することをGoogleが推奨しているため)。
ここで問題なのが、h3やh4タグはGoogleのキーワードでは拾われないと言われていることです。さらに、ブログのロゴという、ほとんど検索されないキーワードにh1タグが使われているのももったいない。
そこで、ロゴはタグ無しにして、記事タイトルがh1タグになるようphpファイルを書き換えました。
single.phpファイルの編集
記事タイトルをh1に変更するには、single.phpというファイルを編集します。初めに、WordPressの編集画面の左タブにある[外観]>[テーマの編集]へ移動します。
右側にテンプレートファイルの一覧が表示されると思います。その中にあるsingle.phpを開きます(似たファイルが沢山あるので、間違えないように)。
“title”で検索(CTL+F or command+f)すると、次の項目が表示されます。
画面は修正後ですが、デフォルトではここがh2タグになっていました。これを修正してh1タグに。
header-logo.phpファイルの編集
つづいて、ブログロゴに使われているh1タグを外します。h1タグが複数あってもマイナスにはならないらしいのですが、ブログロゴと記事タイトルが並列というのも気持ち悪いので、私は変えました。
header-logo.phpファイルの中にあるh1タグを検索してみつけます。
“logo_text”
“logo_image”
の2つがh1タグで囲まれているので、これをdivに書き換えます。
非常に簡単ですね。修正は以上で終了です。
まとめ
COREテンプレートのQAサイトには、なぜH1タグをロゴに使うのかという質問も掲載されています。
TCDシリーズご愛用者様からサポート窓口によくいただくお問合せ(その2)
TCDでは、この配置が長期的にみてSEOに有効だと考えているようです。
ただ、SEOについて100%の回答は誰も持っていないので、自分が信じる方法を採用するしかありません。私はタイトルをh1に変えましたが、それが吉とでるか凶とでるかは分かりません。
皆さんも、せっかくの自分のブログなので、好きなやり方でカスタマイズしてみるといいですよ。