【プラグインでもできる】Twitterカードの設定、表示方法のやり方【2021年版】

本業の方で記事を30記事ほど書き溜めたので、
「よし、毎日Twitterで発信しよう」と思い立ち、
Twitterカードの設定をしたので、方法をシェアします。

方法は2つあります。

1、ブログ記事にHTMLのコードを入れる方法。

2、WordPressのプラグイン「All in One SEO」で設定する方法。

では説明していきます。

HTMLのタグを記事のヘッダーにいれる

Twitterカードを設定するには、ブログ記事のヘッダー内に、
以下のHTMLタグを埋め込む必要があります。

<meta name=”twitter:card” content=”カードの種類“>
<meta name=”twitter:site” content=”ユーザーネーム“>
<meta name=”twitter:title” content=”タイトル“>
<meta name=”twitter:description” content=”ブログの説明文“>
<meta name=”twitter:image” content=”アイキャッチ画像のURL“>

一つ一つ、説明していきますね。

「カードの種類」

「Summary Card」とは、画像がデフォルトサイズのカードです。
目立たないサイズですので、控えめにしたい時はこちらがおすすめ。

「Summary Card with Large Image」とは、画像が大きいサイズのカードです。
ツイート全面に画像が表示されるので、記事を目立たせたい時におすすめです。

カード種類別のHTMLタグは以下のようになります。

「Summary Card」なら、
<meta name=”twitter:card” content=”summary“>
と入力しましょう。

「Summary Card with Large Image」なら、
<meta name=”twitter:card” content=”summary_large_image“>
と入力しましょう。

ユーザーネーム

ユーザーネームとは、Twitterの@から始まる文字列のIDです(@を含めて入力します)

HTMLタグは以下のようになります。

<meta name=”twitter:site” content=”@TwitterのユーザーID“>

タイトル

タイトルとは、リンク先のブログ(またはWEBサイト)のタイトルです。

HTMLタグは以下のようになります。

<meta name=”twitter:title” content=”ブログ(WEBサイト)のタイトル“>

ブログの説明文

ブログの説明文とは、ブログ記事の内容を説明する文章です。
ツイート上に表示させるので、長すぎず、わかりやすい説明を心がけましょう。

HTMLタグは以下のようになります。

<meta name=”twitter:description” content=”ツイートで表示したいブログの説明文“>

アイキャッチ画像のURL

アイキャッチ画像のURLとは、ツイート上に表示させたい画像のURLのことです。

WordPressの「メディア」から、指定したい画像を選択し、
URLをコピーして貼り付けましょう。

HTMLタグは以下のようになります。

<meta name=”twitter:image” content=”画像のURL“>

プラグイン「All in One SEO」を使うやり方

「メニュー」→「All in One SEO」→「ソーシャルネットワーク」を選択

「Twitter」を選択

「Enable Twitter Card」という項目がオフになっていれば「オンに設定」

「Default Card Type」という項目は、Twitterで表示される写真の大きさです。

ツイートした時に見逃しを回避する為にも、
ここは「Summary with Large Image」を選択します。

「Default Post Image Source」という項目は、Twitterで表示される写真の画像です。

毎回設定も記事から可能ですが、忘れてしまう可能性があるので、
デフォルトの画像をここで設定しましょう。

「Defult Image(Set Below)」を選択します。

「Default Post Twitter Image」で、デフォルトに設定したい画像をアップしたら、
横にある「Upload or Select Image」をクリック。

右上にある「Save Changes」で
「All in One SEO」のセッティングは完了です。

カスタマイズの設定

「メニュー」→「外観」→「カスタマイズ」を選択します。

「SNS」→「Twitter Cards」を選択します。

「twitter:card」を「Summary with Large Image」を選択します。

「twitter:site」に自分のTwitterのアカウントを入力します。

右上の「公開」でセッティング完了です。

Twitterで表示されるか、確認する

Twitterの検証ツール画面へアクセスします。

ここに自分のブログのURLを入力し、『Preview Card』をクリックしましょう。

右側の「Card preview」にTwitter Cardが表示されていることを確認し、

下のログに、「INFO: Card loaded successfully」と表示されていたら、設定完了となります。

Twitterカードの記事別設定方法

記事の一番下にある、「All in One SEO」の中の項目、「Social」タブを選択します。

ここで「Facebook・Twitterのタブ」→「Twitter」を選択します。

ここで個別に設定したい画像などを指定しましょう。

ブログの記事を書いたら

毎回、記事の一番下にある「All in One SEO」の中の項目、「Social」タブから、

「Twitter」の「Twitterタイトル」、「Twitter説明」部分への入力を忘れないようにしましょう。

Twitterタイトル部分は『投稿タイトル』『サイトのタイトル』が表示されていればOKでしょう。

例えば投稿タイトルの前に、『期間限定記事』と直接入力することも可能です。

「Twitter説明部分」に入れる文章は、プレビューを見ながら、
長すぎず、パッと見で内容がわかるような説明を心がけて下さい。

以上になります。

ご参考になれば幸いです( ˊᵕˋ )

この記事を書いた人