Railsこの記事で紹介することBeforeAfterTwitterカードを表示するメリットTwitterカードを表示する手順4つの中からカードの種類を選ぶmetaを書くTwitterカードValidatorでチェックするTwitterカードの注意点この記事で紹介することTwitterBotが呟いた記事に含まれているリンクを、カード表示にしてリッチに見えるようにする。BeforeAfterこのテックブログ.xyz/entries/44135をAfterのカード表示にしてくれるTwitterカードを今回はご紹介します。DevelopersTwitterカードを表示する手順facebookのOGP同様、サイトのメタタグに設置することで機能するので、メタタグをマークアップしていきます。4つの中からカードの種類を選ぶSummaryカードSummaryカード(画像大)AppカードPlayerカードWebサイトの場合は1か2で、アプリダウンロードさせたければ3を選びます。4は動画コンテンツをやってる人向けです。今回はWebサイトなのですが、ナショナルジオグラフィックのような大きい写真コンテンツでもない限りは1のSummaryカードを選ぶのが妥当です。metaを書く<head>の中にTwitterカード用のmetaを書いていきます。content="Webエンジニアのために参考になるテックブログをあつめて毎日更新!これであなたも一流のエンジニアに。/>細かくは記事ページだったらtwitter:imageを、記事サムネイルにするなどのif分岐は必要になってきますが、今回はロゴ画像だけにして割愛します。TwitterカードValidatorでチェックするただ本家のValidatorは、公開されているURLしかチェックしてくれないので不便です・・・。透過は背景灰色になるので、気になる人は白背景のロゴやサムネイルを用意しないといけないかもしれません。はてなブログPro自称フルスタックのフリーエンジニアです。EC・Webメディア・新規事業が得意なので、Webサービスの開発や企画の相談気軽にどうぞ。Webエンジニアのためのテックブログまとめ10倍株(テンバガー)発掘調査ブログフリーランスのエンジニア道リップルXRP投資速報スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。