ホーム >  WordPress >  OGPをwordpressにプラグイン無しに設置する


Posted:2014/11/18 9:00:23 AM|Category : WordPress

OGPを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など】" />

もしうまくいかなかったら

期待通りの結果にならなかった場合や、以前の情報のままで表示された場合は、以下のサイトを使いましょう。
入力欄に該当のURLを記述して「デバッグ」ボタンを押せば新しい情報に更新できます。

デバッガー | Facebook


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告