【twitter】簡単！ツイッターカードの設定手順 ~ Blogger(ブロガー)編

ツイッターで自分のブログを紹介する際、または、ツイッターでの拡散を期待しているサイトの場合、ツイッターカードを使用することをお勧めします。

ツイッターカードとは？

ツイッターカードとは、参照先ブログ・サイトをプレビュー表示してくれる機能です。

使用することによって、リンクの貼り付けよりクリック率が高くなります。

※ツイッター以外では、「ブログカード」を使います。

ツイッターカードはこんな感じです。↓

タイ人のインバウンドについて調査した結果、なんと、お○な○の人気がありませんでした！
意外です！

V+1: 爆買いの次は爆食？訪日タイ人は観光にどこへ行く！？沖縄が最下位！？ https://t.co/TqxTF7gkSQ#訪日#タイ#沖縄#爆食#爆買い#観光地

— 西浦亮 (@hillsidestreet) 2017年8月4日

下記の３つが表示され、リンク先の情報がプレビューで大きく表示され、閲覧者がクリックしやすいUIになっています。

1. タイトル
2. 詳細
3. 画像

設定方法を紹介！

設定してないブログ・サイトでは、ツイッターを投稿してもツイッターカードが表示されません。
それでは、設定方法を説明します。

１．以下のメタタグをコピーします。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ツイッターのユーザー名" />
<meta name="twitter:title" content="ブログのタイトル" />
<meta name="twitter:description" content="ブログの説明" />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />

２．内容の編集
twitter:site　content属性の値に「@」と「ツイッターのユーザー名」を入力します。
twitter:title　content属性の値に「ブログのタイトル」を入力します。
twitter:description　content属性の値に「ブログの説明」を入力します。
twitter:image  content属性の値に「プレビュー表示したい画像のURL」を入力します。　
※画像のURLの設定方法がわからない場合は、そのままにして下さい。
ただし、その場合は、ツイッターの画像が表示されます。

３．編集したメタタグをページに追加します。
headタグに、編集したメタタグを貼り付けし、保存すれば完了です。
※他の情報を誤って、消したりしないように注意してくださいね！

３－１．テーマを選択しHTMLの編集をクリック

 

３－２．編集したメタタグを貼り付けし、テーマの保存をクリック

４．ツイッターで申請します。
検証ツールでURLを実行して申請します。
成功すれば、ツイッターカードが右側に表示され、右下のログにSuccessと表示されます。

５．ツイッターで確認してみよう
追加したURLをツイートしてください。
ツイートを確認するとブログカードが表示されます。

最後に！

ツイッターカード、ブログカードを設定してクリック率を高めましょう！
ブログがいいなって思ったら、チャンネル登録ほんまによろしくな！