TwitterにWebサイトやブログ記事のURLを貼ると、画像やタイトルが広告のように表示されることがないだろうか？それはTwitterカードと言い、設定を行えば誰でも自分のWebサイトのTwitterカードを表示できる。この記事では、Twitterカードの設定方法を解説する。
1、Twitterカードとは
Twitterカードとは、WebサイトのURLを投稿したとき、Webサイトの画像やページタイトルを表示する機能のことだ。URLのみの場合に比べて、ツイートが華やかになりユーザの目を惹きやすい。画像でアピールすることで「魅力的なWebサイトなのだろう」、「有益な情報が載っていそうだ」と感じてもらい、Webサイトへの訪問を促す効果がある。
2、Twitterカードの種類
Webサイトに使われるTwitterカードは以下の2種類がある。
Summary Card
正方形の画像とページタイトルが横並びに表示される。
Summary Card with Large Image
長方形の画像とページタイトルが縦並びに表示される。
WordPressで投稿を作成する場合などは、記事の先頭に画像を挿入するスタイルが主流のため、「Summary Card with Large Image」を選び、その画像を表示させることが多い。
3、設定方法
Twitterカードは、WebサイトにmetaタグというHTMLコードを追記して表示させる。Twitterカードの設定箇所があるWebサイト制作サービスを利用している場合は、その手順に従って設定すればコードを作成する必要はない。
WordPressの場合
テーマの中に、Twitterカードを簡単に設定できる機能が備わっていることが多い。テーマごとに設定手順が異なるため、テーマのマニュアルなどを参考に設定する。テーマに設定機能がない場合は、プラグインをインストールする。
Wixの場合
サイトページのTwitter設定をカスタマイズする｜Wix
Jimdoの場合
以下のページでFacebook用の設定方法が提示されている。同様の手順で、Twitterカードも表示させることができる。
Facebook でシェアしたクリエイターサイトの画像が表示されない｜ジンドゥークリエイターサポート
HTMLファイルのWebサイトの場合
metaタグを作成し、Twitterカードを表示させたいページのHTMLファイルに追記する。この場合は、表示させたいページの分だけmetaタグを作成する。
4、metaタグを追記する方法
4、1、Twitterカードの画像を準備する
Twitterカードに表示させたい画像を選びレンタルサーバにアップロードする。画像は以下のサイズが推奨されている。
Summary Card
1：1 かつ 144×144(px)よりも大きい画像
Summary Card with Large Image
1200×630(px)の画像
Twitterカードは中央寄せで表示されるため、推奨サイズ以外の場合は一部が見切れてしまう。見切れてもかまわない場合は、画像サイズの調整は行わなくてもよい。
4、2、HTMLコードを作る
追記するHTMLコードはこちら。「＊＊＊」の部分をあなたのWebサイトに合わせた記述に変更する。
<meta name="twitter:card" content="＊＊＊" />
<meta name="twitter:site" content="＊＊＊" />
<meta property="og:url" content="＊＊＊" />
<meta property="og:title" content="＊＊＊" />
<meta property="og:description" content="＊＊＊" />
<meta property="og:image" content="＊＊＊" />【1行目】カードの種類
Summary Cardを表示させる場合：summary
Summary Card with Large Image を表示させる場合 ：summary_large_image
【2行目】TwitterのID
当サイトの場合：@denno_lab
【3行目】表示させたいページのURL
当サイトの場合：https://denno-lab.com/twitter-card-optimisation
【4行目】表示させたいページのタイトル(～30文字程度)
当サイトの場合：スモールビジネスのITツール探しなら【東京電脳LABO】
【5行目】ページの概要(～50文字程度)
当サイトの場合：東京電脳LABOは、あなたのビジネスにぴったりのITツールを探す、ITツールの調査・選定代行です。
【6行目】画像のURL
当サイト場合：https://denno-lab.com/wp-content/uploads/2021/11/twitter-card-optimisation.jpg
4、3、コードを追記する
表示させたいページのHTMLファイルをレンタルサーバからダウンロードし、作成したコードをコピペする。コピペする場所は、ファイルの上の方に書いてある</head>の直前。
4、4、表示をチェックする
Card validatorというWebサイトで表示を確認する。
Card validatorは、 Twitterが提供しているTwitterカードの表示確認サービスだ。画面左側の「Card URL」に表示させたいページのURLを入力し、「Preview card」をクリックすると、右側に設定したTwitterカードが表示される。
Twitterカードを作成した直後は、Card validatorにTwitterカードが表示されないことがある。 その場合は、表示されるまで「Preview card」 を繰り返しクリックする。
4、5、Twitterに投稿する
実際にツイートして表示を確認する。下書きの段階でTwitterカードが表示される場合もあるが、正しい表示ではないこともあるため、必ずツイートの方を確認する。
5、自動生成ツールの紹介
こちらのWebサイトでは、metaタグを自動生成してくれる。
HEYMETA-ウェブサイトのメタタグチェック
指示されたとおりに入力フォームを埋めていき、最後に完成したmetaタグがコピーできる。ただ、自動生成されたmetaタグには、Twitterカード以外にGoogle用とFacebook用のコードが含まれている。また、生成できるTwitterカードは「Summary Card with Large Image」のみとなっている。その点を承知のうえで利用するようにしよう。