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
https://developers.facebook.com/tools/debug
「シェアデバッガー」を選択して確認したいURLを張り付けて「デバッグ」をするとシェアした際の状態を確認できる
Card Validator | Twitter Developers
https://cards-dev.twitter.com/validator
「Card URL」に確認したいURLを張り付けて「preview card」を押すとシェアした際のTLに表示される状態を確認できる
おわり
- プラグイン「All in One SEO」の設定とかでog:imageの設定をしてるとうまく反映されないので注意(マジで)