
記事内に商品プロモーションが含まれる場合があります
今回は、WordPressでプラグインを使わずにOGP設定をする方法とサンプルコードを紹介します。
1. OGPとは?
OGPは、共有するページのタイトル・画像・説明などをサービスへ伝えるためのメタデータです。カードの表示方法は共有先にも依存し、設定だけで表示を保証するものではありません。以下のSNS画面は公開当時の例です。
例えば、Facebookでリンクを共有するとき、OGPの情報がカード表示に使われることがあります。画像は公開当時の表示例です。
タイトルや画像があるとリンク先の内容を伝えやすくなります。X(旧Twitter)のカードも同様の目的ですが、OGPそのものと同じ仕様ではありません。
設定なし
こちらはTwitterカードの設定をしていない場合です。
設定あり
こちらはTwitterカードを設定した公開当時の画面です。現在のXでも同じ見た目になることを保証する例ではありません。
OGP/Twitterカードで設定するべきタグ
はこの記事で重視している設定の目印です。仕様上すべてが必須という意味ではありません。OGPの基本必須項目はog:title・og:type・og:image・og:urlで、og:descriptionなどは任意です。
↑ 共有先はページのHTMLからこれらの情報を読み取ります。og:typeは、この例ではトップページと投稿一覧にwebsite、記事・固定ページにarticleを指定します。twitter:cardは、この例では大きい画像を使うsummary_large_imageを指定します。カードの種類がこれだけという意味ではありません。fb:app_idはFacebookアプリを使う場合の設定例で、OGP共通の必須4項目とは別です。
2. OGPタグが設定されているかどうかを調べる
WordPressのテーマやSEOプラグインがOGPを出力している場合があります。まず自分のページの出力を調べ、既にあるタグへ重ねて追加しないようにしましょう。以下はパソコンで確認する手順です。
手順1:記事ページを開く
まず記事ページを開きましょう。どのページでも構いません。
手順2:右クリック
ページ内のどこでも良いので、右クリックします。
手順3:「ページのソースを表示」をクリック
ほとんどのブラウザでは、右クリックしたときのメニューに「ページのソースを表示」というものがあるので、こちらをクリックします。
手順4:「og:」で検索
すると、そのページを構成しているHTMLタグがずらっと表示されます。拒否反応が出てくる方もいるかもしれませんが、グッと耐えてください(笑)
ここで、Ctrl+Fのショートカットを使います(Macなら⌘+F)。表示中のソース内を検索できます。
↑ まずは「og:」と検索してみましょう。<meta property="og:◯◯というようなコードが見つかれば、OGP設定が書かれています(正しいかどうかは別として…)。
「og:」が見つからない場合は、出力されたHTMLとテーマ・プラグインの設定を確認してから、必要な設定を追加します。上のコード画面は公開当時の例で、そこに映るタグすべてを現在の推奨としてコピーするものではありません。
3. WordPressでプラグイン無しでOGP設定をする方法
以下はプラグインを使わず、子テーマのfunctions.phpからタグを出力する例です。対象はトップページ、投稿一覧、記事・固定ページです。投稿一覧を別の固定ページに割り当てた場合も、そのページのURLを使います。カテゴリや検索結果などは対象外です。投稿一覧のページ送りでも一覧の代表URLを出力する例です。
functions.phpにコードを貼付け
子テーマのfunctions.phpへ以下のコードを追加します。先にファイルをバックアップし、元に戻せる状態で試してください。親テーマへ直接追加すると更新で失われる場合があります。既存のPHP開始タグを重ねず、同じ関数を二度追加しないでください。テーマやプラグインが既にOGPを出力している場合は重複させないでください。
/*********************
OGPタグ/Xカード設定を出力
*********************/
function my_meta_ogp() {
if ( ! ( is_front_page() || is_home() || is_singular() ) ) {
return;
}
// 自分のサイトに合わせる3箇所。アプリIDは使う場合だけ指定。
$default_image = 'https://example.com/path/to/ogp.jpg';
$twitter_site = '@your_account';
$facebook_app_id = '';
$object_id = get_queried_object_id();
$ogp_title = get_bloginfo( 'name' );
$ogp_descr = get_bloginfo( 'description' );
$ogp_url = home_url( '/' );
$ogp_type = 'website';
$ogp_img = $default_image;
if ( is_front_page() ) {
// 固定フロントページも、サイトのトップとして扱う。
} elseif ( is_home() ) {
// 別ページに設定した投稿一覧の代表URL。
$posts_page_id = (int) get_option( 'page_for_posts' );
if ( $posts_page_id > 0 ) {
$ogp_title = get_the_title( $posts_page_id );
$ogp_url = get_permalink( $posts_page_id );
}
} elseif ( is_singular() ) {
$ogp_title = get_the_title( $object_id );
$ogp_descr = get_the_excerpt( $object_id );
$ogp_url = get_permalink( $object_id );
$ogp_type = 'article';
if ( has_post_thumbnail( $object_id ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $object_id ), 'full' );
if ( $image && ! empty( $image[0] ) ) {
$ogp_img = $image[0];
}
}
}
$ogp_descr = trim( preg_replace( '/\s+/u', ' ', wp_strip_all_tags( $ogp_descr ) ) );
$ogp_descr = mb_substr( $ogp_descr, 0, 100, 'UTF-8' );
$properties = array(
'og:title' => $ogp_title,
'og:type' => $ogp_type,
'og:url' => $ogp_url,
'og:image' => $ogp_img,
'og:site_name' => get_bloginfo( 'name' ),
'og:locale' => 'ja_JP',
);
if ( $ogp_descr !== '' ) {
$properties['og:description'] = $ogp_descr;
}
if ( $facebook_app_id !== '' ) {
$properties['fb:app_id'] = $facebook_app_id;
}
foreach ( $properties as $property => $value ) {
$content = in_array( $property, array( 'og:url', 'og:image' ), true )
? esc_url( $value ) : esc_attr( $value );
echo '<meta property="' . esc_attr( $property ) . '" content="' . $content . '" />' . "\n";
}
echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
if ( $twitter_site !== '' ) {
echo '<meta name="twitter:site" content="' . esc_attr( $twitter_site ) . '" />' . "\n";
}
}
add_action( 'wp_head', 'my_meta_ogp' );この例はwp_headからOGPタグを出力します。下記の3設定箇所を自分のサイトに合わせて確認してください。FacebookのアプリIDは使う場合だけ入力し、空欄ならそのタグを出しません。設定後は実際のHTMLを確認します。
書き換え1:TOPページ&アイキャッチ画像がないときに使われる画像のURL
トップページや投稿一覧、記事・固定ページでアイキャッチ画像を取得できなかった場合に使う画像URLを、コード冒頭のdefault_imageへ入力します。外部から取得できる画像の完全なURLを指定してください。
書き換え2:ツイッターのアカウント名(twitter:site)
コード冒頭のtwitter_siteへX(旧Twitter)のユーザー名を入力します。@your_accountを自分のものへ置き換えてください。@も含めます。指定しない場合は空文字にするとtwitter:siteを出力しません。
書き換え3:アプリID(fb:app_id)
fb:app_idはFacebookアプリを使う場合の設定例です。OGP共通の基本必須4項目とは別で、この設定だけで現在の解析機能を利用できるとは断定しません。使う場合はコード冒頭のfacebook_app_idへ自分のIDを入力し、使わない場合は空文字のままにします。
Facebook App IDの取得方法は公開当時の参考リンクです。現在の取得画面や利用条件と異なる場合があります。
OGPタグがうまく設定できたかどうかチェックしよう
まずページのHTMLに意図したタグが一組だけ出ているかを確認します。以下のサービス画面や操作名は公開当時のものです。現在のログイン状態やサービス側の仕様によって利用できる機能や表示は異なります。
↑Facebookの確認にはシェアデバッガーを使っていました。下の画像は、URLを入力してデバッグした公開当時の例です。現在も同じプレビューが出るとは限りません。
公開当時の画面では「もう一度スクレイピング」から再取得を依頼できました。実際の画面で利用できる機能を確認してください。即時反映や表示の成功を保証するものではありません。
↑Card validatorは、公開当時にTwitterカードを調べるために紹介していた参考リンクです。「Preview Card」を押せば現在もプレビューが出るとは限りません。サービスの廃止を断定するものではなく、出力HTMLの確認と、X側で実際に利用できる確認方法を分けて考えてください。