add_to_home_screen

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:card – summary または summary_large_image にします。
  • twitter:site – Twitterアカウント名

OGP コード

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

ハイライトがかかっている行は環境に応じて値を変えてください。特に、$twitter_card の値は、下記の場合だと summary に固定にしていますが、ページごとに summary と summary_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');