【WordPress】プラグイン「JM Twitter Cards」でTwitterカードのメタタグ設定

「JM Twitter Cards」でTwitterカード用メタタグを設定

今回は「JM Twitter Cards」というプラグインのご紹介です。

ツイッターのタイムライン上に写真と説明文付きで投稿記事が流れているのをよく見掛ける思います。
こういうのです↓

これはTwitterカードと呼ばれるもので、

このTwitterカードを表示するためには専用のメタタグを設定する必要があります。

「JM Twitter Cards」はTwitterカードのメタタグを設定してくれるプラグインで、私自身もこちらのブログで使用させて貰っています。

Twitterカードは自分で設定することも可能ですが、プラグインを使用すればサクッと設定できるので、こちらのプラグインでの設定をおすすめしています。

こちらのプラグインは、専用の設定画面も用意されており、諸々の設定を行うこともできます。
と言っても、それほど難しい設定ではないので、まずは、設定画面の説明から行います。

↓

設定画面の説明

プラグインをインストール後に有効化すると、

管理画面左カラムに「JM Twitter Cards」というメニューが追加されます。

そちらからプラグインの設定画面へ移動することができます。

で、設定画面は、「Options」タブと「Post types」タブの2画面に分かれているので、

それぞれについて簡単に説明します。

「Options」タブ

■Creator (twitter username)

Twitterのユーザー名を入力します。

■Site (twitter username)

サイトの投稿者名を入力します。

■Card type

Twitterカードの種類（twitter:card）を選択します。
デフォルトは「Summary」が設定されていますが、「Summary below Large Image」「Application」も選択できます。
私は大き目の画像が好きなので、「Summary below Large Image」を選択します。
※「twitter:card」タグには、「summary_large_image」が設定されます。
シェアされると、タイムラインにはこんな感じで大きな画像が表示されます。
↓

■抜粋

「抜粋」を説明文（twitter:description）に利用するかどうかの設定になります。

■Open Graph

恐らくTwitterカードタグではなくOPGタグを設定してくれるのだと思いますが、
あまりよく分からない項目です。

■Image Fallback

シェアされた時に使用されるデフォルトの画像を登録します。

■Image alt

画像alt（image:alt）の設定を行います。

■Define specific size for twitter:image display

Twitterで表示される画像のサイズを選択します。

■Home meta desc

トップページに設定される説明文を入力します。

■Custom field title

自分で用意したカスタムフィールドの項目をタイトル（twitter:title）に設定できます。
※自分で投稿画面に記事毎のタイトル説明文設定項目を用意できるイメージです。
例えば、
「t_title」という名称でテキストボックス形式のカスタムフィールドを作成
↓
上記カスタムフィールドに投稿画面からタイトルを入力
↓
「Custom field title」に「t_title」を入力
↓
<meta name="twitter:title" content="タイトルが入ります">

■Custom field desc

自分で用意したカスタムフィールドの項目を説明文（twitter:description）に設定できます。
※自分で投稿画面に記事毎の説明文設定項目を用意できるイメージです。
例えば、
「t_desc」という名称でテキストボックス形式のカスタムフィールドを作成
↓
上記カスタムフィールドに投稿画面からタイトルを入力
↓
「Custom field desc」に「t_desc」を入力
↓
<meta name="twitter:description" content="説明文が入ります">

「Post types」タブ

「JM Twitter Cards」の設定項目を追加する投稿タイプを選択します。

投稿画面での設定

記事の投稿画面でも設定できる項目があります。
あと、シェアされた際の表示プレビューの確認もできます。

「Card type」では、動画で使用する「player（プレイヤー）」の設定も行えます。