AFFINGER6でTwitterカードを設定する方法【更新したカードの確認方法も】

AFFINGER6でTwitterカードを設定する方法を知りたい！

Twitterで記事をシェアしてもカードが小さくて困ってる...

ブログやウェブサイトを運営する人にとって、集客に欠かせないのがツイッターです。

特にサイトを立ち上げたばかりの方にとってツイッターなどのSNSは貴重な流入元になるはずです。

多くの方は、Twitterでブログの記事をシェアすることがあると思います。
通常の設定だとアイキャッチ画像が小さく表示されてしまいユーザーの目に止まりにくくなってしまいます。

ですがWordPressテーマでAFFINGER6を使っている方は心配ご無用です。

AFFINGER6のある設定をするだけで、このように簡単に大きなサイズのアイキャッチ画像を表示させることができるのです。

そこで今回はAFFINGER6でツイッターカードを設定する方法・設定したTwitterカード確認する方法を分かりやすく解説していきます。

AFFINGER6ユーザーは必見です！

当サイトではプログラミングやWebサイト運営に関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

Twitterカードとは

まず最初にツイッターカードについて軽く解説していきます。

Twitterカードとは、ツイッターでURL付きのツイートをしたときに表示される、リンク先の内容を示すカードのことです。

2020年現在Twitterカードは全部で4種類あります。

「Appカード」はアプリのシェア、「Playerカード」は動画のシェア用のカードを指します。

ブログ記事をシェアする際は関係ないのでなんとなく知っておけば大丈夫です。

今回紹介する方法では「Summaryカード」と「大きな画像付きのSummaryカード」を切り替えることが出来ます。

▼実際の表示はこんな感じ▼

Summaryカード

大きな画像付きのSummaryカード

どちらが正解かどうかは決まっていませんが、個人的には「大きな画像付きのSummaryカード」をおすすめします。

単純にカード面積が大きくなるので、ユーザーの目に留まってクリックされる確率が高くなるからです。

AFFINGER6の標準機能でTwitterカードを設定する方法

まずはAFFINGER6の標準機能でツイッターカードを設定する方法を解説していきます。

設定自体はめちゃめちゃ簡単で、一瞬で終わってしまうので、見逃さないようにしてくださいね笑

手順は以下の通りです。

それでは詳しく見ていきましょう！

step
1AFFINGER6管理ページへ

まずWordPress管理画面を開いたら左側のメニューから「AFFINGER6管理」メニューを選択して移動します。

step
2SNSメニューへ

AFFINGER6管理画面にも左側にメニューが並んでいます。

メニューの中から「SNS」を選択しましょう。

ここではAFFINGER6にしか用意されていないSNSに関する設定がたくさんあります。

Twitterカードの設定もこのメニューからできるというわけです。

step
3Twitter設定をしよう

SNSメニューを開いたら、一番下にスクロールします。

するとこのように「Twitter設定」と書かれた項目があります。

早速ここからTwitterカードの設定をしていきましょう。

設定項目は赤で囲んだ２つだけです。

Twitterアカウント

あなたのTwitterアカウントのユーザー名を入力しましょう。

@は入力不要ですのでご注意ください。

ハッシュタグ

空欄のままで大丈夫です。

Twitterカードサイズ

Twitterカードのサイズを選択できます。

先程も触れたとおり、Twitterカードは大きいほうがユーザーの目に止まりやすいですので「大(summary_large_image)」にチェックを入れましょう。

設定が終わったら左下の「save」ボタンを押して設定を保存するのも忘れないように！

Twitterカードの設定が終わったら早速記事のURLをツイートして確認してみましょう。

アイキャッチ画像サイズが大きいTwitterカードが表示されていれば完成です！

ただしこの段階では、キャッシュなどの関係でTwitterカードが更新されないことがあります。

時間をおけば更新されるのですが、それではもどかしくて嫌ですよね笑

そんな時は「Card Validator」を使用します。

ここからはCard Validatorの使い方も見ていきましょう！

Card ValidatorでTwitterカードを更新しよう

Card ValidatorとはTwitterが運営している無料サービスで、Twitterカードの更新・プレビュー画面の表示ができます。

まずはCard Validatorにアクセスしてみましょう。

するとこんな画面が表示されます。

操作は簡単。

入力ボックスにURLを入力して「Preview card」ボタンを押すだけです。

試しに当ブログのURLで試してみましょう。

「Preview card」ボタンを押すと、画面右側にTwitterカードのプレビューが表示されていることが分かります。

これでTwitterカードの更新は完了です。

数分待てばあなたのシェアツイートのカードも更新されているはずです。

まとめ：AFFINGER6でTwitterカードを設定しよう

今回はAFFINGER6（アフィンガー6）でTwitterカードを設定する方法について解説しました。

それぞれテイストや便利さで好みが分かれると思いますので、ご自分に合った方法で実践してみてください！

わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします！

AFFINGER6のカスタマイズ方法のまとめはこちら

AFFINGER6（アフィンガー6）に関する記事一覧はこちら→