ココログをTwitterカードに対応させてみる
ココログをTwitterカードに対応させる方法を調べてみた。
この設定をすると、ココログの記事のURLを Twitter に貼り付けた際に、。
ココログ(ブログ)を Twitterカードに対応させる試み。https://t.co/jbmYQq5tkD
— 風柳 (@furyutei) 2016年11月22日
これで表示されるかな…?
のような形で表示される。
ただ、画像については記事毎に手動で指定しないといけないのが難点。■前準備
- ブログの「設定」→「基本情報」の「ブログのサブタイトル(キャッチフレーズ)」欄に
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@(自分のTwitterユーザー名)" /> <meta name="twitter:image" content="(Twitterカードにデフォルトで表示させたい画像のURL)" />
※例
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@furyutei" /> <meta name="twitter:image" content="https://furyu.tea-nifty.com/image/kaze2_120x120.png" />
のような記述を追加し、[変更を保存]→[サイトに反映] - Card validatorで、適当な既存ブログ記事の URL を指定して、[Preview card]ボタンをクリック。 のような感じで表示されれば OK。
■記事投稿時
- 通常通りブログの記事を書く。
このとき、記事中に Twitter カード上にサムネイル表示させたい画像がある場合には、本文の一番最初に、<meta name="twitter:image" content="(記事中の画像のURL)" />
のように追記して、記事を保存する。 - Twitterに当該ブログ記事の URL を貼り付けてツイートすれば、Twitterカードが表示されるようになる。
■注意書きなど
- 上記では、metaタグには"twitter:card"、"twitter:site"、"twitter:image" のみを指定し、Summary Card — Twitter Developersで指定されている"twitter:title"、"twitter:description"(共に Required = YES)を指定していない。
これは、これらのタグが設置されていない場合には、Twitter 側で代わりに meta[property="og:*"] を参照してくれるため。ココログでは、もともと"og:title"、"og:description" 等があらかじめ設定されている。 - meta[name="twitter.image"]を複数設置した場合には、Twitterは一番最後に設置されたものを参照する模様。
これを利用して、「ブログのサブタイトル(キャッチフレーズ)」欄ではデフォルト画像を指定しておき、記事によって変更したい場合には、記事本文に meta[name="twitter.image"]を別に指定することで、記事毎に異なる画像を指定することが可能になる。ただし、うまくいかない場合もある模様。