Sumirexxx

今日もiPhone片手に出かけます

【SMRX】OGP設定した!!FacebookやGoogle+に載せたリンクのサムネイルを指定する方法があったのですね。 はてなブックマーク - 【SMRX】OGP設定した!!FacebookやGoogle+に載せたリンクのサムネイルを指定する方法があったのですね。

ブログ

わーどぷれす_すみれっくす-2

ブログを書いた後、みなさんはどのようにシェアしてますか?

私は記事のリンクをコピーしてFacebookページ、Facebook、Google+、Twitterでシェアというか、更新しましたのお知らせをしています。

そこで、いつも気になっていたのが、Facebookにシェアしたときのサムネイル表示。

アイキャッチを設定しているのに、どうしていつも途中の画像とか意図しない画像が表示されてしまうのか??と、人知れず悩んでおりました。

OGPとかいう設定をしないといけないらしかった

まずは検証ということで、同じ記事のリンクを2、3度貼付け直してみると、そのつど画像がちがったり同じだったりすることに気がつきました。

これは何か解決法があるはず!と、「Facebook サムネイル」とかで検索しました。

そしたら、なんか見たことある…「OGP設定」の文字がちらほら。もしかして、これのこと?

プロブロガー本でもう一度復習

そうそう、そういえばプロブロガー本にそんなページがあったはず。と帰ってすぐに目次を開いてみました。(赤い方は紙の方で買ったから)

案の定、144ページにありました♪

ものすごくおおざっぱにまとめると、OGPを設定すれば自分が書いた記事にあったサムネイルや概要を設定できるようになるということです。

  • OGPはOpen Graph Protocol(オープングラフィックプロトコル)の略。
  • 要するにWebページの情報を正確に伝えるための記述です。
  • header.phpを編集して、metaタグを書き込む!

これこれ、私がしたかったのたぶんこれ。
OGPをしなくても、適切な情報が出てくることもあるけど、「設定した方がより確実」なのだそうです。SEOの設定みたい。

SEOについてはこないだあかめちゃんに教えてもらって直したのがあるので気になった方はこちらをどうぞ。

【SMRX】All in One SEOの設定でindexのDescriptionが抜けてたのを教えてもらいました | Sumirexxx

実際に書き込むコード

でもプロブロガー本の144ページを見ただけだと、正直疑問が残りました。

「これって、記事ごとにいちいち設定するの!?みんなそんなめんどくさいこと毎回やってるの??しかも記事ごとの情報をヘッダーに書き込むってことは、ヘッダーって毎回同じものを表示する訳だから、毎回同じ記事になっちゃうんじゃないの??」

っていう長い疑問です。

はてなだらけ。
でもそんな疑問をなくしてくれたのが、やっぱりあかめちゃんでした!!あなたが女王といわれる所以が日に日に自然に思えてきてなりません。(内線)

この記事を読めばすぐわかる!

[Å] 私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由 | あかめ女子のwebメモ

すごくわかりやすかったのですが、なぜか私の環境だと、動くけど一行エラーが表示されてしまいました。

ということで、さらに紹介されていたこちらの方法を使わせていただきました。

[Wordpress]これは簡単!プラグインを使わずにOGPを設定する方法! | コンチクワブログ

html宣言を修正する

まずはこの一行を追加します。
「header.php」の中にあるhtml~から始まっている部分を修正します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

これでOK.

metaタグを記述する。

同じく「header.php」の中にある「</head>」の直前に、以下のコードを記述します。

長いけどがんばろう!

<!-- ここからOGP -->
<meta property="fb:admins" content="◯◯◯◯◯◯◯◯" /><!-- 自分のFacebookアカウントに対応するid -->
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="blog" /><!-- いいねボタンを押された時に新規にページを作りたくない場合はarticle -->
<meta property="og:url" content="<?php the_permalink(); ?>" />
<?php
if (is_single()){//投稿ページの場合
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'" />';echo "\n";//抜粋を表示
     endwhile; endif;
} else {//投稿ページ以外の場合(アーカイブページやホームなど)
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '" />';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (has_post_thumbnail() &amp;amp;&amp;amp; !is_archive()){//投稿にサムネイルがある場合の処理
     $image_id = get_post_thumbnail_id();
     $image = wp_get_attachment_image_src( $image_id, 'full');
     echo '<meta property="og:image" content="'.$image[0].'" />';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) &amp;amp;&amp;amp; !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
     echo '<meta property="og:image" content="'.$imgurl[2].'" />';echo "\n";
} else {//投稿にサムネイルも画像も無い場合、もしくはアーカイブページの処理
     echo '<meta property="og:image" content="http://www.hogehoge.com/wordpress/wp-content/uploads/default_img1.jpg" />';echo "\n";
}
?>
<!-- ここまでOGP -->

