Edited at

【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]の値が取得できます)

FireShot Capture 338 - 正規表現チェッカー PHP_ preg_match() _ JavaScript_ match() - okumocchi.jp.png

各環境によってドメインが異なるので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