スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログでFacebookのOGPに記事のサムネイルを設定する方法

Facebook OGP イメージ

FC2ブログでFacebookのOGPに記事のサムネイルを設定する方法を紹介します。苦肉の策ではありますが、選択肢の一つとして参考になれば。

ブログ記事をFacebookでシェアするときに、OPGが正しく設定されているとFacebookのニュースフィードで綺麗に表示されるので是非とも設定しておきたいところ。

上図のように表示させるには、以下のOGPタグを設定する必要があります。

<meta property="og:type" content="article" />
<meta property="og:title" content="タイトル" />
<meta property="og:description" content="概要" />
<meta property="og:url" content="URL" />
<meta property="og:image" content="画像" />

FC2ブログには画像のURLだけを出力する変数がない

タイトル、概要、URLはそれぞれ以下の変数を使用します。

  • <%topentry_title>:記事タイトルを表示 HTMLは取り除かれます
  • <%topentry_discription>:本文の要約(200文字)を表示
  • <%topentry_link>:エントリーURLを表示

しかし、FC2ブログの変数には記事の【サムネイル画像のURL】を表示できる変数がありません。サムネイル画像を表示する変数はありますが、imgタグごと出力されるためOGPのcontent値には使用できません。

そこで、サムネイルとして表示したい画像のファイル名をエントリーIDにすれば、エントリーIDを出力する変数 <%topentry_no> で代用できると考えました。100.jpgとか、entry-image_100.jpgといった感じです。

FC2ブログにアップロードした画像のURLは固定ではない

管理画面のファイルアップロード機能でアップした画像は、以下のようなURLになります。※ファイル名を100.jpgとした場合

http://blog-imgs-52.fc2.com/l/i/k/likearpeggio/100.jpg

ドメイン以降はユーザー名とブログ名から自動的に生成されているようですが、問題はサブドメインの blog-imgs-52 の数値部分。(※blog-imgs-52-origin のように -origin が付いている場合もあります)

おそらくサーバの使用容量によって振り分けられているため、この数値部分はアップする時期によって変更されます。なので、下記のようにOGPの値としてテンプレートに固定で記述してしまうと、参照できないケースが出てきます。

<meta property="og:image" content="http://blog-imgs-52.fc2.com/l/i/k/likearpeggio/<%topentry_no>.jpg" />

つまり、管理画面からアップロードした画像では、OGPの画像としては設定できないことになります。

記事の画像と同じ画像を別サーバにもアップする

苦肉の策ですが、サムネイルとして表示したい画像を、FC2ブログとは別のサーバにもアップすることにしました。元々、安価なレンタルサーバを借りていたので、そこに各記事のサムネイルにしたい画像のみをアップ。

ファイル名だけエントリーIDとあわせておけば、場所はどこでもいいと思います。僕の場合は以下のようにURLが設定できるようにアップしました。(※ドメインは仮)

http://example.com/likearpeggio/img/100.jpg

これで、OGPの画像は以下のように設定できます。

<meta property="og:image" content="http://example.com/likearpeggio/img/<%topentry_no>.jpg" />

FC2ブログのみで完結できる方法を模索しましたが、今のところ別サーバを利用するという苦肉の策に逃げた感じです。できればFC2ブログのみで、しかもファイル名も特に気にせず対応できるに越したことはないですね。

あまり参考ならないかも知れませんが、ひとつの対応策として。

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。