OGP and Twitter Card for Blogger

この記事は約3分で読めます。

201412260031

ざっとね。

去年あたりから再開させた時点からは、テンプレは、管理画面上での設定に留め、標準のものを触らずそのまま使う、のポリシーで使ってた。

というのは、なまじ標準テンプレを弄り倒してしまうと、Bloggerサイドでテンプレ周りの基幹のところの大きなバージョンアップに置いてけぼりを喰うから(経験あり)。かといって、自分の中でBloggerの位置づけがそんなに大事なものではないが故、大困りしたことはないんだけどね。

で、今回はそんな「弄らぬ」縛りから抜け出して、今更ながらOGPやらTwitterカードやらに対応出来るメタな部分を突っ込んでみた。別に必要もないんだけどね。魔が差した感じ?

なワケで、取り敢えず昨夜時点でのリファレンス&まとめ:

参考サイトたち

  1. Blogger ブログを Twitter Cards に対応させる方法 | クリボウの Blogger Tips
  2. How to implement twitter cards on blogger/blogspot blogs – Blogger How
  3. How to implement open graph protocol in blogger/blogspot blogs – Blogger How

渡り歩いたのは上から順だったけど、Blogger Howの2つの記事で充分だったかな。

単にTwitter Cardだけなら2番目だけでおk。おいらはなんとなく、これを機にOpen Graph一式突っ込んでおきたかったので、3番目+不足分のみ2番目から。

ソースコードたち






























ソースコード用のアレ入れてないので、ソース見づらそうですねw
すいませんね。気が向いたらいつか入れよう。でも今じゃないわ。 :-p

テケトウな説明

あくまでBlogger用です。他のCMSやブログサービスでは適宜読み替えてください…っていうより、多分、他CMS用のリソースの方がBloggerよりよっぽど出回ってるので、そっち探した方が間違いないと思います。

言及のないトコはBloggerのデータタグで動的に吐かせてるので特に弄らず。


FB Developers で作成したアプリID


このあたりで確認出来る自分のFBのユーザーID


└自分のブログのトップページのURL


└自分のfavicon画像のURL…って、faviconっていうか、要は記事中に画像がないときに出したい、初期設定画像へのパス。条件分岐があるため、同一metaタグが2箇所にあり。



└いずれも自分のTwitter ID


ざっとそんな感じ。
新しいナニカについてのコトでもないし、いつまで役に立つリソースかは怪しいところだけど。

ちょっとまだ未確認だけど、短縮URLで放り込んでもCardの意味はあまりなくなってしまうような予感。

あ、あとそうだ、 を使う(わざるを得ない)にあたって、記事書く際に、各記事のDescriptionは設定してやんないとあかんくなった。面倒が増えてるじゃないか、ううう。