Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

OGP Tumblr 小技集

TumblrにOGP設定してみた

投稿日:


【2011/06/21:追記】
あまりにも適当に書きすぎて分かりにくかったのでサンプルコードの中で差し替えが必要な部分について説明加筆しました。

tumblr_ogp
メインブログのMTにOGP設定をしたのが良いキッカケになったので、クリッピング兼ネタポストとして使っている Tumblr にもOGP設定してみました。Tumblrのテンプレートをいじる場合、独自のタグになりますのでカスタムHTMLテーマのリファレンスを参考にすると良いと思います。


で、早速ボクのTumblrに設定したOGPタグです。

{block:PermalinkPagination}<!-- Permalink -->
<!-- OGP -->
<meta property="og:title" content="{block:Description}{MetaDescription}{/block:Description}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{Permalink}" />
{block:Posts}{block:Photo}<meta property="og:image" content="{PhotoURL-500}" />{/block:Photo}{/block:Posts}
<meta property="og:site_name" content="タンヤガー" />
<meta property="fb:admins" content="100001083970301" />
<meta property="og:description" content="{block:Description}{MetaDescription}{/block:Description}" />
<!-- /OGP -->
<title>タンヤガー: {block:Description}{MetaDescription}{/block:Description}</title>
<link rel="canonical" href="{Permalink}" />
<!-- /Permalink -->{/block:PermalinkPagination}
{block:IndexPage}<!-- IndexPage -->
<!-- OGP -->
<meta property="og:title" content="{Title}" />
<meta property="og:type" content="blog" />
<meta property="og:image" content="{PortraitURL-128}" />
<meta property="og:site_name" content="タンヤガー" />
<meta property="fb:admins" content="100001083970301" />
<meta property="og:description" content="{block:Description}{MetaDescription}{/block:Description}" />
<!-- /OGP -->
<title>{Title}</title>
<!-- /IndexPage -->{/block:IndexPage}

※このままコピペしないで、必要な箇所を自分のブログ情報に書き換えてね!
og:site_nameはサイト名|ブログ名を入れる部分なのでボクの場合「タンヤガー」ですが自分のブログ名に差し替えて下さい。fb:adminsは自分のfacebook IDに変更することを忘れずに。数字のfacebook IDは分かりづらいんですが、自分のプロフィールページのプロフィール画像をクリックして画像編集画面にいくと、URLに数字がついているのでそれが自分のIDになります。
まず、{block:PermalinkPagination}で個別ページ、{block:IndexPage}でトップページなどの一覧ページ用にテンプレートの出し分けをしています。個別ページと一覧ではタグが出力するHTMLが大きく異なりますので。
個別ページ用のテンプレートで工夫した点が、og:titleに{MetaDescription}にしていることと、ポストタイプが{block:Photo}の時にog:imageをセットしている点でしょうか。Tumblrは多彩なポストタイプを持っているだけに、通常必ずあるはずのエントリータイトルにあたるデータがない場合があったりしてちゃんと分岐するのが面倒になって・・・しかも、自分で使うポストタイプがPhotoかQuoteがほとんどなので、いっそのこと{MetaDescription}でいいやという判断になりました。
今の状態だと、og:titleとog:descriptionが全く同じなので、そこを振り切っちゃって、

<meta property="og:title" content="Tumblr - {block:Posts}{PostType}{/block:Posts}" />

みたいな感じで、og:titleをポストタイプの表示に使うっていう手もあるかなぁと思ったり。

まとめ

てか、TumblrのポストってDashboard内で消化されることが多くて他のソーシャルメディアに拡散してるかなぁって疑問はあります。つまり、そもそもOGP対応いるかね?みたいな。まあ、やらないよりは良いよねくらいの気持ちでちょっと様子見ます。
もっと良いマークアップ方法あったらリブログプリーズ。

-OGP, Tumblr, 小技集

執筆者:

関連記事

[N]ネタフル x [S]シカマケ = ブログデザイン勉強会 第1回に参加

日本のトップブロガーであるネタフルのコグレさんが主催されており、先ほど紹介した「視覚マーケティングのススメ」の著者であるウジトモコさんを講師にお招きして行われる、ブログデザイン勉強会の第1回目が昨日開 …

4マイク+5ヘッドフォンの音声収録機材

完全に自分用の備忘録ですが・・・(汗) Ustreamなどインターネットを使った動画生配信を何度か実施していて、地方からリアルタイムコンテンツを発信する良い媒体だと思っているので、少しずつでもできるこ …

第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法

前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介しました。 ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。 via: 第1 …

MovableTypeにFacebookのOpen Graph protocol(OGP)を対応させる方法

【2012/12/02:追記】 記事本文の最初にでてくる画像URLを抜き出すという目的では、元の正規表現では少々問題があったため修正しました。詳細はMTタグの解説部分のコメントをご確認ください。 ども …

屋外イベントでライブ配信と会場モニター映写した時の色々

このGWに自分が管理人として運営している千葉県富津市のローカルメディア富津っ子として、地元イベントのお手伝いをしてきたのですが、ちょっとテックよりな内容をこちらに記録しておこうと思います。 そのイベン …

スポンサードリンク

スポンサードリンク