Twitterカードとは | | まーくんのアフィリエイト学校

アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます

Twitterカードとは

公開日 最終更新日

Twitterカードとは、ツイッターで記事がシェアされたときの表示方法でOGPの一つ。全部で4種類あり、その中から好きなものを指定できる。

Twitterカードアイコン

Twitterが自動でやってくれてたわけじゃなかったくまね~
そうですよ~ちゃんと記事の方で「こういう風に表示してほしい」って設定しないといけないんです~

 

Twitterカードの有無でクリック率が変わる

Twitterカード例

上の画像から分かるように、単純に目立たずサイトの中身をイメージしにくいことに加え、Twitterカードがないとクリック部分が小さく、クリックしにくくなります。

 

 

Twitterカードの種類

1.Summary Card

Summary Card

このカードの場合、アイキャッチ画像は中央から正方形にトリミングされます。

 

 

2.Summary Card with Large Image

Summary Card with Large Image

このカードの場合、アイキャッチ画像は中央から1.91:1の長方形にトリミングされます。

 

3.Player Card(動画サイト用)

Player Card(動画サイト用)

 

4.App Card(アプリ配布用)

App Card(アプリ配布用)

 

3と4は動画とアプリ用なので、通常のブログやサイトなら使うのは1か2になります。

 

 

Twitterカードの設定方法

Twitterカードの設定はHTMLの<head></head>の中に記述します。

Twitterカードの設定方法

Twitterカード独自設定

<meta name=”twitter:card” content=”カード種類” /> 

<meta name=”twitter:site” content=”@ユーザー名” /> 

 

他SNS共通設定

<meta property=”og:url” content=”記事のURL /> 

<meta property=”og:title” content=”記事のタイトル” /> 

<meta property=”og:description” content=”記事の要約(ディスクリプション)” /> 

<meta property=”og:image” content=”画像のURL” />

 

概要の文字数

概要の文字数は

1.Summary Card…73文字

2.Summary Card with Large Image…64文字

それ以上は省略されるので注意。

 

 

Twitterカード独自設定部分

カードの種類

<meta name=”twitter:card” content=”カード種類” /> 

例)<meta name=”twitter:card” content=”summary_large_image”>

 

カード種類には、 summary か summary_large_image を入れます。

動画とアプリ用はほとんど必要ないかと思いますが、気になる方は下記のサイトを参照してみてください。

動画用

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/player-card

アプリ用

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/app-card

 

Twitterのユーザー名

<meta name=”twitter:site” content=”@ユーザー名” />

例:<meta name=”twitter:site” content=”@kumano” />

 

ここにはTwitterのユーザー名を入れてあげます。

 

プラグイン(All in one seo pack)で設定する

お使いのCMSがWordPressであれば、プラグインで簡単にTwitterカードを設定することもできます。

以下の記事でやり方を解説しているので、参考にしてみてください。

 

【参考記事】

【All in One SEO Pack】Twitterカードをプラグインで設定する手順【初心者向け】

 

 

設定ができたらCard Validatorでチェック

Twitterカードがうまく反映されているかは、こちらの公式サイトから簡単に確認できます。

 

Card validator

https://cards-dev.twitter.com/validator

 

「Twitterカード」のおさらい

簡単に今回のまとめをしておくです~。
Twitterカードのまとめ

・TwitterカードはOGPの一つ

・シェアされたURLを魅力的に表示してくれるもの

 

関連用語

OGP

metaタグ

 

アフィリエイト用語辞典 一覧に戻る