Blogger に OGP & Twitter Card を設定した
このブログは Blogger で書いています。現時点で使っているテーマではこれを Twitterから リンクした場合、いい感じに画像や概要が表示されてくれていないようでした。
せっかくなのでいい感じに表示されてくれると嬉しいのでちょっと調べてみました。
これを調べる現時点で僕が知っていること、考えていることはこんな感じでした。
テーマの 「HTML を編集」から編集画面を開き head タグに必要な meta タグを設定していきます。Twitter、Facebook でそれぞれ以下のようなものが必要になります。
Facebook アカウントで開発者登録をしてアプリを作成、取得したアプリ ID を fb:app_id に設定します。
せっかくなのでいい感じに表示されてくれると嬉しいのでちょっと調べてみました。
Twitter Card を設定したぞー!できたはずだ!どうだ?https://t.co/8aZYCawR1y— もひゃ (@onjiro_mohyahya) October 29, 2019
これを調べる現時点で僕が知っていること、考えていることはこんな感じでした。
- Twitterに投稿したときに写真と概要を表示するようにしたい
- 画像や概要を表示するにはOGPを設定する必要があるはず
- OGPについて詳しいことはあんまり知らない
- BloggerでOGPを設定するには多分テーマに何か手を加えるとうまいことできるんじゃなかろうか
<!-- OGP --> <meta content='xxxx' property='fb:app_id'/> <meta content='website' property='og:type'/>ちなみに content が先に来て、キーである name や property が後に来ているのは保存した時に Blogger が attribute を並び替えてしまうためです。ちょっと気持ち悪い。<meta expr:content='data:view.title' property='og:title'/><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'/>
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:card
- twitter:title
- fb:app_id
- og:title
- og:type
- og:url
- og:image
- og:description
Facebookインサイトを使用するには、アプリIDをページに追加する必要があります。インサイトにより、Facebookからサイトへのトラフィックに関する分析を確認できます。アプリダッシュボードでアプリIDを確認してください。
とのことなので、一応アプリイIDをアプリダッシュボードに取得しにいきます。
別に Facebook 開発者になるつもりはないんだけどな・・・ |
Facebook アカウントで開発者登録をしてアプリを作成、取得したアプリ ID を fb:app_id に設定します。
Blogger のタグよくわからん問題
今回設定してみて困ったのが、Blogger のテンプレートエンジンで処理可能なデータ一覧が載っている公式ドキュメントを見つけることができず、いったい何が使えるのかよくわからなかったということで、、、
<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 からそれぞれ設定を確認するツールが提供されているので、それで確認しつつ、いい感じになるように設定していきます。
はー、まあまあよいのではー!!
コメント
コメントを投稿