【メモ】フロントページのみ「サイトロゴ」ブロックをH1に変更してみる

解決すべき問題

HTMLでは、1ページにつき1箇所のH1見出しを配置することが強く推奨されています（2箇所以上配置すべきかそうでないかといった問題はしばしば論争となりますが、本記事では問題にしません）。

ただ、フロントページの場合、記事一覧のみが表示されているなどの状況になりやすく、H1見出しがページ内に配置されない状況が発生しやすいです。そのため、意図的にH1タグの含まれたページをフロントページとして作成するなどの対応が必要になります。

サイトのロゴの箇所をH1見出しとして扱うのも1つの方法です。ただ、サイトロゴの箇所は<h1>タグではなく<div>タグなどで囲われている場合が主流のため、大多数の環境では一工夫する必要がございます。

「サイトロゴ」をH1化する対応策

プラグイン「VK Blocks」にて対応する方法

Vektor社が提供しているプラグイン「VK Blocks」では、バージョン v1.119.0より、フロントページのみ、「サイトロゴ」ブロックがH1である旨の設定ができるようになりました。

詳しくは以下のページをご確認くださいませ。

• VK Blocks 1.119.0 でサイトロゴブロックにh1を指定できるようになりました。 | 株式会社ベクトル

対策済みのテーマを使う

例えば、以下のテーマでは、H1タグが記事箇所等に存在しない場合、サイトロゴ箇所がDIVからH1見出しに切り替わるようになっています。

• Xwrite
• SWELL
• Cocoon
• Lightning

上記のようなテーマを利用できるのであれば、そちらを利用するのが手っ取り早いと思います。

functions.php に追記する方法（上級者向け）

上記のような環境・解決方法を取り入れるのが難しいようであれば、以下のようなコードを子テーマの functions.php 等に追記いただくのが手っ取り早いと思います。

/**
 * サイトロゴブロックの出力をトップページとそれ以外で切り替える
 */
add_filter( 'render_block', function( $block_content, $block ) {
    // サイトロゴブロック（core/site-logo）が対象
    if ( 'core/site-logo' === $block['blockName'] ) {
        if ( is_front_page() ) {
            // トップページなら h1 で囲む
            return '<h1>' . $block_content . '</h1>';
        } else {
            // それ以外なら div で囲む
            return '<div>' . $block_content . '</div>';
        }
    }
    return $block_content;
}, 10, 2 );Code language: PHP (php)

/**
 * サイトロゴブロックの出力をトップページとそれ以外で切り替える
 */
add_filter( 'get_custom_logo', function ( $html ) {
    if ( is_front_page() ) {
        // トップページ：ロゴ全体を h1 で囲む
        $html = sprintf(
            '<h1 class="custom-logo-wrapper">%1$s</h1>',
            $html
        );
    } else {
        // それ以外：ロゴ全体を div で囲む
        $html = sprintf(
            '<div class="custom-logo-wrapper">%1$s</div>',
            $html
        );
    }
    return $html;
} );Code language: PHP (php)

補足：運用でのカバーも検討する

サイトロゴの箇所がH1にならなくとも、上記に書いたとおり、記事エディター内にH1見出しを意図的に設置することによっても対応することが可能です。

実際、当ブログのトップページでも、「サイトロゴ」画像ではなく別の箇所をH1見出しとしています。

結局のところ、最後にものを言うのは、運用方針や「どのように組み立てていくか」というところだと思います。既存の事例を参考にしながらも、「どうしたいか」は大切にしたいものでございます。