Blogger に OGP & Twitter Card を設定した

このブログは Blogger で書いています。現時点で使っているテーマではこれを Twitterから リンクした場合、いい感じに画像や概要が表示されてくれていないようでした。
せっかくなのでいい感じに表示されてくれると嬉しいのでちょっと調べてみました。

これを調べる現時点で僕が知っていること、考えていることはこんな感じでした。
  • Twitterに投稿したときに写真と概要を表示するようにしたい
  • 画像や概要を表示するにはOGPを設定する必要があるはず
  • OGPについて詳しいことはあんまり知らない
  • BloggerでOGPを設定するには多分テーマに何か手を加えるとうまいことできるんじゃなかろうか
調べて色々と試した結果、最終的に以下のようなコードを Blogger テンプレートの head タグに仕込むことで目的を達成することができました。いえーい
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- OGP -->
<meta content='xxxx' property='fb:app_id'/>
<meta content='website' property='og:type'/>
<pre class="brush:html"><meta expr:content='data:view.title' property='og:title'/>
</pre>
<meta expr:content='data:view.url' property='og:url'/>
<meta expr:content='data:view.featuredImage' property='og:image'/>
<meta expr:content='data:view.description' property='og:description'/>
 
<!-- Twitter Card -->
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@onjiro_mohyahya' name='twitter:site'/>
<meta content='@onjiro_mohyahya' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:view.title' name='twitter:title'/>
<meta expr:content='data:view.description' name='twitter:description'/>
<meta expr:content='data:view.featuredImage' name='twitter:image'/>
ちなみに content が先に来て、キーである name や property が後に来ているのは保存した時に Blogger が attribute を並び替えてしまうためです。ちょっと気持ち悪い。

OGPってなんなの？

公式？によると OGP とは Open Graph Protocol の略で、要は Facebook が web ページをいい感じに表示するために使う情報ですとのこと。なるほどー
Twitter にはこれとは別に Twitter Card というのを設定する必要があるようでした。最初に Twitter Card の設定を見て、不足があれば OGP も見てくれるみたい。ここは設定したあとで気づきました。

OGP と Twitter Card を設定する

Twitter Card のガイドとFacebookのウェブ管理者向けシェア機能ガイドを元にそれぞれを設定していきます。Twitter Card はいくつか表示設定のタイプが選べるようだったので Summary Card with Large Image にしました。

2019/11時点ではテーマのHTMLの編集は、テーマ > ... > HTML を編集 から開くことができる

テーマの 「HTML を編集」から編集画面を開き head タグに必要な meta タグを設定していきます。Twitter、Facebook でそれぞれ以下のようなものが必要になります。
  • Twitter
    • twitter:card
    • twitter:title
  • Facebook
    • fb:app_id
    • og:title
    • og:type
    • og:url
    • og:image
    • og:description
Facebook では fb:app_id というのが設定可能なようでした。ウェブ管理者向けシェア機能ガイドによると
Facebookインサイトを使用するには、アプリIDをページに追加する必要があります。インサイトにより、Facebookからサイトへのトラフィックに関する分析を確認できます。アプリダッシュボードでアプリIDを確認してください。
とのことなので、一応アプリイIDをアプリダッシュボードに取得しにいきます。

別に Facebook 開発者になるつもりはないんだけどな・・・

Facebook アカウントで開発者登録をしてアプリを作成、取得したアプリ ID を fb:app_id に設定します。

Blogger のタグよくわからん問題

今回設定してみて困ったのが、Blogger のテンプレートエンジンで処理可能なデータ一覧が載っている公式ドキュメントを見つけることができず、いったい何が使えるのかよくわからなかったということで、、、

?
1
<meta expr:content='data:view.title' property='og:title'/>

みたいな感じで attribute を expr:xxxx='data:hogehoge' のように書いてやると、'data:hogehoge' を評価して xxxx="fugafuga" みたいな感じで置換して埋め込んで くれるのですが、この "data:xxxx" に何が利用できるかがさっぱり調べてもわからないという、、、

個人のブログや Stackoverflow なんかで見つけたやつを試してみても思った通りの結果にならない、みたいなことがあり困ったのですが、最終的にはこちらの web サイトの情報が頼りになり、なんとかそれらしい感じに設定することができました。だいたい "data:view.xxxx" でなんとかなるっぽい。ふー

確認する

