Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@sola-msr

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

More than 1 year has passed since last update.

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

3
Help us understand the problem. What is going on with this article?
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
sola-msr
ミセ*゚ー゚)リ そんな事言われてもウチ、ポン・デ・ライオンやし
andfactory
Smartphone Idea Companyとして、人々の生活に「&(アンド)」を届ける。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?