Random flickr of mine

2022/11 移転しますた。 https://140.browneyes.in/

  • このエントリーをはてなブックマークに追加

2014/12/26

OGP and Twitter Card for Blogger

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の２つの記事で充分だったかな。

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

ソースコードたち

<!-- BEGIN Open Graph tags -->
<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
<meta content='FB_APP_ID' property='fb:app_id'/>
<meta content='FB_ADMIN_ID' property='fb:admins'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta content='YOUR_BLOG_URL' property='article:author'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='YOUR_FAVICON_URL' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='YOUR_FAVICON_URL' property='og:image'/>
</b:if>
<meta expr:content='&quot;en_US&quot;' property='og:locale'/>
<!-- END Open Graph tags -->
<!-- twitter cards -->
<meta content='summary' name='twitter:card'/>
<meta content='@YOUR_TWITTER_ID' name='twitter:site'/>
<meta content='@YOUR_TWITTER_ID' name='twitter:creator'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<!-- /twitter cards -->

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

テケトウな説明

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

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

<meta content='FB_APP_ID' property='fb:app_id'/>
└FB Developers で作成したアプリID

<meta content='FB_ADMIN_ID' property='fb:admins'/>
└このあたりで確認出来る自分のFBのユーザーID

<meta content='YOUR_BLOG_URL' property='article:author'/>
└自分のブログのトップページのURL

<meta content='YOUR_FAVICON_URL' property='og:image'/>
└自分のfavicon画像のURL…って、faviconっていうか、要は記事中に画像がないときに出したい、初期設定画像へのパス。条件分岐があるため、同一metaタグが２箇所にあり。

<meta content='@YOUR_TWITTER_ID' name='twitter:site'/>
<meta content='@YOUR_TWITTER_ID' name='twitter:creator'/>
└いずれも自分のTwitter ID

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

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

あ、あとそうだ、<meta expr:content='data:blog.metaDescription' name='twitter:description'/> を使う（わざるを得ない）にあたって、記事書く際に、各記事のDescriptionは設定してやんないとあかんくなった。面倒が増えてるじゃないか、ううう。

Posted: Labels: ,