表示されている記事

スポンサーサイト

一定期間更新がないため広告を表示しています


Card ValidatorでCard Previewを確認してみる

Card Validator

Card Preview

前の記事(JUGEMブログにTwitter Cardsを対応させてみる)をCard Validatorで確認してみました。

確認用に一度公開保存してつぶやいています。

確認1:この記事のつぶやき

設定は下記
<!-- meta property="og:image" content="http://img-cdn.jg.jugem.jp/127/1958749/20120624_2396839.png" / -->
{og_image}
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@jugemtemplate">
<meta name="twitter:title" content="My First JUGEM Template!">
<meta name="twitter:description" content=""> <meta name="twitter:creator" content="@jugemtemplate"> <meta name="twitter:image:src" content=""> <meta name="twitter:domain" content="http://jugemtemplate.jugem.jp">
  • <!-- meta property="og:image" content="http://img-cdn.jg.jugem.jp/127/1958749/20120624_2396839.png" / -->
    og:imageをコメントアウト
  • <meta name="twitter:description" content="">
    twitter:descriptionは何もなし
  • <meta name="twitter:image:src" content="">
    twitter:image:srcは指定なし

twitter:descriptionに何も指定無しにしたので記事の本文が表示されているようです。twitter:image:srcに何も指定せずに記事内の画像が表示されるかと思いましたが画像が何も表示されませんっでした。JUGEMブログ管理画面のTwitterに投稿:「する」とハッシュタグ「#jugem_blog」が自動で付きます。好き嫌いが別れるところ。実際Twitterで「#jugem_blog」を検索するとわかります。

確認2:この記事のつぶやき

  • <meta property="og:image" content="http://img-cdn.jg.jugem.jp/127/1958749/20120624_2396839.png" />
    og:imageのコメントアウトを解除

画像はog:imageからではなくtwitter:image:srcを参照しているようです。

確認3:この記事のつぶやき

<meta property="og:image" content="http://img-cdn.jg.jugem.jp/127/1958749/20120624_2396839.png" />
{og_image}
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@jugemtemplate">
<meta name="twitter:title" content="My First JUGEM Template!">
<meta name="twitter:description" content="">
<meta name="twitter:creator" content="@jugemtemplate">
<meta name="twitter:image:src" content="http://img-cdn.jg.jugem.jp/127/1958749/20120624_2396839.png">
<meta name="twitter:domain" content="http://jugemtemplate.jugem.jp">

結果、上記のように設定しました。twitter:image:srcに記事内の画像が指定できるともっと良くなりそうです。

画像が表示されなくなってしまいました…[2013/06/18-14:48]

Card Validator

Card Validatorの確認

こちらではtwitter:image:srcに指定したアイコンが表示されていますがtwitter:descriptionがになっています。


スポンサーサイト


コメント
コメントする








   
この記事のトラックバックURL
トラックバック