私のサイトにTwitterカードを追加して、ブログの投稿を参照するツイートが拡張可能になり、追加の情報が表示されるようにしています。 metatag モジュールをインストールし、Metatag:Twitter Cardsサブモジュールを有効にし、Twitter Cardsサブモジュールにパッチを適用して、<link />
タグではなく<meta />
タグを生成する問題を修正しました。
Twitter:imageタグを含めると、Twitterカードは失敗しますが、削除すると正常に機能します。何が悪いのですか?
<meta property="Twitter:url" content="http://liberalgeek.com/content/why-do-atheists-celebrate-christmas" />
<meta property="Twitter:card" content="summary" />
<meta property="Twitter:description" content="I can't speak for all atheists, I can only speak for myself, so please leave a comment below and explain why you celebrate Christmas! When I hear someone ask, "Why do atheists celebrate Christmas?" my first thought often is: Better Question: Why do Christians celebrate Christmas?" />
<meta property="Twitter:creator" content="@kennywyland" />
<meta property="Twitter:title" content="Why do Atheists celebrate Christmas?" />
<!-- the following line causes the problem -->
<meta property="Twitter:image" content="http://liberalgeek.com/sites/default/files/styles/large/public/Christmas%20Tree.jpg" />
<meta property=
と<meta name=
を試してみましたが、動作は同じです。
画像は公開されていますが、大きすぎずに十分な大きさです...何が問題なのですか?
より明確に言うと、「失敗する」とは、TwitterがそのURLのTwitterカードがあることを認めないため、プレビューがツイートとともに表示されないことを意味します。これをTwitterカードのプレビューページでテストすると、次のような結果になります。
ただし、Twitter:image
タグを削除して再度プレビューを生成すると、うまく機能し、次のようになります。
さらなるテスト中に、私は最も奇妙なものを見つけました。ドメインをliberalgeek.comからwww.liberalgeek.comに変更すると、サムネイル画像は壊れた画像になりますが、Twitterカードは正常に生成されます。 (それは単にTwitterのボリュームが高いためかもしれませんが、よくわかりません。)
不要なwwwが含まれていなくても、Twitterカードを機能させたい。
次のことに注意してください。
サーバー上でTwitterが問題なく処理できるサイトを見つけました。
<meta property="Twitter:image" content="http://www.geekqi.com/images/StylizedYinYangRedLucida.png" />
しかし、これと他のすべてのサイトとの違いが何かはわかりません。
この値でテストを行いました
<meta name="Twitter:url" content="http://liberalgeek.com/content/why-do-atheists-celebrate-christmas" />
<meta name="Twitter:card" content="summary" />
<meta name="Twitter:creator" content="@kennywyland" />
<meta property="Twitter:description" content="I can't speak for all atheists, I can only speak for myself, so please leave a comment below and explain why you celebrate Christmas! When I hear someone ask, "Why do atheists celebrate Christmas?" my first thought often is: Better Question: Why do Christians celebrate Christmas?" />
<meta name="Twitter:title" content="Why do Atheists celebrate Christmas?" />
<!-- the following line causes the problem -->
<meta name="Twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
画像を変更すると、カードはプレビューツールで正常に機能します。
ファイルに制限があるかどうかを確認します。
APIドキュメントの クロールセクション をご覧ください
Twitterのクローラーは、URLをスキャンするときにrobots.txtを尊重します。カードマークアップのあるページがブロックされている場合、カードは表示されません。画像のURLがブロックされている場合、サムネイルや写真は表示されません。
[〜#〜] update [〜#〜]質問の作成者が提案したように、robot.txtを変更するだけでは十分ではありません。 Twitterがファイルをキャッシュした可能性があるため、有効期限が切れるまで少なくとも24時間待つ必要があります。
同じ問題がrobot.txtファイルだけでなく、画像にも見られることを付け加えます。実際、間違ったTwitterキャッシュは404エラーにつながり、プレビュー画像が壊れる可能性があります。
この問題を修正するには、次のようにします。Twitterの場合 https://cards-dev.Twitter.com/validator に移動しますWebページのURLを挿入してからプレビューカードを押すと、Twitterのキャッシュがクリアされます。
facebookの場合 https://developers.facebook.com/tools/debug/sharing/ に移動し、WebページのURLを挿入します([共有デバッガ]タブがアクティブになっていることを確認します)、[デバッグ]をクリックすると、キャッシュがクリアされます。それでも古い画像が表示される場合は、Scrap Againボタンを押してURLをスカルプします。
Twitter APIが画像ファイル名の%20スペースに行き着くのだろうか。
その可能性を排除するために、ファイル名にスペースがない画像URLでテストする価値があります。
つまり:
<meta property="Twitter:image" content="http://liberalgeek.com/sites/default/files/styles/large/public/Christmas-Tree.jpg" />
対現在:
<meta property="Twitter:image" content="http://liberalgeek.com/sites/default/files/styles/large/public/Christmas%20Tree.jpg" />