header image
header image

WordPressの記事をTwitter投稿するときにサムネイルが表示さるようにした。| Twitter Cards

WordPressの記事をTwitter投稿するときにサムネイルが表示さるようにした。| Twitter Cards

一人でも多くの人に このサイトに訪れていただけるように 時々リンクをtwitterで呟くのですが、

自分のtweetだけなぜかサムネイルが表示されない・・・

ということで少し調べて、サムネイルが表示されるようにしました。 (早速いいねいただけました!!)

twitter-card

Twitter Cardsというのをやるとどうやら表示されるらしい

 

題名の通り Twitter Cards というのを導入すると 写真や動画などのリッチメディアを ツイートに添付してウェブサイトへのトラフィックを 促進できるそうです。

まー、上にあるようにLINEとかでお店のリンクとか 投稿すると画像のサムネイルも合わせて自動で表示されますよね?

あれと同じで、 サイトのサムネイルを表示してユーザの興味を引けるというやつです。

では、 早速導入していきましょう。

 

早速Twitter Cards導入

導入については http://wispyon.com/facebook-ogp-twittercards/ こちらを参考にしました。

上のリンクのページ最後のコードを wordpressのー>「外観」ー>「テーマの編集」ー>header.phpを編集で、 headタグの中に書いて保存してあげればOkです。

ちなみに、 こういう記載がありますが今回は関係ないので消しました。

<meta property='fb:admins' content='【上で取得したfb:adminsの15桁ID】'>
<meta property='article:publisher' content='【FacebookページがあればそのURL】' />

あと、descriptionのところで

<meta property='og:description' content='<?php echo mb_substr(get_the_excerpt(), 0, 100) ?>'>

こういうのがあったのですが 私のサイトですと関連記事の部分が descriptionに埋め込まれる感じになってしまったので、 gettheexcerpt()を$post->$post_contentに変えました。

導入はこれで以上です。 次は確認をしましょう。

 

ちゃんとTwitterCardsでサムネイルが表示されるか確認

 

Card validator

どういうように投稿されるかは 上のリンクで事前に確認できます。

表示させたいページのURLを画面左側のテキストボックスに 貼り付けてPreview Cardを押しましょう。

エラーが出ていなければOKです。

Card Validator