こうなります。

これで疑問解決しました。どのページを開かれたかによって表示される内容をif分で切ってるんですね。
これなら、そのページごとに表示を切り替えてくれることがわかるので納得です。

2行目の「content=”◯◯◯◯◯◯◯◯”」はFacebookのIDを設定。
FacebookのIDは、Facebookにログイン>プロフィール>プロフィール画像を表示した、うしろのほうにある15桁の文字列です。
FacebookIDの取り方も念のため書いておきます。

FacebookIDの取得方法

▼プロフィール欄を選択
Facebook 4

▼プロフィール画像を選択
わーどぷれす すみれっくす 3

▼15桁の文字列がFacebookのID
わーどぷれす すみれっくす 9

最後の、画像がなかった場合の画像を表示するところ(hogehogeのとこ)は、自分の環境にあった設定に修正します。これは、いつも画像がはいってる場所にあるはずです。

私の場合は以下のようになりました。

<!-- ここからOGP -->
<meta property="fb:admins" content="100005812694515" /><!-- 自分のFacebookアカウントに対応するid -->
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="blog" /><!-- いいねボタンを押された時に新規にページを作りたくない場合はarticle -->
<meta property="og:url" content="<?php the_permalink(); ?>" />
<?php
if (is_single()){//投稿ページの場合
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'" />';echo "\n";//抜粋を表示
     endwhile; endif;
} else {//投稿ページ以外の場合(アーカイブページやホームなど)
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '" />';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (has_post_thumbnail() &amp;amp;&amp;amp; !is_archive()){//投稿にサムネイルがある場合の処理
     $image_id = get_post_thumbnail_id();
     $image = wp_get_attachment_image_src( $image_id, 'full');
     echo '<meta property="og:image" content="'.$image[0].'" />';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) &amp;amp;&amp;amp; !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
     echo '<meta property="og:image" content="'.$imgurl[2].'" />';echo "\n";
} else {//投稿にサムネイルも画像も無い場合、もしくはアーカイブページの処理
     echo '<meta property="og:image" content="http://sumirexxx.com/wp-content/themes/sample/images/no-image.jpg" />';echo "\n";
}
?>
<!-- ここまでOGP -->

2行目と26行目を、自分用に編集しました。

Facebookデバッガーで確認してみる

ここまできたらあと少し。
Facebookデバッガーで表示の確認をしてみましょう。

Facebookデバッガー

ここで設定するものってなんだろう?私は最初さっきのFacebookのIDかと思ってなんどもエラーになりました。

ここで設定するのは、自分のブログ記事です!!
たとえば私のブログ記事であれば、「http://sumirexxx.com/2014/02/25/dailysumirepo1/」と入力して、デバッガーさんにデバックしてもらいます。

デバッガー 4

OKだとこんな感じで表示されます。

オブジェクトデバッガー 6

いざ!実践!

さて、設定も終わりましたので実際にどう見えるかやってみましょう。

OGPを設定する前の見え方

すごいやだー。な感じ。

わーどぷれす すみれっくす 4

OGP設定後

わーどぷれす すみれっくす 4

まとめ

ふー!!!やっとできました。

これは時間があるときにやった方がいいかも。

私はうっかりはじめてしまったので明日早いのにハマってしまいました。

でも今日解決できてよかった♪♪

ディスクリプションがちょっと…だけど、ここはまた時間ができたときに直したいと思います。

同じように「なんで変なサムネイルが出るんだよ〜〜〜〜!」と思っている方は、たぶんOGPの設定が原因です。
気になっていた方は、試してみてくださいね☆

…余談ですが、OGPって頭の中で読んで、両手の親ゆびどうしと人差しゆびどうしをあわせた、あの三角形のやつ…思い浮かんだの、私だけじゃないよね。

<