投稿ページに「読むまで〇分」を自動表示する方法

この記事では、投稿ページに「読むまで〇分」を表示する方法を解説します。

ただし投稿の先頭に「読むまで〇分」を表示すると、SEOやインデックスに悪影響を及ぼす可能性があります。本記事では理由と安全策を解説します。

1 なぜインデックスに悪影響を及ぼすのか？

• 単一投稿ページのページ先頭に共通文言（例：読むまで約5分）が出るため、Googleが主要コンテンツとして誤認する可能性があります。
• さらに、アーカイブやカテゴリー、トップページに表示すると、全ページで同じ文言が先頭に出るため、重複コンテンツとして扱われ、インデックスされにくくなる場合があります。

2 安全に表示するための実装のポイント

• 単一投稿ページ（is_singular('post')）だけに表示され、アーカイブやカテゴリー、トップページには影響しませんので、検索エンジンインデックスへの影響を最小化。
• Google が主要コンテンツとして誤認するリスクを低減するためにclassに（aria-hidden="true"）を付与。

3 functions.php にコードを追加

//-------------------------------------------
// 単一投稿ページのみ「読む時間」を計算して返す
//-------------------------------------------
function reading_time_estimate() {
    global $post;
    $content = strip_tags($post->post_content); // HTMLタグを除去
    $words = mb_strlen($content, 'UTF-8'); // 文字数を取得
    $reading_speed = 400; // 1分あたりの文字数
    $minutes = ceil($words / $reading_speed); // 分単位に切り上げ
    return $minutes;
}

// 投稿本文の前に挿入
add_filter('the_content', 'prepend_reading_time_to_content');
function prepend_reading_time_to_content($content) {
    if(is_singular('post')) {
        $minutes = reading_time_estimate();
        $time_html = '<div class="reading-time" aria-hidden="true">読むまで約 ' . esc_html($minutes) . ' 分</div>';
        return $time_html . $content;
    }
    return $content;
}
    

4 汎用CSS

/* -------------------------
 *  読むまで〇分の装飾 */
 *---------------------------- */

.reading-time {
    display: block;      /* ブロック要素として表示 */
    font-size: 0.9em;    /* 親要素に対して文字サイズを90%に縮小 */
    color: #555;         /* 文字色をやや濃いグレーに設定 */
    margin-bottom: 0.5em; /* 下に余白を付けて本文との間隔を確保 */
}
    

5 代用プラグイン

• Reading Time WP – 投稿ごとの読む時間を自動計算して表示
• Estimated Reading Time – Gutenbergブロック対応

6 まとめ

• 単一投稿ページのみ「読むまで〇分」を表示
• アーカイブやカテゴリーには表示しないことでインデックス影響を防止
• CSSで見た目を自由に調整可能-class「.reading-time」