【カスタマイズ】CORE(tcd027)テンプレートのH1/H2タグの書き換え

こんにちは、mongomeです。

ブログを書き始めてから早くも1年が経ちました。WordPressを使い始めたのが2015年の8月末、それから今年の5月まではフリーのテンプレートであるStinger5を使用していました。

今回は、stinger5に代わって5月から使っているテンプレート「TCD CORE(tcd027)」のタグをカスタマイズする方法をご紹介します(オリジナルでも十二分に良いテンプレートですので、修正は自己責任でお願いします)。

気分転換にテーマを変えてみました

TCDのCOREに変えた理由は有料のテーマを使ってみたかったという好奇心だけです(WordPressのテーマをStinger5からCORE(tcd027)に移行してみた)。stinger5に特に不満はありませんでした。

それでも、さすがは有料(確か1万円以上)。カスタマイズ無しの状態でも十分過ぎるくらい見栄えがよくなり、テンプレートを購入した直後は、「サイトを運営している」感にどっぷり浸ることができました。

ただ、1つだけ落とし穴が。。

デザイン100%で選んだテンプレートだったため、PHPCSS内に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)すると、次の項目が表示されます。

single

画面は修正後ですが、デフォルトではここがh2タグになっていました。これを修正してh1タグに。

header-logo.phpファイルの編集

つづいて、ブログロゴに使われているh1タグを外します。h1タグが複数あってもマイナスにはならないらしいのですが、ブログロゴと記事タイトルが並列というのも気持ち悪いので、私は変えました。

header-logo.phpファイルの中にあるh1タグを検索してみつけます。

logo

“logo_text”
“logo_image”

の2つがh1タグで囲まれているので、これをdivに書き換えます。

非常に簡単ですね。修正は以上で終了です。

まとめ

COREテンプレートのQAサイトには、なぜH1タグをロゴに使うのかという質問も掲載されています。

TCDシリーズご愛用者様からサポート窓口によくいただくお問合せ(その2)

TCDでは、この配置が長期的にみてSEOに有効だと考えているようです。

ただ、SEOについて100%の回答は誰も持っていないので、自分が信じる方法を採用するしかありません。私はタイトルをh1に変えましたが、それが吉とでるか凶とでるかは分かりません。

皆さんも、せっかくの自分のブログなので、好きなやり方でカスタマイズしてみるといいですよ。

5 COMMENTS

たるたるそーす。

投稿主さんもしかして、header logo phpのところなんですけど、黄色の四角でかかっているところの間のもともとh1,h2のところをpタグに変更していますか?じぶんのと見比べると違ったんですが、、

たるたるそーす。

ほかの記事でみたんですが、「pタグにして…」的な内容が書かれてあったのでお聞きしています。返信待ってます

mongome

たるたるそーす。さん
はい、黄色で囲んだ四角の部分は、私が使っていたときはh1/h2になっていました。
そこをdivに変更しました。pタグに変えても問題ないと思いますよ。

たるたるそーす。

ごめんなさい言い方が、悪かったです‍♂️
Header logo phpのその写真では、黄色い四角の一番目から二番目、及び3番目から4番目のpタグがあると思うのですが、そこが本来はh1とh2になっているんですが、これは投稿主さんはpタグに書き換えているというので間違ってませんか?無知ですいません、、

たるたるそーす。

訂正します。1番目から2番目、及び3番目から4番目の間のpタグです、、

コメントを残す

メールアドレスが公開されることはありません。