web-dev-qa-db-ja.com

Twitter Card PreviewがTwitter:imageで失敗する

私のサイトに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&#039;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, &quot;Why do atheists celebrate Christmas?&quot; 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カードのプレビューページでテストすると、次のような結果になります。

enter image description here

ただし、Twitter:imageタグを削除して再度プレビューを生成すると、うまく機能し、次のようになります。

enter image description here

さらなるテスト中に、私は最も奇妙なものを見つけました。ドメインをliberalgeek.comからwww.liberalgeek.comに変更すると、サムネイル画像は壊れた画像になりますが、Twitterカードは正常に生成されます。 (それは単にTwitterのボリュームが高いためかもしれませんが、よくわかりません。)

enter image description here

不要なwwwが含まれていなくても、Twitterカードを機能させたい。

次のことに注意してください。

  • .htaccessファイルは、Drupalと共にインストールされる標準のファイルです。
  • Gzip圧縮を使用しているとは思わない
  • Apacheは間違ったヘッダーを送り返していません
  • エラーログにエラーが表示されない
  • Twitterが画像にアクセスしようとしたときに、アクセスログに200に等しいリターンコードと正しいコンテンツの長さの値を持つエントリが表示されます。

サーバー上でTwitterが問題なく処理できるサイトを見つけました。

<meta property="Twitter:image" content="http://www.geekqi.com/images/StylizedYinYangRedLucida.png" />

しかし、これと他のすべてのサイトとの違いが何かはわかりません。

3
Kenny Wyland

この値でテストを行いました

<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&#039;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, &quot;Why do atheists celebrate Christmas?&quot; 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エラーにつながり、プレビュー画像が壊れる可能性があります。

3
pasine

この問題を修正するには、次のようにします。Twitterの場合 https://cards-dev.Twitter.com/validator に移動しますWebページのURLを挿入してからプレビューカードを押すと、Twitterのキャッシュがクリアされます。

facebookの場合 https://developers.facebook.com/tools/debug/sharing/ に移動し、WebページのURLを挿入します([共有デバッガ]タブがアクティブになっていることを確認します)、[デバッグ]をクリックすると、キャッシュがクリアされます。それでも古い画像が表示される場合は、Scrap Againボタンを押してURLをスカルプします。

1
Jameel Khan

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" />
0
David Thomas