スポンサーリンク

2015年5月5日火曜日

BloggerブログでOGP設定してみた方法

新しい記事 以前の記事

結構前から、
FacebookのOGPとやらのワードは知ってはいたものの…。

実際設定の仕方が今一よく分かりませんでした。
そして、
なんのメリットがあるのか否かさえわかりませんでした。


多くのサイトやブログでOGPの設定をされているようですが、
私は、
特に必要ないだろうと考えていましたが、
この度、
なんとなぁく設定できたっぽいので、
備忘録として残しておこうと思います。


ただ単に、

ソースを記述するのみになってしまうと思われます…。



まず、
HTMLソースの一番上の以下の部分に、


<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='ja' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

最後に半角スペースの入れて、
以下ソースを追加します。

xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://ogp.me/ns#'




その後、

headタグの中に<head>~</head>


以下OGPソースを貼り付けます。


<!-- OGP -->
<!-- 記事 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta property='og:type' content='article'/>
<meta property='og:title' expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title'/>
<meta property='og:image' expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url'/>
</b:if>
<!-- ホーム -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta property='og:type' content='blog'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta property='og:image' content='[ブログの固定画像URLを指定]'/>
</b:if>
<!-- アーカイブ -->
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta property='og:type' content='article'/>
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<meta property='og:image' content='[ブログの固定画像URLを指定]'/>
</b:if>
<!-- 全てに適用 -->
<meta property='og:url' expr:content='data:blog.url'/>
<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='fb:app_id' content='[作成したアプリのApp ID/API Key]'/>
<meta property='og:locale' content='ja_JP'/>
<!-- /OGP -->


そして、
HTML編集画面を保存します。

その後、
以下Facebookページにて、
OGPの確認をしてみます。
Debugger - Facebook開発者


それまでは、
画像などが一応取得されていましたが、

今回指定した画像とOGPのタグが確認できます。



設定後デバックしても表示が変わらない場合は、
キャッシュが残っているようなので、
更新してみると…。

ちゃんとOGP設定ができているか否かの確認ができるかと思います。

一応、
私の当ブログにおいても更新してみたところ、
指定の画像が表示されてOGPのmetaタグもできていました。


一応の設定はしてみたものの…。
いまだに良くは分かっていません。


以下OGP確認用のブックマークレットです。


OGP確認ブックマークレット


<参考サイト>
FacebookのOGPをBloggerに対応させる方法 | Will feel Tips

※上記参照URL(サイト)を熟読しなおしてみないとと考えています。
スポンサーリンク



スポンサーリンク

この記事が気に入ったらいいね!
お願いします(#^.^#)

↓↓↓

最新情報をお届けします

言えないことはTwitterで!!


こんな記事も書いてます



関連性の高い記事


0 コメント:

コメントを投稿

次の投稿 前の投稿 ホーム
Related Posts Plugin for WordPress, Blogger...