【Blogger&QooQ】トップページやラベル一覧ページのみヘッダーロゴ画像をh1タグで囲む

Bloggerではヘッダーのサイト名をテキストからロゴ画像に変更することができます。しかしQooQというテーマを使っている場合にその設定をすると、トップページやアーカイブページからh1タグがなくなってしまいます。

現在はh1タグやdescriptionよりもコンテンツの方が大事で、h1タグが無くてもSEO的に支障は無いという意見もありますが、h1タグが無いのにh2タグがあるのは構造的にわかりにくいので、ロゴ画像をh1タグで囲みたいと思います。

テンプレートファイルの修正は必ずバックアップを取ってから行ってください。

テーマのHTMLを編集する方法

「テーマ」→「カスタマイズ」ボタンの右側にある「▼」をクリックして「HTMLを編集」に移動します。

ページ種別を判断する方法

全てのページのヘッダーロゴをh1で囲んでしまうと、各投稿ページや固定ページでは1ページにh1タグが2つになってしまいます。なので、トップページや一覧ページかどうかの条件分岐を入れる必要があります。

Googleのbotにとってはh1タグが複数あっても問題無いそうですが、サイトタイトルよりも記事タイトルの方がより重要な情報になりますので、各投稿ページでヘッダーロゴをh1に指定するのは控えたいと思います。

トップ・検索結果ページを判断する方法

▼コードはこちら

<b:if cond='data:blog.pageType == "index"'>
    トップページ/ラベル毎の一覧ページ/検索結果ページの処理
<b:else/>
    その他のページの処理
</b:if>

トップページのみを判断する方法

pageType属性ではトップページのみを判断することはできません。検索結果ページなどを含まずトップページのみの処理を入れたい場合は、次の条件分岐を使うと良いそうです。

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    トップページの処理
</b:if>

年月アーカイブを判断する方法

当サイトでは年月アーカイブは使っておらず、検索エンジンもブロックしているのでh1は設定していないですが、年月アーカイブにも設定したい場合はpageTypeがarchiveかどうかを判断する条件文を使います。

<b:if cond='data:blog.pageType == "archive"'>
	年月アーカイブページの処理
</b:if>

対象のウィジェットを探す方法

HTML編集画面の右上にある「ウィジェットに移動」ボタンをクリックし、表示されたリストから「Header」を選択します。

▼変更前コード

<a expr:href='data:blog.homepageUrl'>
    <img expr:alt='data:title' expr:src='data:sourceUrl' id='header-img'/>
</a>

▼変更後コード

<a expr:href='data:blog.homepageUrl'>
    <b:if cond='data:blog.pageType == "index"'>
        <h1><img expr:alt='data:title' expr:src='data:sourceUrl' id='header-img'/></h1>
    <b:else/>
        <img expr:alt='data:title' expr:src='data:sourceUrl' id='header-img'/>
    </b:if>
</a>

これで「トップページ・ラベル毎の一覧ページ・検索結果ページ」のヘッダーロゴ画像にh1タグが挿入されるようになります。

まとめ

BloggerのテンプレートQooQで、トップページや検索結果ページのヘッダーロゴ画像をh1タグで囲む方法を紹介しました。

最後まで読んでいただきありがとうございました。