『これは欲しい』毎日使える!人気アプリ10選Twitterにブログ記事などがシェアされた時、アイキャッチ画像や概要が表示されることがあります。Cards」が、設定されているサイトに起こるものです。アイキャッチ画像や概要がツイートに表示されると、Twitterで他のツイートよりも存在感を放ち注目を集めることができるでしょう。すると必然的にサイトの訪問者が増えることがのではないでしょうか、読んでもらいたいブログ、見てもらいたいコンテンツがあるなら必ず行っておきたい設定です。以前、紹介したFacebookのOGPのTwitter版みたいなものですね。Cards」の設定を一部省略することもできます。Cards」について、どのように設定するのか、どんなことができるのか、調べたことをまとめます。OGPについてFacebookでシェアされた時、リッチに表示してくれるOGPについては下記リンク先を参考にしてください。Cardsは、コンテンツのリンク付きツイートがタイムラインに投稿された時、そのリンク先の情報も表示されるようにする機能です。Cardsが設定されているサイトとしてないサイトではリンク付きツイートが投稿された時、以下の画像のような違いがあります。設定されていないサイトはただのリンク付きツイートですが、設定されているツイートには、タイトル、概要、アイキャッチ画像が表示されています。ユーザーにとってもリンク先に、どんな内容が表示されるかプレビューを見ることができるので嬉しい機能です。これをどのように表示させているかは、リンク先のWebサイトのHTMLのソースを確認してみると、謎を解くことができます。content="millkeyweb.com">この<meta>タグを書いて、Twitterに申請することによってTwitterのクローラーがその情報を取得してくれるのです。Developersを参照してみてください。Cardsには、7種類あります。Card」が設定されています。その他にも以下のような種類があります。それぞろの表示例はリンク先で確認してみてください。Developersの「Documentation」にリンクしています。Card」になります。これは製品やレストラン情報、ブログ記事など、Webコンテンツの多くに使うことができます。Cardの画像が大きく表示されるCardです。画像は説明文の上に表示されます。画像は最小でも280×150の大きさで1MB未満のサイズが必要です。Card写真が表示されるCardです。現在GIFアニメーションはTwitterでサポートしていないようです。Card異なる写真が4つ表示させることのできるCardです。リンク先に単一の写真でなく関連する複数の写真があることを伝えることができます。Cardツイートしたアプリの詳細情報を表示できます。このCardは現在、iOSとAndroidでのみ使用できます。WebやモバイルWebでは使用できません。Cardプレイヤーは特別な承認が必要のようです。オーディオ、ビデオ、スライドショーをストリーミング再生できます。Cardにはいくつかのルールがあります。詳しくは「Documentation」を参照してください。Card製品情報を表示することができます。画像は160×160以上の大きさが必要で、正方形を推奨しています。そのほか在庫情報、価格など製品の細かいことが表示できます。「Card」の種類を指定している<meta>要素は以下の部分です。content="summary">name属性にTwitter独自のプロパティtwitter:cardを指定して、content属性に種類を指定します。これでTwitterのタイムラインの表示が変わります。Image」になります。その他の「Card」の値は以下のようになっています。productNote基本的にtwitter:cardプロパティのmeta要素は必須項目だと思っていいでしょう。その他にも指定したCardの種類によって、必須のプロパティがあります。必須プロパティを省略するとツイートに表示されない場合があるので注意しましょう。それぞれどんなプロパティが必須になっているか、詳しくはDocumentationを参照してみてください。プロパティについて少し解説したいと思います。Card」も例に挙げて解説してみます。プロパティtwitter:siteサイトのTwitterアカウントを指定できます。twitter:creatorページのコンテンツ作成者のTwitterアカウントを指定できます。サイトを複数人で運営している場合は、twitter:creatorを使うといいでしょう。Cardにはどういったプロパティがあるか確認してみましょう。Cardを開いて、下へスクロールするとプロパティの表があります。Requiredが「Yes」の項目は必須のプロパティです。(Required)値にsummaryを指定する必要があります。(Required)タイトルは70文字までそれ以上は切り捨てられます。(Required)ページ内容の説明や要約を指定します。タイトルと同じ内容を指定するのは適切でない使い方です。200文字以上は切り捨てられます。required)ページの内容に沿う画像のURLを指定します。サイトのロゴや著者の写真や複数のページで使われる画像は使用しないようにしましょう。画像は120×120の最小サイズである必要があります。それ以上のサイズはリサイズされます。画像のサイズは1MB未満にする必要があります。Card」でも画像サイズは1MB未満にしましょう。Validator」を使うと便利です。このツールを使うと以下のことができます。CardsのTwitterへの申請ができるプレビューを確認しながらコードを出力してくれるので、自分の思い通りにコードができたらコピーして貼り付けるだけです。その確認までできるので使わない手はないですね。使って設定するまでは5ステップです。ValidatorにアクセスしたらTwitterアカウントでログインします。するとCardの種類を選択するウィンドウが現れるのでサイトに埋め込みたいCardを選びます。Card」を設定すると仮定します。Code」が表示されます。Integration」は省略させていただきます。先ほど選択したCardの種類はtwitter:cardの項目に表示されています。Card...」をクリックして変更してください。Preview」を押してみましょう。Tags」の入力していない部分で一部左側の丸が赤ランプになっているのが分かると思います。これは、このCardの必須の項目になります。Cardの場合、twitter:titleとtwitter:descriptionですね。この項目は必ず入力しましょう。Tags」が緑ランプになります。Code」にコードが表示されています。contentが空の余分なコードも含まれているので、contentの入力された必要な部分をコピーして、サイトのHTMLの<head>...</head>内に貼り付けましょう。content="millkeyweb.com">これで静的サイトの場合は設定は完了ですが、Wordpressなどのブログでは動的に値を入力されるようにしたいところです。対応WordPressに対応させるには前にOGPを設定する方法を紹介したのでその方法を参考にしてみてください。SNSでリッチ表示してくれるOGPをWordPressに、プラグインを使わず設定する例として以下のコードをfunctions.phpに書くと実装できると思います。Apply」のタブをクリックして、コードを設定したサイトのURLを入力して「Go!」をクリックしましょう。Code」が表示されます。Tags」は緑ランプが表示されます。赤ランプが表示していたり、何か警告がでていたらその箇所を修正しましょう。確認したURLには現段階ではまだ申請していないので「黄ランプ」が表示されます。申請サイトにエラーがなければ、Twitterに申請して承認してもらいましょう。Cardsの情報が表示されるようになります。Approval」とボタンが表示されます。これをクリックしましょう。これで申請は終了です。承認は比較的早く反映されると思います。承認されたページを確認すると「緑ランプ」が表示されます。Cardsの情報が表示されるか確認してみるといいでしょう。CardsとOGPの関係OGPはSNSでシェアされた時に、リッチに表示されるmeta要素と前の投稿で説明しました。詳しくは一度こちらの投稿を読んでみてください。Facebookなどでサイトが共有された時、リッチ表示するOGPの設定このOGPは、Twitterでも有効です。コードの確認をする」で表示した画像を見てください。画像が荒くて見づらいかもしれませんが、タイトルにog:title、画像にog:imageが読み込まれています。Cardsのタグを探し、それが見つからなかった場合、バックサポートとしてOGPのタグを認識します。これはどんないいことがあるかというと、例えば、ブログ記事をシェアされたとします。伝えたい情報は、タイトル、概要や要約、アイキャッチ画像になるでしょう。CardsとOGPの値が重複する箇所ができます。サイトに余分な記述があるとサイトのサイズが大きくなり、表示速度を低下させ、SEOに影響を与えることになるかもしれません。サイズを小さく保ちたいところです。Cardsのタグを省略するればいいのです。するとOGPの情報を読み取ってくくれるので、重複部分をなくす事ができます。コードにすると以下のようになります。content="Twitterにブログ記事などがシェアされた時、アイキャッチ画像や概要が表示されることがあります。content="Twitterにブログ記事などがシェアされた時、アイキャッチ画像や概要が表示されることがあります。content="Twitterにブログ記事などがシェアされた時、アイキャッチ画像や概要が表示されることがあります。content="Twitterにブログ記事などがシェアされた時、アイキャッチ画像や概要が表示されることがあります。content="Twitterにブログ記事などがシェアされた時、アイキャッチ画像や概要が表示されることがあります。content="Twitterにブログ記事などがシェアされた時、アイキャッチ画像や概要が表示されることがあります。content="millkeyweb.com">コードを3行も省略できました。OGPを設定している場合はまとめておくとよいでしょう。前述したWordpressへのコードはOGPを設定していたら、重複した部分をコメントアウトまたは削除しておけばいいでしょう。Graph」も参照してみてください。Cardsを設定するとTwitterのアナリティクスが使えるようになります。Cardsの設定方法とは少し内容がずれるので、少し触れるだけにしておきます。Twitterアナリティクは多くのサードパーティのTwitter解析ツールとは違います。その違いは以下の点です。多くのサードパーティの解析ツールTwitterアカウントを主体に解析するします。Cardsを埋め込んだサイトが主体で解析ができます。自分のツイートとは関係なく、サイトを誰がツイートしたのか、誰がどのようなコメントをしたのかが解析できます。多くのサードパーティの解析ツールは、このブログで紹介した「Buffer」やBufferに時間を設定できる「followerwonk」なんかがあたると思います。予約投稿の時間をフォロワーが1番アクティブな時に設定する方法このどちらもうまく使えばサイトをより良く改善できると思います。Twitterアナリティクスの使い方はまたの機会に書いてみたいと思います。Cardsは設定したら承認してもらうのを忘れないようにしましょう。Pack」を使うといいと思います。Meta」を有効にしてください。SEO」に新たに項目が追加されるのでそこから設定が行えます。全体的に画像が荒くてすいません。間違いや分かりづらい点があったらご指摘ください。修正させていただきます。/仕事ITマーケティングライフスタイル。