WordPress利用時のTwitterカード
「Wordpress」を利用している際は、「All in One SEO」プラグインを利用するとソーシャル設定が簡単に実施できます。Twitter向けにカードタイプの指定やカスタムTwitter画像設定も簡単に設定できます。
All in One SEOを導入し、各投稿画面の「ソーシャル設定」画面で、Twitterの関連箇所を設定します。
Twitterサービス上のTwitterカード情報の更新
Twitterで投稿をPOST時に、URLが記載されていると、Tweetの下部に記載したURLのイマージ画像やページサマリが表示されます。これが、Twitterカードとなります。
Twitterカードが適切に表示されると、テキストだけよりもインパクトがり、注目を集めやすいです。
Twitterカードで指定している画像の変更や、サマリ部分の文章を変更した際に、誤字脱字等のケースも有り、すぐに最新の情報に更新したい場合があります。
通常は、週次でキャッシュの更新処理を行っているようなので、しばらく時間を置けば最新の情報にTwitterカードは更新されるようです。
強制的にTwitterカードをリフレッシュするには、以下のリンク(Card Validator)より対象のURLのTwitterカードを手動で表示させ、内容を更新させて下さい。
画像ファイルを変更した際に、ファイル名・URLに変更がないと、キャッシュが更新されないケースもあるので、画像ファイルのファイル名に?xxx(myimage.jpg?4362984378)などと指定し、少し強引にファイルが変更したように設定変更を行い、Card validatorでプレビューの取得を実施して下さい。
有用な情報が多かったので、ヘルプページのリンクと内容も掲載しておきます。
Refreshing a Card in a Tweet
I updated my site meta tags, but my Tweet shows the old Card. How do I refresh the Card?
Our web crawlers re-index the Card tag information on your page roughly every week.
When testing and/or iterating on Cards, it is sometimes helpful to test updates on your timeline. It may be possible to use the following technique to refresh the cache with your most up-to-date changes of your page’s Card.
- Add Card metadata to a page
- Tweet URL to that page
- Refresh your browser to view the Card contents on your timeline
- Change Card metadata on the page
- Take the same URL and runs it through bit.ly
- Tweet the new bit.ly URL
- Refresh your browser to view the updates
Additionally, you can create multiple bit.ly URLs to allow for repeat testing. For example, adding dummy parameters to the end of your URL (
http://www.test.com/?x=test1
) or a unique hash (http://www.test.com/#test1
) will generally not affect the page contents, but will generate a unique bit.ly URL for each unique value of x.My Card information now refreshes, but images are not updating. How do I get the images to refresh?/a>
Images referenced in a Card are also cached based on URL. This often causes images to not update when the above Card refresh technique is used.
To work-around this issue, you can add an extra parameter at the end of your image URL so that the Twitterbot treats the image as a unique URL and re-fetches the image.
For example:
<meta name="twitter:image" content="http://example.com/myimage.jpg?4362984378"></meta>