Twitter Cardsとは?Bloggerに対応させる方法
けっこう前からやってたのですが。メモ。
Bloggerブログは、デフォルトではTwitter Cardsに対応していません。おそらく。(2014/02/06現在)
なので、対応させてみました。
「Twitter Cardsってなに?」
こういうやつです↓
投稿記事のサムネイル画像、説明文などが、Twitter上で表示されます。
Twitterを普段利用されている方なら、一度は見かけたことがあるのではないでしょうか。
ではそのやり方を。
BloggerにTwitter Cardsを対応させる
以下、私が行った手順。
- テンプレートにタグを埋め込む
- Card ValidatorからPreviewチェック
- Request Approvalから申請
1. テンプレートにタグを埋め込む
私の場合は、以下のmetaタグを<head>の中に埋め込みました。
<!-- twitter cards --> <meta content='summary' name='twitter:card'/>
|
※赤字の箇所にご自身のTwitterIDを記入してください。
2. Card ValidatorでPreviewチェック
埋め込んだら、下記サイトで見た目を確認します。
まずは自身のTwitterアカウントでログイン。
「summary」を選択 → 「Validate & Apply」タブをクリック
ご自身のブログ記事をどれかひとつ選び、そのURLを記入、GO!!。
Twitter上での見た目、「Card Preview」がでます。
※私だけかもしれませんが、FirefoxではなぜかPreviewが見れませんでした。ブラウザをChromeにしたら見れました。
※サムネイル画像がPreviewにでないときがありますが、更新ボタンを何度かクリックするとでます。
3. Request Approvalから申請
Previewチェックし、これでOKなら、「Request Approval」をクリック。
「Wesite Description(サイトの説明)」と「Twitter Username」の二箇所を記入する。
![]() |
他の記入欄はすでに入力されているものでよい。 |
念のためメールアドレスや名前が正しいかを確認し、大丈夫そうなら、最後に「Register Domain」をクリック。
※[Mark my cards as containing sensitive content]は通常はチェック不要。アダルトサイトなどはチェック必要。
以上、完了です。
数日中に、Twitter登録アドレスに確認メールが届きますので、
一度、Twitterに反映されているか確認してみましょう。
ちなみにブログ記事をシェアした過去のツイートにも反映されているはずです。
***
今回のせたmetaタグは、あくまで私好みのものであり、いろいろカスタムができます。今回のは参考程度に思ってくれれば。
それではまた。@ryotaismでした。
|
