TwitterCards(ツイッターカード)をWEBサイトに設置する方法

ツイッターカードの設置方法

Twitterカードってご存知ですか?

Twitterカードとは、ツイッターのタイムラインに、WEBサイトのURLが表示されたときに、画像や動画などの視認性の高い表現ができるようになるマーケティングツールの一種です

Twitterカードの正確なご説明内容は以下の通り。

Twitterカードを使用すると、写真や動画などのリッチメディアをツイートに添付してウェブサイトへのトラフィックを促進できます。ウェブページに数行のHTMLを追加するだけで、そのコンテンツへのリンクが含まれるツイートにカードが追加されるようになり、そのツイートを投稿したユーザーのすべてのフォロワーにカードが表示されます。
引用:Twitterカード

つまり、ブログやホームページを運営している方は、ツイッターカードをご自身のWEBサイトに設置しておいた方が、ツイッター上での拡散がしやすくなります。

そこで、ここでは、Twitterカードの設置方法をご紹介させていただきます。

Twitterカードの設置方法(WordPressの場合)

Twitterカードの表示形態はいくつかありますが、今回は、一番利便性も高くて視認性も高い“大きい画像(summary_large_image)”での設定とさせていただきます。(この当たりは必要に応じてお好きなようにカスタマイズしてください。)

FacebookのOPGを設置済みの場合

まずは、一番簡単、WordPressサイトでOPGが設定されている場合の設定方法のご紹介です。(OPGが設定されていない場合は、次の項目をご確認ください。)

FacebookのOPGが設定されている場合は、以下のコードをヘッダー部分に追記するだけです!

はい、設定はこれだけです。まだ設定できていない人は、いますぐWordPressの管理画面を開いてヘッダー部分に追記してくださいませ。

ご参考画面
管理画面のヘッダー部分に追記

FacebookのOPGが設定されていない場合

続いて、FacebookのOPGが設定されていない場合です。

とりあえず、「FacebookのOPGを設置してから、上記のタグを張ってください。」と言いたいところですが、何らかの理由でFacebookのOPGを設定していない人もいると思うので、Twitterカードのみを設定する場合のスクリプトを以下にご案内させていただきます。

※こちらをヘッダー部分に貼ってくださいね。(また、ツイッターIDやドメイン、画像データはご自身のサイトに合わせて張ってください。)

Twitterカードの設置方法(HTML版)

WordPressサイトではなく、HTML形式のホームページには、以下のメタタグを追記すればOKです。

Twitterカードの確認と申請方法

ツイッターカードの設定が完了したら、次は、しっかりと表示できるかを確認して、実際に表示できるように申請していきます。

具体的は方法としては、以下のバリデートサイトで、ご自身サイトのURLを入力するだけです。

Card validator


ツイッターカード設置前の結果

TwitterCard設置前のバリデート結果

ツイッターカード設置後の結果

TwitterCard設置後のバリデート結果

※補足:ツイッターカードの設定を説明している他のブログを見たところ、バリデート時に申請が必要と記載されているようですが、現在は申請ボタンがありませんので、バリデートにURLを入れて確認するだけでいいようです。(※whitelisted for summary_large_image cardと表示されればOK)

実際にツイートしてみたところ、うまく表示できました!(WEBサイトの情報を自動で読み取り、画像や説明文が表示されるようになりました。)

その他、Twitter投稿に関する気づき

また、Twitterで画像と共にツイートした場合は、概要表示ができなくなってしまうようです。ただ、ツイッターに写真などの画像を投稿すると、「概要表示」ボタンを押さなくても、視認性が上がりますので、ブログ更新時に写真をUPしてみるのもマーケティング的には結構ありだと思います。

※投稿イメージ(画像投稿なし)
TwitterCardの表示

※投稿イメージ(画像投稿あり)
画像をUPした場合

以上、ご参考まで。

当ブログを読んでいただきまして、誠にありがとうございます。このブログが、少しでもあなたのお役に立てれば嬉しいです。また、もし少しでも共感することがありましたら、また読んでいただければ幸いです。私も、読んでくれる方が多くなると、ブログを更新するモチベーションにも繋がりますm(__)m

この記事を書いている人のプロフィールはこちら → 川口浩治プロフィール
書いた本はこちら → 書いた本


また、ソーシャルメディアでも情報配信させて頂いております。以下のボタンにてフォローいただければ最新情報をご確認いただけます。





【運営者提供サービスのご案内】

電子書籍出版代行サービス
オウンドメディア構築サービス

【スポンサードリンク】


コメントはお気軽にどうぞ。(※お名前は仮名やペンネームでもOKです。また、コメントは管理人が確認後に公開させていただきます。)