初心者向けWordPressでのOGPタグとTwitterカード設定

OGPタグとは、SNS（Facebook、X（旧Twitter）、LINEなど）でシェアされたときに正しいタイトル・説明・画像を表示させるためのメタタグです。

実際のページに表示されるわけではないので見落としがちですが、シェア時のCTR（クリック率）を左右するので、SEOと同じくらい重要な要素です。

過去の記事でOGP画像の作り方を解説していますが、本記事ではWordPressでOGPタグを設定する方法をまとめます。

プラグインでOGPタグを設定する

簡単に設定をしたいならプラグインを利用するのが手軽です。OGPタグを設置できるプラグインをいくつか紹介します。

All In One SEO

設定項目がとても豊富でカスタマイズ性が高い。

Yoast SEO

直感的で標準的なSEO設定ができる王道のプラグイン。

Rank Math SEO

無料でも高機能でAIサポートや自動化機能も強い次世代型のSEOプラグイン。

SEO SIMPLE PACK

人気テーマSwellやArkheを開発しているRyoさんによるプラグイン。文字通りシンプル。必要最低限の設定のみでいい人にはピッタリです。

プラグインなしでOGPタグを設定する

OGPで出力する情報は以下の内容です。

<meta property="og:type" content="ページのタイプ">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="記事の説明文">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="画像のURL">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Twitterユーザー名">
<meta name="twitter:title" content="サイト名" />
<meta name="twitter:description" content="記事の説明文" />
<meta name="twitter:image" content="画像のURL" />

functions.phpを編集

headタグ内にOGPタグを動的に出力するため、functions.phpに以下のコードを追加します。

function mytheme_add_ogp() {
    if (is_admin()) return;

    // 初期値設定
    $ogp_title       = get_bloginfo('name');
    $ogp_description = get_bloginfo('description');
    $ogp_url         = home_url();
    $ogp_image       = get_template_directory_uri() . '/assets/img/ogp.jpg'; // デフォルトOGP画像URL
    $twitter_card    = 'summary_large_image'; // Twitterカードの種類
    $twitter_site    = '@Twitterユーザー名'; // Twitterのユーザー名を入力

    // 投稿・固定ページの場合は個別情報に切り替え
    if (is_singular()) {
        global $post;
        setup_postdata($post);

        $ogp_title = get_the_title();
        $ogp_description = has_excerpt() ? get_the_excerpt() : mb_substr(strip_tags($post->post_content), 0, 100);
        $ogp_url = get_permalink();

        if (has_post_thumbnail()) {
            $ogp_image = get_the_post_thumbnail_url($post->ID, 'full');
        }

        wp_reset_postdata();
    }

    // 出力
    echo "\n";
    echo '<meta property="og:type" content="' . ((is_front_page() || is_home()) ? 'website' : 'article') . '">' . "\n";
    echo '<meta property="og:title" content="' . esc_attr($ogp_title) . '">' . "\n";
    echo '<meta property="og:description" content="' . esc_attr($ogp_description) . '">' . "\n";
    echo '<meta property="og:url" content="' . esc_url($ogp_url) . '">' . "\n";
    echo '<meta property="og:image" content="' . esc_url($ogp_image) . '">' . "\n";
    echo '<meta property="og:site_name" content="' . esc_attr(get_bloginfo('name')) . '">' . "\n";
    echo '<meta property="og:locale" content="ja_JP">' . "\n";

    // Twitterカード用
    echo '<meta name="twitter:card" content="' . esc_attr($twitter_card) . '">' . "\n";
    echo '<meta name="twitter:site" content="' . esc_attr($twitter_site) . '">' . "\n";
    echo '<meta name="twitter:title" content="' . esc_attr($ogp_title) . '">' . "\n";
    echo '<meta name="twitter:description" content="' . esc_attr($ogp_description) . '">' . "\n";
    echo '<meta name="twitter:image" content="' . esc_url($ogp_image) . '">' . "\n";
    echo "\n";
}
add_action('wp_head', 'mytheme_add_ogp');

コードのポイント

• 初期値設定の$ogp_imageのURLはテーマ内のimageフォルダを想定しています。
  アイキャッチが登録されている場合はアイキャッチを$ogp_imageに設定し、アイキャッチ画像がない場合、デフォルト画像をOGP画像に設定します。
• Twitterカードの種類の初期値はsummary_large_imageにしています。
• Twitterアカウントを初期値に設定します。
• トップページはog:type="website"、それ以外のページはog:type="article"になります。

以上、WordPressでOGPタグを出力するためのプラグインと、プラグインを使わずに設定する方法を紹介しました。

OGPタグとTwitterカードを設定しないと、SNSでシェアされた際に意図しない形で表示がされてしまうことがあります。これにより、ユーザーがクリックしたくなくなったり、サイトの印象が悪くなったりする可能性も。

OGPタグをしっかり設定することで、魅力的な表示がされ、SEOやSNSでの拡散効果を最大限に活用できます。プラグインを使った簡単な方法から手動でのカスタマイズまで、自分に合った方法を選んで設定を進めていきましょう！

OGP画像とは？推奨サイズと作成時の注意点、実例も紹介

SNSでコンテンツをシェアする際、最初に目に入るのがOGP画像です。この小さな画像が、ユーザーがコンテンツをクリックするかどうかを左右する重要な要素となります。 …

記事を読む