自作システムの個人ブログ

様々な情報について適当に記述しています。
(モバイル向け)サイドバーまで飛ばす

「Twitter」の検索結果

投稿: 2017年02月26日 / 更新: 2017年02月26日 / 筆者: イスターリャ / Comment: 2 / タグ: Twitter HTML meta

TwitterでURLを含んだツイートをするとテキストリンクじゃなくてパネルっぽくなるあれのこと。
Twitter Cardsというらしい。
複数パターンあるらしいが、とりあえずこれがオーソドックスなのではないだろうか。
私はこれの方法を調べたが、複数のサイトに手順が分散していて、思うような一連の流れを得られなかったため、ここにまとめておく。

まずはHTMLの準備コピペ防止

Twitterで拡散してもらうようなページやサイトを持っていないなら論外。
metaタグで記述する。
<!-- * Twitter カード用 設定 ここから * -->
<meta name="twitter:card" content="summary" /> 
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:description" content="ページの短い説明" /> 
<meta name="twitter:image" content="表示する画像のURL(httpの部分から)" /> 
<meta name="twitter:url" content="このメタタグを記述するページのURL(httpの部分から)" />
<meta name="twitter:site" content="@Twitterアカウント" />
<meta name="twitter:creator" content="@Twitterアカウント" /> 
<!-- * Twitter カード用 設定 ここまで * -->

これをコピペして、各所を書き換えて使う。
動的にページを生成してる場合は「<?php echo("何か"); ?>」を使って動的に書き換える。

Twitterに申請するコピペ防止

このままでは表示されないので、Twitterに検証してもらう。
申請といっても全自動だし検証自体は数秒で終わるはず。
ここをクリックかタップして、さっきメタタグを追加したページのURLを入力する。
するとTwitterカードのプレビューが出るので、これで作業完了。
ちょっとすると、ちゃんとリンクがカードになるようになっている。