WordPress における、 Facebook や Twitter 等で使用される一般的な OGP (Open Graph Protocol) の書き方の解説。プラグインを使わない独自実装のコードを紹介ます。
出力するメタデータ
OGP にはいろいろなメタデータの種類が用意されていますが、実用上、下記の10項目を出力すれば十分です。
- <meta property="og:title" content="タイトル">
- <meta property="og:type" content="ページのタイプ">
- <meta property="og:url" content="ページのURL">
- <meta property="og:image" content="アイキャッチのURL">
- <meta property="og:description" content="ページの抜粋">
- <meta property="og:site_name" content="サイト名">
- <meta property="og:locale" content="ja_JP">
- <meta property="fb:app_id" content="FaceBookアプリID">
- <meta name="twitter:card" content="Twitterカードの種類">
- <meta name="twitter:site" content="Twitterアカウント名">
WordPress に用意されている様々な関数を使用して、動的に content
属性値を決定します。
- og:title – トップページの場合はサイト名、投稿または固定ページの場合はページタイトルにします。
- og:type – トップページの場合は「
website
」、投稿または固定ページの場合は「article
」にします。 - og:url – ページのパーマリンクを指定します。
- og:image – アイキャッチのURLを指定します。
- og:description – トップページの場合はサイトのキャッチフレーズを、投稿または固定ページの場合はページの抜粋を指定します。
- og:site_name – サイト名にします。
- og:locale – 日本語「ja_JP」にします。
- fb:app_id – Facebook の開発者 ID
- twitter:card –
summary
またはsummary_large_image
にします。 - twitter:site – Twitterアカウント名
OGP コード
コードサンプルです。分かりやすさ重視のため、まずトップページにおけるメタデータをデフォルトとして、そのほかのページでは必要なデータを上書きしています。
ハイライトがかかっている行は環境に応じて値を変えてください。特に、$twitter_card
の値は、下記の場合だと summary
に固定にしていますが、ページごとに summary
と summary_large_image
を切り替える仕組みを入れるのも良いと思います。
- <?php
- /**
- * OGP を echo する
- */
- function output_ogp()
- {
- global $post;
-
- # デフォルト値(トップページ)
- $og_site_name = get_bloginfo('name');
- $og_title = get_bloginfo('name');
- $og_type = 'website';
- $og_url = home_url();
- $og_image = 'トップページ用の画像URL';
- $og_description = get_bloginfo('description');
- $fb_app_id = 'FacebookアプリID';
- $twitter_card = 'summary';
- $twitter_site = '@Twitterアカウント名';
-
- if (is_singular()) { # 投稿 or 固定ページ
- $og_type = 'article';
- setup_postdata($post);
- $og_title = $post->post_title;
- $og_description = mb_substr(get_the_excerpt(), 0, 100);
- $og_url = get_permalink();
- wp_reset_postdata();
-
- if (has_post_thumbnail()) {
- $og_image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full')[0];
- }
- }
-
- # トップページ or 投稿 or 固定ページ
- if (is_front_page() || is_home() || is_singular()): ?>
- <meta property="og:title" content="<?php echo esc_attr($og_title); ?>">
- <meta property="og:type" content="<?php echo $og_type; ?>"/>
- <meta property="og:url" content="<?php echo esc_url($og_url); ?>">
- <meta property="og:image" content="<?php echo esc_url($og_image); ?>">
- <meta property="og:description" content="<?php echo esc_attr($og_description); ?>">
- <meta property="og:site_name" content="<?php echo esc_attr($og_site_name); ?>">
- <meta property="og:locale" content="ja_JP">
- <meta property="fb:app_id" content="<?php echo $fb_app_id; ?>">
- <meta name="twitter:card" content="<?php echo $twitter_card; ?>">
- <meta name="twitter:site" content="<?php echo $twitter_site; ?>">
- <?php endif;
- }
-
- # <head> 要素に追加
- add_action('wp_head', 'output_ogp');