今回は、WordPressでプラグインを使わずにOGP設定をする方法とサンプルコードを紹介します。

1. OGPとは?

OGPは、共有するページのタイトル・画像・説明などをサービスへ伝えるためのメタデータです。カードの表示方法は共有先にも依存し、設定だけで表示を保証するものではありません。以下のSNS画面は公開当時の例です。

OGPタグを設定した場合

例えば、Facebookでリンクを共有するとき、OGPの情報がカード表示に使われることがあります。画像は公開当時の表示例です。

タイトルや画像があるとリンク先の内容を伝えやすくなります。X(旧Twitter)のカードも同様の目的ですが、OGPそのものと同じ仕様ではありません。

設定なし何も設定していないと…

こちらはTwitterカードの設定をしていない場合です。

設定ありTwitterカードとは

こちらはTwitterカードを設定した公開当時の画面です。現在のXでも同じ見た目になることを保証する例ではありません。

OGP/Twitterカードで設定するべきタグ

はこの記事で重視している設定の目印です。仕様上すべてが必須という意味ではありません。OGPの基本必須項目はog:title・og:type・og:image・og:urlで、og:descriptionなどは任意です。

 <meta property="og:url" content="https://example.com/article" />
 <meta property="og:title" content="記事のタイトル" />
 <meta property="og:type" content="article">
 <meta property="og:description" content="記事の抜粋" />
 <meta property="og:image" content="https://example.com/ogp.jpg" />
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:site" content="@your_account" />

<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<!-- Facebookアプリを使う場合のみ: <meta property="fb:app_id" content="appIDを入力"> -->

↑ 共有先はページのHTMLからこれらの情報を読み取ります。
og:typeは、この例ではトップページと投稿一覧にwebsite、記事・固定ページにarticleを指定します。
twitter:cardは、この例では大きい画像を使うsummary_large_imageを指定します。カードの種類がこれだけという意味ではありません。fb:app_idはFacebookアプリを使う場合の設定例で、OGP共通の必須4項目とは別です。

2. OGPタグが設定されているかどうかを調べる

WordPressのテーマやSEOプラグインがOGPを出力している場合があります。まず自分のページの出力を調べ、既にあるタグへ重ねて追加しないようにしましょう。以下はパソコンで確認する手順です。

手順1:記事ページを開く

記事ページを開く

まず記事ページを開きましょう。どのページでも構いません。

手順2:右クリック

ページ内のどこでも良いので、右クリックします。

手順3:「ページのソースを表示」をクリック

ほとんどのブラウザでは、右クリックしたときのメニューに「ページのソースを表示」というものがあるので、こちらをクリックします。

手順4:「og:」で検索

すると、そのページを構成しているHTMLタグがずらっと表示されます。拒否反応が出てくる方もいるかもしれませんが、グッと耐えてください(笑)

HTMLが表示される

ここで、Ctrl+Fのショートカットを使います(Macなら⌘+F)。表示中のソース内を検索できます。

ogp設定

↑ まずは「og:」と検索してみましょう。<meta property="og:◯◯というようなコードが見つかれば、OGP設定が書かれています(正しいかどうかは別として…)。

「og:」が見つからない場合は、出力されたHTMLとテーマ・プラグインの設定を確認してから、必要な設定を追加します。上のコード画面は公開当時の例で、そこに映るタグすべてを現在の推奨としてコピーするものではありません。

3. WordPressでプラグイン無しでOGP設定をする方法

以下はプラグインを使わず、子テーマのfunctions.phpからタグを出力する例です。対象はトップページ、投稿一覧、記事・固定ページです。投稿一覧を別の固定ページに割り当てた場合も、そのページのURLを使います。カテゴリや検索結果などは対象外です。投稿一覧のページ送りでも一覧の代表URLを出力する例です。

functions.phpにコードを貼付け

子テーマのfunctions.phpへ以下のコードを追加します。先にファイルをバックアップし、元に戻せる状態で試してください。親テーマへ直接追加すると更新で失われる場合があります。既存のPHP開始タグを重ねず、同じ関数を二度追加しないでください。テーマやプラグインが既にOGPを出力している場合は重複させないでください。

