For IT Specialist

WordPress URLをX（旧Twitter）プレビュー表示させたい

概要

WordPressのテーマの多くは標準ではX（旧Twitter）にURLを入力してもプレビュー画像やタイトルが表示されない事が多いです。SEO対策用のプラグインをインストールする方法もありますが、ゴミを増やしたくないという場合に使える方法があるのでメモがてら投稿します。

テーマのFunctions.phpへ直接次のコードを追加するのみです。これは投稿ページを想定している内容です。

// テーマの functions.php に追加
add_action( 'wp_head', 'itlibero_output_social_meta', 5 );

function itlibero_output_social_meta() {
    if ( is_singular() ) {
        global $post;

        // タイトル
        $title = trim( wp_strip_all_tags( get_the_title( $post ), true ) );

        // 説明文（抜粋 or 本文から手短に）
        if ( has_excerpt( $post ) ) {
            $description = get_the_excerpt( $post );
        } else {
            $description = wp_trim_words( wp_strip_all_tags( $post->post_content ), 40 );
        }
        $description = esc_attr( $description );

        // URL
        $url = get_permalink( $post );

        // 画像（アイキャッチ優先、なければデフォルト画像）
        if ( has_post_thumbnail( $post ) ) {
            $image = get_the_post_thumbnail_url( $post, 'full' );
        } else {
            // 自分のサイト内に置いたデフォルト画像
            $image = home_url( '/wp-content/uploads/default-og-image.jpg' );
        }

        // サイト名
        $site_name = get_bloginfo( 'name' );

        ?>
        <!-- Simple Open Graph / Twitter Card -->
        <meta property="og:type" content="article" />
        <meta property="og:title" content="<?php echo esc_attr( $title ); ?>" />
        <meta property="og:description" content="<?php echo $description; ?>" />
        <meta property="og:url" content="<?php echo esc_url( $url ); ?>" />
        <meta property="og:site_name" content="<?php echo esc_attr( $site_name ); ?>" />
        <meta property="og:image" content="<?php echo esc_url( $image ); ?>" />

        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="<?php echo esc_attr( $title ); ?>" />
        <meta name="twitter:description" content="<?php echo $description; ?>" />
        <meta name="twitter:image" content="<?php echo esc_url( $image ); ?>" />
        <?php
    }
}

ポイント

  • is_singular() で「投稿・固定ページなど個別ページの時だけ」出すようにしています。
  • 説明文は
    • 抜粋があればそれ
    • 無ければ本文40語くらいを切り出し
  • 画像は
    • アイキャッチがあればそれ
    • 無ければ /wp-content/uploads/default-og-image.jpg をデフォルトとして指定
  • summary_large_image を指定しているので、Xでは横長の大きいカードが出ます。

注意

  • テーマ変更時に消える
    → 子テーマに書いておく
  • コードにバグがあると <head> が壊れて表示がおかしくなることもあるので、
    追加したあとにページソースをざっとチェックするのが良いです。