【WordPress】記事ごとに設定されたアイキャッチ画像をOGPとして設定する（Twitter＆Facebook）

TL;DR

WordPressでプラグインを使わずに記事ごとに設定されたアイキャッチ画像をOGPとして設定します

ソース

まず以下の関数をfunctions.phpへ追加

functions.php

// URLからドメイン部分を削除したURLを返す
function delete_domain_from_url( $url ) {
    if ( preg_match( '/^http(s)?:\/\/[^\/\s]+(.*)$/', $url, $match ) ) {
        $url = $match[2];
    }
    return $url;
}

この関数が返すURLの例として正規表現チェッカーの結果を貼っておきます↓
（https://qiita.com/sola-msr を引数としてセットした場合、$m[2]の値が取得できます）

各環境によってドメインが異なるのでWPの関数で取得したのち、アイキャッチ画像のURL（ドメインを削った相対パス）をくっつけるという感じです。

OGP設定

header.phpへ以下のメタタグを書きます

header.php

<?php if ( is_single() && has_post_thumbnail() ) : ?>
    <!-- 記事に設定されているアイキャッチ画像のOGP -->
    <meta property="og:image" content="<?php echo home_url() . delete_domain_from_url(wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' )[0]); ?>">
<?php else : ?>
    <!-- デフォルトOGP -->
    <meta property="og:image" content="<?php echo home_url() ?>/image/ogp.png">
<?php endif; ?>

Twitter用OGP

header.php

<?php if ( is_single() && has_post_thumbnail() ) : ?>
    <!-- 記事に設定されているアイキャッチ画像のOGP -->
    <meta name="twitter:image" content="<?php echo home_url() . delete_domain_from_url(wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' )[0]); ?>">
<?php else : ?>
    <meta name="twitter:image" content="<?php echo home_url() ?>/image/ogp.png">
<?php endif; ?>

確認方法

Facebook

デバッガー - 開発者向けFacebook
https://developers.facebook.com/tools/debug

「シェアデバッガー」を選択して確認したいURLを張り付けて「デバッグ」をするとシェアした際の状態を確認できる

Twitter

Card Validator | Twitter Developers
https://cards-dev.twitter.com/validator

「Card URL」に確認したいURLを張り付けて「preview card」を押すとシェアした際のTLに表示される状態を確認できる

おわり

• プラグイン「All in One SEO」の設定とかでog:imageの設定をしてるとうまく反映されないので注意（マジで）

参考URL

• OGPタグ設定したのに、画像が表示されないよ！って人の応急処置 - Qiita