functions.php
/*********************
OGPタグ/Xカード設定を出力
*********************/
function my_meta_ogp() {
    if ( ! ( is_front_page() || is_home() || is_singular() ) ) {
        return;
    }

    // 自分のサイトに合わせる3箇所。アプリIDは使う場合だけ指定。
    $default_image = 'https://example.com/path/to/ogp.jpg';
    $twitter_site = '@your_account';
    $facebook_app_id = '';

    $object_id = get_queried_object_id();
    $ogp_title = get_bloginfo( 'name' );
    $ogp_descr = get_bloginfo( 'description' );
    $ogp_url = home_url( '/' );
    $ogp_type = 'website';
    $ogp_img = $default_image;

    if ( is_front_page() ) {
        // 固定フロントページも、サイトのトップとして扱う。
    } elseif ( is_home() ) {
        // 別ページに設定した投稿一覧の代表URL。
        $posts_page_id = (int) get_option( 'page_for_posts' );
        if ( $posts_page_id > 0 ) {
            $ogp_title = get_the_title( $posts_page_id );
            $ogp_url = get_permalink( $posts_page_id );
        }
    } elseif ( is_singular() ) {
        $ogp_title = get_the_title( $object_id );
        $ogp_descr = get_the_excerpt( $object_id );
        $ogp_url = get_permalink( $object_id );
        $ogp_type = 'article';
        if ( has_post_thumbnail( $object_id ) ) {
            $image = wp_get_attachment_image_src( get_post_thumbnail_id( $object_id ), 'full' );
            if ( $image && ! empty( $image[0] ) ) {
                $ogp_img = $image[0];
            }
        }
    }

    $ogp_descr = trim( preg_replace( '/\s+/u', ' ', wp_strip_all_tags( $ogp_descr ) ) );
    $ogp_descr = mb_substr( $ogp_descr, 0, 100, 'UTF-8' );
    $properties = array(
        'og:title' => $ogp_title,
        'og:type' => $ogp_type,
        'og:url' => $ogp_url,
        'og:image' => $ogp_img,
        'og:site_name' => get_bloginfo( 'name' ),
        'og:locale' => 'ja_JP',
    );
    if ( $ogp_descr !== '' ) {
        $properties['og:description'] = $ogp_descr;
    }
    if ( $facebook_app_id !== '' ) {
        $properties['fb:app_id'] = $facebook_app_id;
    }
    foreach ( $properties as $property => $value ) {
        $content = in_array( $property, array( 'og:url', 'og:image' ), true )
            ? esc_url( $value ) : esc_attr( $value );
        echo '<meta property="' . esc_attr( $property ) . '" content="' . $content . '" />' . "\n";
    }
    echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
    if ( $twitter_site !== '' ) {
        echo '<meta name="twitter:site" content="' . esc_attr( $twitter_site ) . '" />' . "\n";
    }
}
add_action( 'wp_head', 'my_meta_ogp' );

この例はwp_headからOGPタグを出力します。下記の3設定箇所を自分のサイトに合わせて確認してください。FacebookのアプリIDは使う場合だけ入力し、空欄ならそのタグを出しません。設定後は実際のHTMLを確認します。

書き換え1:TOPページ&アイキャッチ画像がないときに使われる画像のURL

トップページや投稿一覧、記事・固定ページでアイキャッチ画像を取得できなかった場合に使う画像URLを、コード冒頭のdefault_imageへ入力します。外部から取得できる画像の完全なURLを指定してください。

書き換え2:ツイッターのアカウント名(twitter:site)

コード冒頭のtwitter_siteへX(旧Twitter)のユーザー名を入力します。@your_accountを自分のものへ置き換えてください。@も含めます。指定しない場合は空文字にするとtwitter:siteを出力しません。

書き換え3:アプリID(fb:app_id)

fb:app_idはFacebookアプリを使う場合の設定例です。OGP共通の基本必須4項目とは別で、この設定だけで現在の解析機能を利用できるとは断定しません。使う場合はコード冒頭のfacebook_app_idへ自分のIDを入力し、使わない場合は空文字のままにします。
Facebook App IDの取得方法は公開当時の参考リンクです。現在の取得画面や利用条件と異なる場合があります。

OGPタグがうまく設定できたかどうかチェックしよう

まずページのHTMLに意図したタグが一組だけ出ているかを確認します。以下のサービス画面や操作名は公開当時のものです。現在のログイン状態やサービス側の仕様によって利用できる機能や表示は異なります。

↑Facebookの確認にはシェアデバッガーを使っていました。下の画像は、URLを入力してデバッグした公開当時の例です。現在も同じプレビューが出るとは限りません。

facebookのogpデバッグ

公開当時の画面では「もう一度スクレイピング」から再取得を依頼できました。実際の画面で利用できる機能を確認してください。即時反映や表示の成功を保証するものではありません。

↑Card validatorは、公開当時にTwitterカードを調べるために紹介していた参考リンクです。「Preview Card」を押せば現在もプレビューが出るとは限りません。サービスの廃止を断定するものではなく、出力HTMLの確認と、X側で実際に利用できる確認方法を分けて考えてください。