WordPressテーマのheader.phpのmetaタグの中に、FacebookのOGP対応タグの記載方法。料金の目安ブログアクセスマップ048-729-5197お問い合わせブログホームブログWordPressテーマのheader.phpのmetaタグの中に、FacebookのOGP対応タグの記載方法。(プラグインを使わない方法)WordPressテーマのheader.phpのmetaタグの中に、FacebookのOGP対応タグの記載方法。(プラグインを使わない方法)2012.05.26ブログこんにちは。株式会社コミュニティコム代表取締役の星野邦敏です。最近、検索エンジン対策だけでなく、TwitterやFacebookやmixiやGREEなどのソーシャルサイトからのアクセス流入の施策も、話題になっていると思います。口コミやつぶやきによって、自分のWebサイトを見てくれる人が増えている、ということのようです。その際に、FacebookやmiziやGREEなどのSNS(ソーシャル・ワーキング・サイト)では、OPGの設置、というのが、1つ大切になってくる、という話があります。Protocolの略で、Facebook、mixi、GREEなどのSNSで共通の仕様となっています。一言で言うと、OGPは、そのWebサイトのその記事において何が書かれているのか、それをSNSに分からせるための仕様です。このOGPを書くと、例えば、どこかのWebサイトやブログ記事を「いいね!」としたり、シェアしたりする際に、表示されるWebサイトの写真画像や概要文章をコントロールすることができます。これをしないと、たまに、変な感じの画像や概要文章が、FacebookやmixiやGREEに載ってしまいます。Facebookでは、OGP未対応ですと、このページhttp://www.nest-akabane.net/study/2271.htmlが、以下のように、Facebookのタイムライン(ウォール)に出ました。上の例では、FacebookのOGPのデフォルトで、そのページにある複数のサムネイル画像からの選択と、titleタグ、冒頭の文章、記事URLなどが、表示されています。これを、OGPを設置することで、Web制作者や運営者が、Facebookへ表示される自分のWebサイト概要をコントロールすることができます。このページですが、http://www.nest-akabane.net/exchange/2223.html該当URLのページには無い画像を出したり、「どうも、僕です。」という該当URLページには無い概要文章を表示することも可能になります。このようにコントロールすることで、ソーシャルサイトへの対応を図るということができます。デフォルトのままでも、それなりにはなるし、運用面で意識しなくても良いので、そこまで、こだわらない、という場合には、設置しなくても良いかもしれませんが、まあ、制作者は一度作ってしまえば良いわけですし、運用側も負担にならない運用がデフォルトになれば、ソーシャルからの流入も増えて、皆にとって良いかもしれません。OGPを上手く使って、Facebookのタイムラインではクイズっぽい形で見せて、自分のWebサイトで結末を見せる、ってことをしている人もいるみたいですし、OGPの設定1つで、色々なアイデアがありそうです。WordPressでOGPの設定方法は、(1)プラグインを使う方法、(2)プラグインを使わずにWordPressテーマに直接に実装する方法、この2通りあると思います。個人的には、後者の「プラグインを使わずにWordPressテーマに直接に実装する方法」が好きです。自分でカスタマイズできますし、要望を汲み取ってのカスタマイズも簡単だからです。プラグイン」などで検索しますと、それらしいのが複数出てくるのではないかと思います。プラグインを使わずにWordPressテーマに直接に実装するには、たいてい、以下のように書くでしょうか。xmlns:fb="http://www.facebook.com/2008/fbml">と書きます。Facebookの実装の場合のhtmlの決まり事のようです。これを書かなくても正しく動く気もしますが。meta情報部分に、以下のように書きます。Facebook開発者などから取得できます。上記のソースコードは、細かく条件分岐をさせていますが、もっとザックリでも良いかもしれません。条件分岐部分のみ、ざっくり解説しますと、property=”og:image”は、アイキャッチ画像が設置されていたらアイキャッチ画像を出し、無ければ予め設定した代表的な画像を出す、という形にしています。functions.phpにアイキャッチ画像が出力されるソースコードを予め書いてあることが前提です。property=”og:title”は、Webサイトのトップページにいる時はサイト名を表示して、各記事ページにいる時は記事タイトルを表示する、という形にしています。property=”og:url”は、Webサイトのトップページにいる時はサイトURLを表示して、各記事ページにいる時はその記事のURLを表示する、という形にしています。property=”og:description”は、記事の概要が表示されるようにしていますが、ココをさらに独特にしたいのなら、カスタムフィールド実装も考えられると思います。?>">などとして、カスタムフィールドの名前を「ogp」として、値に表示させたい文言を書くと良いと思います。Facebookについては、仕様が結構変わったりしますので情報のキャッチアップが必要なこともあると思いますが、2012年5月26日時点では、上記のようにWordPress実装は可能かと思います。WordPressテーマのカスタマイズが出来ることが前提ではありますが、たいていのWordPressテーマでは、header.phpが存在すると思いますので、そのhtmlとmetaの記述に、自分に合わせてカスタマイズしてみましょう。弊社では、だいたい上記のようなソースコードを書いていますので、もし何かしらの参考になれば嬉しいです。星野邦敏)“WordPressテーマのheader.phpのmetaタグの中に、FacebookのOGP対応タグの記載方法。PM頑張ってブログを書いたら時間が掛かっちゃった。WordPressテーマのheader.phpのmetaタグの中に、FacebookのOGP対応タグの記載方法。WordPressテーマのheader.phpのmetaタグの中に、FacebookのOGP対応タグの記載方法。要は、通常であれば、bloginfo(template_url)だよね、ってことですよね。PM“WordPressテーマのheader.phpのmetaタグの中に、FacebookのOGP対応タグの記載方法。PMWordPressテーマのheader.phpのmetaタグの中に、FacebookのOGP対応タグの記載方法。PMそんなヒトミちゃんにこの記事はどうでしょう?ID入れてこのソースコードをheader.phpに貼れば動くはず。PMWordPressテーマのheader.phpのmetaタグの中に、FacebookのOGP対応タグの記載方法。PMWordPressテーマのheader.phpのmetaタグの中に、FacebookのOGP対応タグの記載方法。“WordPressテーマのheader.phpのmetaタグの中に、FacebookのOGP対応タグの記載方法。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。明けましておめでとうございます。2020年も株式会社コミュニティコムをよろしくお願い申し上げます。(受付時間:24時間)お問い合わせフォーム対応地域ウェブ制作のお打ち合わせは関東近県にて承ります。電話048-729-5197FAX048-729-5198対応地域ウェブ制作のお打ち合わせは関東近県にて承ります。