Twitter と Facebook からそれぞれ設定を確認するツールが提供されているので、それで確認しつつ、いい感じになるように設定していきます。

はー、まあまあよいのではー！！

コメント

コメントを投稿

このブログの人気の投稿

PostgreSQLで多次元配列を1次元配列に展開したい

イメージ
この記事は PostgreSQL Advent Calendar 2016 の8日目の記事です。 PostgreSQL では配列型がサポートされており、多次元配列を扱うことができます。 データ集計などを行う際に配列型を利用することで多少難しいロジックの実現や速度の向上といった恩恵を得ることができる場合があります。 ところがマニュアルの 配列関数と演算子 の項目を眺めてみるとお気づきになると思うのですが、多次元配列を1次元配列に一発で展開するような関数は用意されていません。 以前、ARRAY_FLATTEN が欲しいなぁと思って調べてみたのですが、現時点では何らかの方法で自前で実現してやるしかないようです。 今回、次の3種類の方法を検討しパフォーマンスについて調査してみました。他には自前で集約関数を実装するという方法もあると思いますが、今回は標準の機能で実現できる方法に絞っています。 UNNEST & ARRAY_AGG ARRAY_TO_STRING & STRING_TO_ARRAY LATERAL & UNNEST & ARRAY_AGG 結果としてはどうやら3の方法が、そこそこ安定した速度が出て、気をつける点も少ないため扱いやすそうでした。 追記：あとで気づいたけどスカラサブクエリでも良かった。
続きを読む

inotify でファイル監視しようず！

イメージ
先日 @volpe_hd28v さんから inotify いいですよ！っていうお話を聞いたので早速メインで使用している Ubuntu 環境で使ってみます！ 使用にあたっては次のページを参考にさせて頂きました！ inotify でディレクトリを監視してみる - いますぐ実践! Linux システム管理 / Vol.157 ざっくり概要 インストール： sudo apt-get install inotify-tools 使用： while inotifywait -r -e modify 監視対象; do したいこと（make とか）; done
続きを読む

ジャックパーセルのかかとの内側を直した

イメージ
2シーズン履いたジャックパーセルのかかとの内側の布が破れてきてしまっていたので修理した。壊れたものを分解したり直したりするのはなかなか楽しい。 白い革のジャックパーセル。結構汚れているように見えるが実際結構汚れている。 こんな感じでかかとの内側に貼ってある布が破れてきていた。こうなるとかかとがめっちゃこすれるようになるので、靴下に穴が空いたりかかとが靴擦れになったりして塩梅がよくない。今回はこれを修理していく。 紺色のインソールがはいって。ジャックパーセルにはかなり厚手のインソールがついている。これは僕が持っている登山用の靴のインソールより厚手だったりする。 使うのは代わりの布とハサミとボンド。この写真では2種類布を用意してあるけど最終的は奥にある濃い紺色の布だけを使った。ボンドは手芸店で売っていた皮革とか布とかゴムとかをつけることができるやつ。先日はシャンプードレッサーのプラスチック棚を直すのにも使ったりした。ほとんど万能、とても便利。 ちなみに今回は手元にあるものを使って直したけど、道具がない場合はAmazonとかで売っている修理キットをそちらを使った方が簡単だと思う。ネットの噂によるとちょっと高めになるけど靴の修理屋さんとかでも直してもらえるらしい。 破れてベロッとなっていた部分の布を切り落とす。破れていた部分以外は接着剤か何かでくっついているようで簡単には剥がせなかった。 インソールを外した方が作業がしやすいので、作業時は外している。 破れた部分に貼る布を適当に切って合わせてみる。端の部分はほつれてくると嫌なので折り返してボンドで止めた。 布は手元に持っていた紺色のものを使った。質感からなにがしかのジーンズ生地のきれっぱしだと思われる。元は白い布が貼ってある場所なので白いガーゼ布みたいのでももちろん問題ないし、柄物の生地とかでも面白いかもしれない。 サイズもよさそうだったのでボンドで貼り付けていく。中心の線を最初に留めてそこから左右を留めていくとやりやすかった。底の面のあたりはどうせインソールで隠れるので綺麗に切りそろえたりはしなかった。 インソールを入れたところ。インソールの厚みがあるので、下の方はほとんど隠れている。まあまあよさそうだ。今回使った布がインソールとかなり色の近い紺なのであまり違和感はないと思...
続きを読む