日: 2013年9月7日記事一覧

最早当たり前のように行われているOGP設定。当ブログも超小並ブログですがFacebook と連携させるべくOGP設定をしてみました。SEO必須のプラグイン「All in One SEO」と新仕様対応です(2013年09月05日現在）。ちなみにOGPはmixi、Google+なども対応しています。コロコロ変わるOGP仕様色々な所で言われていますが、OGPは仕様がコロコロ変わっちゃいますのでプラグインなどに頼るよりも自分でソースを書き込んで設定したほうが良いようです。仕様変更がされたらその都度自分でちゃちゃっと修正するだけで済みますからね。なのでプラグインは使いません。また、後述するOGP設定のソースはブログのような構造が簡略化されたサイトであればそのまま使えます。が、Welcart等を使ったECサイト（やその他複雑なCMSサイト）の場合は少々手直しが必要になると思われます。あと、この記事は長くなりますので2ページ構成にしてます。1ページ目は参考になったページやOGP(やFacebook)の仕様に関してのご説明、2ページ目はOGPの設定方法となっています。ので、「んな長ったらしい説明なんて見たくねえよ！」という方はこちらから2ページ目へ飛んで下さいませ。OGPの設定をするにあたって参考になったページ先に、OGPを設定するソースの記述に当たって参考にさせて頂いた各ページを貼っておきます。OGPの設定ソース参考元[Å] Facebookで記事をシェアしたら一部でタイトルが文字化け！解決方法ご紹介！ | あかめ女子のwebメモ Facebookのシェアを利用すると一部でタイトルが文字化け。その修正方法をご紹介！ソースの大本はこちらを参考にさせて頂きました。 このソースの「og:type」の修正と、新しくfacebookで追加された「article:publisher(またはarticle:author)」を追加する事になります。「og:type」の”blog”がOGP公式サイトから消えた？今までブログに関してはog:typeを”blog”に設定するはずだったのですが、どうやら公式サイトからblogという記述が消えてしまったようです。 それについて書かれてありましたページはこちら。html999 » はじめてのOGP設置方法とどこまで設定するかを考える Webサイト制作に役立つTipsを紹介 兼 備忘録のブログです。主にHTML、CSS、jQueryのコーディングに関するいろいろを紹介しています！og:typeに言及していた部分の引用：※og:typeの「blog」について。013/05/01現在、公式サイト（http://ogp.me/）から消えています。（Open Graph Object Types – Facebook開発者にもない）ということは、ブログの場合でもトップページは「website」が正しい？ということに変更？？ 今のところよくわからないので、わかったら追記します。（ブログもウェブサイトなので「website」を指定で間違いではないと思いますが…）ちなみに、facebookのデバッガーで確認すると、「blog」を指定していても「og:type: article」とでてきます。 ためしにこのブログのトップページを「website」に変更してチェックすると『まえに「article」になってたから「website」に変更できません！ぷんぷん』とエラーがでてしまいました。 しょっちゅう仕様変更になるくせに変更できないなんてひどい＞＜ とりあえず「website」にしたまましばらく放置してみます。というわけで、og:typeに「blog」を使うのをやめておきました。 ただし、「website」に関してはトップページのみでしか使っちゃいけない事になっており、その他のページに関しては「article」を設定しなくてはいけません。ですので、ここを条件分岐で変更します。新しく追加された仕様「article:publisher」「article:author」今から約2ヶ月前、2013年6月19日にFacebookの開発者ブログでOGPの仕様追加が投稿されました。詳しくは下記ページが参考になります。OGPの仕様追加：記事にひもづくFBページや個人アカウントとの連携を強める : Facebook開発者向けドキュメントの日本語訳とTips http://developers.facebook.com/docs/ に記載されているdocumentationの和訳と、調べていて分かったノウハウを紹介します。記事がニュースフィード上に流れるとき、その記事にひもづくFBページへのいいね！や個人アカウントのフォローを促すことができるようになります。との事です。 当ブログでは一応Facebookページを作成してありますので（全然使うこと出来てませんが…）「article:publisher」を設定する事にします。 しかしこのarticle:publisher、使うにはog:typeと連動した条件があります。その条件は、og:typeが「article」の時のみ有効トップページでは使えないの2つです（表裏一体ですが）。ですので、こちらも条件分岐で記述する事になります。FacebookがOGPで推奨している画像サイズは1500px*1500pxでか過ぎです。最近流行りの巨人サイズですか。それともRetina対応でしょうか。 OGPの「og:image」によるサムネイルサイズに関しては下記ページで検証されています。FacebookのOGP画像サイズはどんなサイズがいいの | BOCUNO BLOG Facebookで共有される時に表示される画像。ここ数日、周りから変な画像が表示される様になったとか何とか色々聞いたので、調べてみた。最近仕様変...しかしサムネイル全てを1500pxなんて無理なので、ロゴ等を使用したデフォルト画像のみ1500px*1500pxで作っておきます。デフォルト画像はトップページか、記事に画像が無いときのみ指定されるようにします。あとサムネイルの最小サイズは300px*300px以上が望ましいようです。これ未満ですとバグが起きやすいんだとか…。（当ブログでは画像の縦が250pxなんですよね；）というわけで、次ページでOGPの設定ソースです。 長々と説明ばかりになってしまいましたが、早速Worpdress用のOGP設定方法です。OGPの設定方法OGPの設定に必要な修正箇所は タグ（名前空間の指定） タグ(パラメータの指定）の2つです。 タグの記述（名前空間の指定）まずは タグの記述から修正します。 HTML5の場合、XHTMLの場合、さらにはFacebook仕様に対応する場合で記述方法が違います。Facebook仕様とは「fb:app_id」や「fb:page_id」、「article:publisher」の事で、これらを使用する場合は各々後者の記述にする必要があります。そして減るもんじゃないしmixi用の記述も追加しておきます。HTML5の場合 XHTMLの場合 タグの記述（パラメータの指定）こちらは先述した大本のソースを少々書き換え、必要な部分を条件分岐する形になります。 ';}else {//単一記事ページやその他の場合（アーカイブページなど）echo ' ';echo ' ';}if (is_single()){//単一記事ページの場合if(have_posts()): while(have_posts()): the_post();echo ' ID, _aioseop_description, true).'">';echo "n";//抜粋を表示endwhile; endif;echo ' ';echo "n";//単一記事タイトルを表示echo ' ';echo "n";//単一記事URLを表示} else {//単一記事ページ以外の場合（アーカイブページやホームなど）echo ' ';echo "n";//「一般設定」管理画面で指定したブログの説明文を表示echo ' ';echo "n";//「一般設定」管理画面で指定したブログのタイトルを表示echo ' ';echo "n";//「一般設定」管理画面で指定したブログのURLを表示}?> "> post_content;$searchPattern = '/ /i';//投稿にイメージがあるか調べるif (is_single()){//単一記事ページの場合if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理$image_id = get_post_thumbnail_id();$image = wp_get_attachment_image_src( $image_id, 'full');echo ' ';echo "n";} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理echo ' ';echo "n";} else {//投稿にサムネイルも画像も無い場合の処理echo ' ';echo "n";}} else {//単一記事ページ以外の場合（アーカイブページやホームなど）echo ' ';echo "n";}?> このソースのハイライトした2,3,9,35,38行目を書き換えたり、要らなかったら削除します。2行目: 「fb:app_id」Facebookで作成したアプリのapp_idを「content=””」内に記述します。「content=”12345678910″」こんな感じでapp_idは数字だけです。設定しなくても良い場合はこの行は削除します。Facebookページ用にFacebookアプリを作成しapp_idを確認する方法は別記事『OGP用にFacebookアプリを作成してapp_idを取得する』に書いておきました。3行目: 「fb:admins」Facebookページの管理者に自分のFacebookアカウントを指定するための記述です。app_id同様に数字を記述します。設定しなくても良い場合はこの行は削除します。Facebookアカウントのidの調べ方も別記事『FacebookアカウントのIDを調べる』に書いておきました。9行目: 「article:publisher」Facebookページと紐付けたい場合は設定します（詳細は前ページへ）。ここは単にFacebookページのURLを記述するだけです。または、個人アカウント紐付ける場合は「article:author」と書き換え、URLの部分に個人アカウントのURLを記述します。Facebookページが無かったり必要が無ければこの行は削除して下さい。35行目、38行目: OGP用のデフォルト画像指定OGP用のデフォルト画像を用意してテーマのimagesディレクトリ等にアップロードし、画像までの絶対パスを記述します。推奨は1500px*1500pxです。35行目、38行目どちらも同じURLで大丈夫です。これでOGPの設定が出来ているはずです。Facebookデベロッパーのデバッガーでチェック実際にOGPがちゃんと適応されたかFacebookデベロッパーのデバッガーでチェックしましょう。デバッグしたいURLを入力して「デバッグ」ボタンをクリックするだけです。app_idやadmins等の記述を削除した場合は警告が出ると思われますが、実際の挙動には問題が無いです。「fb:app_id」や「fb:admins」に関してこの2つが必要かどうかの判断なのですが、これは下記ページが参考になります。FacebookのOGPに fb:admins と fb:app_id の設定は必要？htmlタグのxmlnsは？ | Cappee Design FacebookのOGPに fb:admins と fb:app_id の設定は必要なのか、htmlタグのxmlnsは必要なのかを調べてみました。「fb:admins と fb:app_id がないよ。設定すればニュースフィードで高いクリック率がだせるよ。」的なことが書いてあり、指定しないと表示できないわけではないようですが、可能な限り指定はしていた方が良さそうですね。という訳で、なるべく指定した方が良さそうです。最近はmixiを活用していなかったので知らなかったのですが、mixiに関してはサムネイルが適応されるのはmixiチェックのみらしいですね。mixiイイネ！ボタンと2つに分かれてややこしや…^^;