WordPress で OGP 設定(プラグインなし)

WordPress における、 Facebook や Twitter 等で使用される一般的な OGP (Open Graph Protocol) の書き方の解説。プラグインを使わない独自実装のコードを紹介ます。

出力するメタデータ

OGP にはいろいろなメタデータの種類が用意されていますが、実用上、下記の10項目を出力すれば十分です。

  1. <meta property="og:title" content="タイトル">
  2. <meta property="og:type" content="ページのタイプ">
  3. <meta property="og:url" content="ページのURL">
  4. <meta property="og:image" content="アイキャッチのURL">
  5. <meta property="og:description" content="ページの抜粋">
  6. <meta property="og:site_name" content="サイト名">
  7. <meta property="og:locale" content="ja_JP">
  8. <meta property="fb:app_id" content="FaceBookアプリID">
  9. <meta name="twitter:card" content="Twitterカードの種類">
  10. <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:cardsummary または summary_large_image にします。
  • twitter:site – Twitterアカウント名

OGP コード

コードサンプルです。分かりやすさ重視のため、まずトップページにおけるメタデータをデフォルトとして、そのほかのページでは必要なデータを上書きしています。

ハイライトがかかっている行は環境に応じて値を変えてください。特に、$twitter_card の値は、下記の場合だと summary に固定にしていますが、ページごとに summarysummary_large_image を切り替える仕組みを入れるのも良いと思います。

functions.php
  1. <?php
  2. /**
  3. * OGP を echo する
  4. */
  5. function output_ogp()
  6. {
  7. global $post;
  8.  
  9. # デフォルト値(トップページ)
  10. $og_site_name = get_bloginfo('name');
  11. $og_title = get_bloginfo('name');
  12. $og_type = 'website';
  13. $og_url = home_url();
  14. $og_image = 'トップページ用の画像URL';
  15. $og_description = get_bloginfo('description');
  16. $fb_app_id = 'FacebookアプリID';
  17. $twitter_card = 'summary';
  18. $twitter_site = '@Twitterアカウント名';
  19.  
  20. if (is_singular()) { # 投稿 or 固定ページ
  21. $og_type = 'article';
  22. setup_postdata($post);
  23. $og_title = $post->post_title;
  24. $og_description = mb_substr(get_the_excerpt(), 0, 100);
  25. $og_url = get_permalink();
  26. wp_reset_postdata();
  27.  
  28. if (has_post_thumbnail()) {
  29. $og_image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full')[0];
  30. }
  31. }
  32.  
  33. # トップページ or 投稿 or 固定ページ
  34. if (is_front_page() || is_home() || is_singular()): ?>
  35. <meta property="og:title" content="<?php echo esc_attr($og_title); ?>">
  36. <meta property="og:type" content="<?php echo $og_type; ?>"/>
  37. <meta property="og:url" content="<?php echo esc_url($og_url); ?>">
  38. <meta property="og:image" content="<?php echo esc_url($og_image); ?>">
  39. <meta property="og:description" content="<?php echo esc_attr($og_description); ?>">
  40. <meta property="og:site_name" content="<?php echo esc_attr($og_site_name); ?>">
  41. <meta property="og:locale" content="ja_JP">
  42. <meta property="fb:app_id" content="<?php echo $fb_app_id; ?>">
  43. <meta name="twitter:card" content="<?php echo $twitter_card; ?>">
  44. <meta name="twitter:site" content="<?php echo $twitter_site; ?>">
  45. <?php endif;
  46. }
  47.  
  48. # <head> 要素に追加
  49. add_action('wp_head', 'output_ogp');