投稿日：2014年11月18日

OGPをwordpressにプラグイン無しに設置する

WordPress 制作

facebookなどのソーシャルボタンを押された時に、記事の写真やタイトル・説明文が表示されます。
全てのページに、自動でOGP情報を書き出すコードを紹介します。

OGPとは？

OGPは「Open Graph Protocol（オープン・グラフ・プロトコル）」の略です。SNS（主にFacebook）をシェアをするときの画像&説明文を表示設定するために使われます。
また、Facebook以外でもFacebookページ、Google+、Twitter、mixiなどにシェアされた時にも使われます。
※OGPが無くてもタイトルやURLなどは問題なく表示されます。

OGP設置のメリット

以下のようなメリットが考えられます。

・間違った表示（URL、画像、説明文など）を予防できる
・シェアされる情報を管理者が設定できる
・誰がシェアしても、効果的な内容が表示される

手順

①Facebookの「fb:admins」の値を取得

↓

②ヘッダー部にコード記述

↓

③WordPress用OGP設置コードをヘッダータグ直前に記述

①Facebookの個人アカウント固有のID番号「fb:admins」の値を取得します。以下のような方法で取得しましょう。

(1)Facebookで、自分の個人アカウントページを開く
(2)自分のプロフィール写真をクリック
(3)拡大写真が表示されたページのURLの最後の方を確認
(4)「.123456789012345＆type=1＆」の「＆type」の前15桁の数字をメモ

②以下のコードをヘッダー部に挿入します。WordPressを使用している場合は、「header.php」を修正します。
html5と、html5以外の場合で記述が違いますので注意してください。
html5の場合

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

html5以外の場合

<html lang="ja" xmlns:og="http://ogp.me/ns#"　xmlns:fb="http://www.facebook.com/2008/fbml">

③下のコードをヘッダータグ内に記述します。【】の部分は適切に入力してください。

<meta property='og:locale' content='ja_JP'>
<meta property='fb:admins' content='【fb:adminsの15桁ID】'>
<meta property='article:publisher' content='【FacebookページのURL】' />
<?php if(is_single()){ // 投稿記事 ?>
<meta property='og:type' content='article'>
<meta property='og:title' content='<?php the_title() ?>'>
<meta property='og:url' content='<?php the_permalink() ?>'>
<meta property='og:description' content='<?php echo mb_substr(get_the_excerpt(), 0, 100) ?>'>
<?php } else { //ホーム・カテゴリー・固定ページなど ?>
<meta property='og:type' content='website'>
<meta property='og:title' content='<?php bloginfo('name') ?>'>
<meta property='og:url' content='<?php bloginfo('url') ?>'>
<meta property='og:description' content='<?php bloginfo('description') ?>'>
<?php } ?>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'>
<?php
  if (is_single() or is_page()){//投稿記事か固定ページ
    if (has_post_thumbnail()){//アイキャッチがある場合
       $image_id = get_post_thumbnail_id();
       $image = wp_get_attachment_image_src($image_id, 'full');
       echo '<meta property="og:image" content="'.$image&#91;0&#93;.'">';echo "\n";
    } elseif( preg_match( '/<img.*?src=(&#91;"\'&#93;)(.+?)\1.*?>/i', $post->post_content, $imgurl ) && !is_archive()) {//アイキャッチ以外の画像がある場合
       echo '<meta property="og:image" content="'.$imgurl&#91;2&#93;.'">';echo "\n";
    } else {//画像が1つも無い場合
       echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";
    }
  } else { //ホーム・カテゴリーページなど
     echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";
  }
?>
<!--Twtter Cards-->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="【サイトのツイッターアカウント。@から】">
<meta name="twitter:creator" content="【製作者のツイッターアカウント。@から】">
<meta name="twitter:domain" content="【ドメイン wispyon.comなど】" />