Twitter Cards 対応

Tweet

Category webservice 2013/05/24

問題

これ出したい！　twitterのタイムラインで、開くとリンク先の概要が表示されるの。

答え

「Twitter Cards に対応すること。」

もうちょっと説明

HTMLのhead内にmetaタグで必要事項を記述する。

1. Review the documentation for the type of card you want to implement.（こちらのドキュメントをよく読んで実装したいTwitter Cardsのタイプを決めて）
2. Add the pertinent meta tags to your page.（あなたのWebページに適切なmetaタグを追加して）
3. Run your URLs agains the validator tool to be approved.（承認が通るように検証ツールで試したまえ）

metaタグをきちんと追加できたら、申請する。

例

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://www.softel.co.jp/blogs/tech/archives/4098">
<meta name="twitter:domain" content="">
<meta name="twitter:site" content="@softelmemo">
<meta name="twitter:creator:id" content="">
<meta name="twitter:title" content="【WordPress】簡単にカテゴリのパンくずリストを表示する（複数可） at softelメモ">
<meta name="twitter:description" content="問題 WordPressで、カテゴリのパンくずリストを表示したい。複数カテゴリに登録した場合も対応できれば。 [...]...">
<meta name="twitter:image:src" content="https://www.softel.co.jp/blogs/tech/wordpress/wp-content/uploads/2013/05/wordpress-category-1.png">
<meta name="twitter:app:id:iphone" content="">
<meta name="twitter:app:id:ipad" content="">
<meta name="twitter:app:id:googleplay" content="">
<meta name="twitter:app:name:iphone" content="">
<meta name="twitter:app:name:ipad" content="">
<meta name="twitter:app:name:googleplay" content="">
<meta name="twitter:app:url:iphone" content="">
<meta name="twitter:app:url:ipad" content="">
<meta name="twitter:app:url:googleplay" content="">

必須なのは、種類と、タイトル、概要ぐらいなので、そんなにがんばって全項目に対応しなくてよい。

画面に見えない部分ではあるが、Twitter Cardsや、facebookのOGPなど、なんでもかんでも対応していくと、metaタグが増えていく。

別に大手Webサイト用の機能でなくて、申請すればできるよ　でした。