AFFINGER6

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

更新日 :

AFFINGER6でTwitterカードを設定する方法を知りたい!
Twitterで記事をシェアしてもカードが小さくて困ってる...

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

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

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

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

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

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

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

AFFINGER6ユーザーは必見です!

今回のテーマ

  • Twitterカードとは
  • AFFINGER6(アフィンガー6)の標準機能でTwitterカードを設定する方法
  • Twitterカードのアイキャッチ画像が反映されなかったときの対処法
  • まとめ:AFFINGER6でTwitterカードを設定しよう

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

\今なら当サイト限定の豪華特典付き/

AFFINGER6の詳細を見る

Twitterカードとは

Twitterカードとは

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

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

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

  • Summaryカード
  • 大きな画像付きのSummaryカード
  • Appカード
  • Playerカード

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

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

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

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

Summaryカード

Summaryカード

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

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

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

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

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

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

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

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

手順は以下の通りです。

AFFINGER6でツイッターカードを設定する手順

  1. WordPress管理画面からAFFINGER6管理ページへ
  2. SNS設定メニューへ移動
  3. 自分のTwitterアカウントを設定

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

step
1
AFFINGER6管理ページへ

AFFINGER6管理へ

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

AFFINGER6の標準機能のほとんどはこちらのメニューから設定できるので覚えておきましょう!

step
2
SNSメニューへ

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

SNSメニューへ

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

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

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

step
3
Twitter設定をしよう

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

Twitter設定

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

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

Twitter設定

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

Twitterアカウント

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

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

ハッシュタグ

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

Twitterカードサイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

Card Validator

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

操作は簡単。

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

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

Twitterカードのプレビュー

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

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

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

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

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

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

  1. TwitterカードとはURL付きのツイートをしたときに表示されるリンク先の内容を示すカードのこと
  2. Twitterカードの設定はAFFINGER6の管理画面から簡単できる
  3. 設定後はCard Validatorというサービスでカードを更新しよう

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

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

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

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

TwitterやFacebookなどソーシャルメディアでシェアした時のカード設定は「All in One SEO Pack」というプラグインからでもできます。

詳しくはこちらの記事をご覧ください。

見出しとは
All in One SEO Packの「ソーシャルメディア」設定の方法や使い方

All in One SEO Packってなに?どうやって使うの? All in One SEO Packの導入手順やソーシャルメディア設定の方法を教えて! 今回はこういった悩みを解決していきます。 ...

続きを見る

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

AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ
AFFINGER6(アフィンガー6)のカスタマイズ方法まとめ

AFFINGER6のサイトをオリジナルにカスタマイズする方法を知りたい! AFFINGER6をオシャレにカスタマイズしたいけど手順が分からない! 今回はこんな悩みを解決していきます。 AFFINGER ...

続きを見る

\今なら当サイト限定の豪華特典付き/

AFFINGER6の詳細を見る

AFFINGER6関連の記事はこちら

All in One SEO Packの導入手順
AFFINGER6を使ってみた感想【良かった点と悪かった点】

アフィリエイトやアドセンスに特化したテーマとして有名な「AFFINGER6(アフィンガー6)」ですが実際のところどうなのでしょうか? 今回は実際にAFFINGER6(アフィンガー6)を使用してみた感想 ...

続きを見る

AFFINGER6でアドセンス広告をサイドバーに設置する方法

「アドセンス広告をサイドバーに設置したい!」 「AFFINGER6(アフィンガー6)を使ってアドセンス広告を設置したい!」 今回はAFFINGER6(アフィンガー6)でアドセンス広告をサイドバーに設置 ...

続きを見る

AFFINGER6(アフィンガー6)でランキングを作成する方法

「記事の中におすすめ商品のランキングを表示したい!」 「AFFINGER6(アフィンガー6)でランキングを表示できるって本当?」 今回はこんな疑問を解決していきます。 AFFINGER6(アフィンガー ...

続きを見る

AFFINGER6でアドセンス広告をn番目の見出し前に設置する方法

アドセンス広告を特定の見出しの前に設置したい! AFFINGER6(アフィンガー6)を使って様々な方法でアドセンス広告を設置したい! 今回はそんな方たちに向けてAFFINGER6(アフィンガー6)の便 ...

続きを見る

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

  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-AFFINGER6

Copyright © wagtechblog All Rights Reserved.