はじめに
Twitterに投稿する際にリンクを張って投稿することも多いと思います。
その際にリンク先の画像を表示させて魅力的に見せるTwitterカードを紹介したいと思います。
Twitterをやり始めたけど、今一つフォロワーが伸びない、プロフィールへのアクセスが少ないなどで悩んでいる方は、次の記事を参照下さい。
今回の記事を読むと次のことが分かるようになります。
- Twitterカードとは?
- Twitterカードの種類
- Twitterカードの利用方法
- WordPressのテーマCocoonにおけるTwitterカードの設定
- Twitterカードの設定
- ホームイメージの設定
- Cocoonのキャッシュの削除
- Twitter側の設定
- Twitterカードの確認
それでは、早速、Twitterカードについて深堀りしていきます。
Twitterカードとは?
Twitterのタイムラインを見ていると、画像付きのリンクでツイートされているのを見たことありませんか?
リンク先のURLアドレスのみで表示されたツイートとリンク先の情報を画像付きで表示されたものとではどちらが興味を引くかというと、当然画像付きの方が興味をそそられませんか?
Twitterカードとは、画像付きのリンク情報のことを言います。
Twitterカードには、Webサイトの情報、アイキャッチ画像、記事のタイトル、その説明文などを表示できます。
いわゆる、TwitterカードはあなたのWebサイトや記事を宣伝する方法の1つとして有効な機能と言えます。
以下の図は、Twitterカードを設定していない場合と設定した場合の違いを見ることができます。
Twitterカードの種類
Twitterカードには次に示すように4種類のカードが存在します。
ここでは、1. サマリー(要約)カードと2. 大型画像付きサマリー(要約)カードについて解説していきます。
Twitterカードの利用方法
Twitterカードを利用するためには、Webサイトのheadタグ内にTwitterカードのメタタグを挿入しなければなりません。
下記のメタタグは、Twitterの「Developer PlatformのCards」から参照したものです。
<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@Twitterのユーザー名" />
<meta name="twitter:title"Webや記事のタイトル" />
<meta name="twitter:description"Webや記事の要約" />
<meta name="twitter:image" content="画像のURL" />
このメタタグの設定方法などについては、次の記事を参照下さい。
ここでは、WoredPressのテーマCocoonを利用している方の為に、Twitterカードの設定をしてみたいと思います。
WordPressのテーマCocoonにおけるTwitterカードの設定
WordpressのCocoonの無料テーマを利用している方向けのTwitterカードの設定です。
Twitterカードの設定
先ず、「Cocoon設定」の「OGP(Open Graph Protocol)タブ」をクリックします。
下にスクロールして「Twitterカードの設定」で、次のように設定します。
ホームイメージの設定
TwitterでWebサイトのURLをツイートした際に表示される画像を設定する部分です、
何も設定しないと、Cocoonの画像が表示されてしまいますので、あなたのトップページの画像を設定したほうが良いでしょう。
上述の設定をすべてし終えたら、必ず「変更をまとめて保存」をクリクして設定を保存してくださいね!
Cocoonのキャッシュの削除
Cocoonのキャッシュを削除しないと前のものが残っていて、Twitterカードが設定した内容に変更されない場合がありますので、「全てのキャッシュを削除」をクリックして下さい。
Twitter側の設定
Twitter側の設定も次のようにして下さい。
Twitterのホーム画面から「もっと見る」⇒「設定とプライバシー」⇒「プライバシーとセキュリティー」⇒「表示するコンテンツ」⇒「センシティブな内容を含む可能性のあるメディアを表示する」のチェックがない事を確認してくださいね。
チェックがされていると、カードの画像がうまく表示されないことがあるようです。
Twitterカードの確認
正しくTwitterカードが設定されているかどうかは、Twitter DeveloperのCard validatorサイトの「Card URL」にWebサイトや記事のURLを記入して、「Preview card」をクリックすると、右の「Card preview」部分にTwitterカードが表示されます。
おわりに
如何だったでしょうか?
Twitterカードとは?、Twitterカードの種類、Twitterカードの利用方法、WordPressのテーマCocoonにおけるTwitterカードの設定、Twitterカードの設定、ホームイメージの設定、Cocoonのキャッシュの削除、Twitter側の設定、Twitterカードの確認などについて解説してきました。
次回は、Twitterのプロフカードについて紹介していきたいと考えています。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント