5
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

【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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
5
Help us understand the problem. What are the problem?