【2021年】Twitterカードとは?、WordPressテーマ Cocconでの設定方法などについて解説

Facebook SNS
この記事は約6分で読めます。

はじめに

 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. サマリー(要約)カード
    Webサイトや記事の小型のアイキャッチ画像、タイトル、説明文などが表示きるカード
    (例)
  2. 大型画像付きサマリー(要約)カード
    Webサイトや記事の大型のアイキャッチ画像、タイトル、説明文などが表示できるカード
    (例)
  3. アプリカード
    あなたがアプリを作成して持っていいる場合などに使え、アプリに直接アクセスしてダウンロードしたりできるカードです。
    私自身がアプリを持っているわけでわないので、アプリカードについては省略します。
  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カードの有効化
    ☑ Twitterカードタグの挿入
  • Twitterカードタイプ
    ○サマリー(summary)
    ●大きな画像のサマリー(summary_large_image)
    のいずれかにチェック(「ここでは、大きな画像のサマリーにチェックを入れてあります。
    上述のサマリーカードと大型画像付きサマリーカードを参照してどちらかにチェックを入れて下さい。
    どちらがよいという訳でもないので、あなたが好きな方を選んで下さい。

ホームイメージの設定

 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のプロフカードについて紹介していきたいと考えています。

 この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

タイトルとURLをコピーしました