PRPR

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

スポンサーリンク
新着情報
2023.04.09
2023.04.06
2023.04.03
2023.03.19
スポンサーリンク
スポンサーリンク

この記事は2015年5月5日の1年以上前に書かれたものです。現在は状況が異なる可能性がありますのでご注意ください。

記事内に広告が含まれています。
スポンサーリンク

結構前から、
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(サイト)を熟読しなおしてみないとと考えています。

カテゴリー

スポンサーリンク
タイトルとURLをコピーしました