Bloggerは、基本機能がしっかりしています。無料ブログでありながら、カスタマイズも柔軟に行うことができ、機能拡張することができます。しかし、WordPressでほぼ標準で装備されているTwitterカードやFacebookのOpen Graph機能などの設定はマニュアルで行う必要があります。
本記事では、ブログを活用する上で役立つTwitterカードの設定方法を紹介します。
[post_ads]
Twitter Cardsとは
ブログ記事の下にあるTwitterの共有ボタンを押してツイートを投稿したり、TwitterのツイートにURLを貼ると、記事のサムネイル画像、タイトル、概要説明（スニペット）、サイトURLがツイートに加わえて表示する機能です。以下はTwitter カードを使用したツイートの表示例です。
Twitter カード (Cards) を設定すると、サイトや記事の紹介をTwitterで簡単かつ効率よく行うことができます。記事のサムネイル画像やタイトル、スニペットなどが表示されるため、ユーザーエンゲージメントの向上につながりやすい効果があります。Blogger101 新記事投稿のお知らせ：
— Chico M@ブロギングライフ (@BloggingLifeJP) May 14, 2018
Bloggerでラベルをまとめて投稿記事に追加、削除、変更する方法 - Blogger101@ブロギングライフ https://t.co/sVSgq3YWmC
Twitter Cards の種類
現在サポートされているTwitterカードは以下の4種類です。- サマリーカード：タイトル、説明、サムネイル画像
- 大きな画像付きサマリーカード：サマリーカードと同機能で大きな画像が表示されます。
- アプリカード(App Card)：モバイルのアプリを直接ダウンロードできます。
- プレイヤーカード：ビデオ、オーディオ、メディアを表示するカードです。
Twitterカードの導入手順
ブログやウェブページにTwitterカードを導入する大まかな手順は以下の通りです。- カードの種類を選ぶ。
- ページに適切なメタタグを設定する。
- バリデーターツールにページのURLを入力して、動作テストを行う。
- 実際にツイートにURLを貼り付けて投稿する。
BloggerにTwitterカードを設定する手順
Twitterカードをブログやウェッブページで使用する場合は、サマリーカードか大きな画像付きサマリーカードのどちらかを選びます。どちらを選ぶかは、サイト運営者のお好みとサイトのコンテンツの種類などによります。
テキストが中心のコンテンツの場合は前者、魅力的な画像を使用している場合は後者などを選ぶのも一案です。両方試して選ぶのもよろしいかと思います。
Blogger テンプレートにTwitterカードを設定する
以下の手順で設定します。
1. Bloggerの管理メニューから［テーマ］をクリックします。
2. テーマを編集する前にバックアップを行います。
3.［HTMLの編集］ボタンを押します。
2. テーマを編集する前にバックアップを行います。
3.［HTMLの編集］ボタンを押します。
4. テンプレートのコードが表示されます。コードが表示されている枠内のどこかをクリックして、［コントロール + F］（マックの場合は、コマンドと”F"キー）を同時に押すと、枠内上部に検索ボックスが表示されます。
5. "/head"を入力して検索します。
6. </head> の上に以下のコードを追加します。
<!--START Twitter Card -->
<meta content='summary' name='twitter:card'/>
<meta content='@で始まるTwitter ID' name='twitter:site'/>
<meta content='@で始まるTwitter ID' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='デフォルト画像のURL' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<!--END Twitter Card -->
上のコードで、「＠で始まるTwitter ID」（Twitterアカウント名）を入力して下さい。<meta content='summary' name='twitter:card'/>
<meta content='@で始まるTwitter ID' name='twitter:site'/>
<meta content='@で始まるTwitter ID' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='デフォルト画像のURL' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<!--END Twitter Card -->
「デフォルト画像のURL」は、記事に画像が含まれていない場合に使用する画像です。サマリーカードか大きい画像付きサマリーカードにあったサイズの画像のURLを使用します。
備考：
デフォルト画像を設定していないと、ホームページのURLをツイートに添付した時に画像が表示されません。デフォルト画像を設定することをお勧め致します。
デフォルト画像を設定していない場合と設定後のツイート表示の違いを添付します。
デフォルト画像を設定していないと、ホームページのURLをツイートに添付した時に画像が表示されません。デフォルト画像を設定することをお勧め致します。
以下は、BloggerのテンプレートファイルにTwitterカードの設定コード（画面赤枠内）を貼り付けた状態です。Twitter Cards ホームページ画像設定前と後です。ちょっとしたところですが、画像があるのとないので、受ける印象が違うと思います。 pic.twitter.com/rj2etUsjgf— Chico M@ブロギングライフ (@BloggingLifeJP) May 16, 2018
設定内容を確認後、［テーマを保存］のボタンを押します。
以上で設定作業は完了です。
Twitterカードの表示テストを行う
Twitter Cards Validatorのページを表示します。Card URLの欄に設定を行なったBloggerの記事ページのURLを入力します。（どのページでも構いません）続いて、URL入力欄の下の"Preview card"のボタンを押します。
設定が適切に行われていれば、右側に入力した記事ページURLのTwitterカードがプレビューで表示されます。
Card validator での表示テストは、記事ページとホームページの両方で確認することをお勧め致します。
以下は、ホームページのURLを入力してテストを行なった結果です。ホームのURLでは、Twitterカードの設定コード内で指定したデフォルト画像が表示されています。
以上で作業完了です。
私のブログをtwitterに貼ってもURLが表示されるだけなのでBloggerが対応してくれたらなぁと思っていましたが、
ReplyDeleteまさかの手動設定という手段があるとは思いませんでした(^_^;)
こちらの記事のお陰で無事twitterにTwitterカードを表示できました、
そもそも今日までTwitterカードという言葉も知らなかった(^_^;)
takebeatさん、
Deleteコメントありがとうございます。返答が大変遅くなり、本当にすみません。
Twitterカードは、ブログプラットフォームやテーマで対応している場合もあるのですが、対応されていない場合は、手動で設定することで対応できます。
また、ブログプラットフォームやテーマで対応されている場合は、カスタマイズなど変更がしづらい場合もあるので、手動で設定する方がより自分の求める設定にできる場合もあります。
無事にTwitterカードを設定できて、良かったですね。
コメントくださいました事、重ねて御礼申し上げます。ありがとうございました。
はじめまして。
ReplyDeleteブログのテンプレートを変えてからtwitterへ投稿してもカードが表示されなくなってしまい
大変困っていました。
わかりやすく解説していただいたおかげで自分でも表示させられるようになりました
どうもありがとうございましたm(_ _"m)
レガリスさん、はじめまして。コメントありがとうございました。こちらからの返答が大変遅くなり、誠に申し訳ございません。
Deleteはじめまして。Bloggerで個人ブログを運営している者です。
ReplyDelete機械音痴なのですが、こちらの記事を参考にさせていただいて、無事にTwitterカードをうまく設定することができました。
「［コントロール + F］で検索ボックスが出てくる」等の、パソコン知識が全然ない自分にとって大変ありがたい情報も解説してくださっているので、スムーズに操作ができました。
ありがとうございました！
はじめまして。コメント、ありがとうございます！Twitterも随分変わってしまったのですが、無事にTwitterカード設定できたとの事、教えてくださり、ありがとうございました！
Delete”コントロール + F”などのキーボードショートカットは、利用するとかなり便利なものもあるので、できる範囲で利用されるのはお勧めです。この点についても、実際にご利用・ご経験された感想を教えて下さり、大変参考になりました。
本サイトも更新があまりできていないのですが（以前からずっと思っていながら）、記事を新たに投稿したり、投稿済みの記事を更新したりして、手を入れようと思っております。
この度は貴重なコメント投稿ありがとうございました。励みになっております。
何かご質問やご要望等ございましたら、教えて下さい。よろしくお願い致します。