web-dev-qa-db-ja.com

Twitterカード[summary_large_image]に画像が表示されない

私は自分のウェブサイト用に一連のTwitterカードをセットアップしました。

Twitterカードのタイプは[summary_large_image]です。

私のウェブページの<head>に含まれるメタ情報は次のとおりです。

<meta name="Twitter:card" content="summary_large_image" />
<meta name="Twitter:site" content="@myTwitterAccount" />
<meta name="Twitter:creator" content="@myTwitterAccount" />

<meta name="Twitter:image:src" content="http://example.com/social/Twitter/large_image.png" />
<meta name="Twitter:image:width" content= "280" />
<meta name="Twitter:image:height" content= "480" />

<meta property="og:image" content="http://example.com/social/Twitter/large_image.png" />
<meta property="og:image:width" content= "280" />
<meta property="og:image:height" content= "480" />

<meta property="og:url" content="http://example.com/myfolder/mysubfolder/" />
<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="My Page Description" />

上記のマークアップに冗長性があることを認識しています-現在のセットアップの前に、任意の数のog:＆Twitter:meta要素を追加および削除しようとしました（冗長性が低い）代替の組み合わせ...

Twitterは[summary_large_image] Tw​​itterカードのドメインを確認し、ホワイトリストに登録しました。

Twitter Card Validatorは次のログを返します。

INFO:  Page fetched successfully
INFO:  19 metatags were found
INFO:  Twitter:card = summary_large_image tag found
INFO:  Card loaded successfully

カードのすべての要素は、バリデーターと私自身のTwitterストリームの両方でまったく問題なく表示されますが、...

...画像がありません。

私はラップトップで画像を一度表示することができました（しかし、二度と、一度はどう違うのかわかりません）。

ネイティブiOS Twitterアプリに画像を表示するのに問題はありません-画像は常にアプリに表示されます。

ポインタはありますか？ありがとう。

meta-tagstwitteropen-graph-protocoltwitter-card
6
Rounin

Twitterカード[summary_large_image]に画像を表示する前に、次の2つの重要な考慮事項があるようです。

1）画像の寸法は、（少なくとも）最小幅（280px）および最小高さ（150px）に準拠する必要があります。これより狭いか短いと、画像は表示されません。

2）別のページの[summary_large_image] Tw​​itterカードがすでに参照している[summary_large_image] Tw​​itterカードの画像をページが参照できない（と思われる）。実行しようとすると、画像は表示されません。 （この制限はネイティブiOS Twitterアプリには適用されません。）

制限2）を回避した方法は、PHP関数を使用することです

uniqid()

ランダムな英数字文字列を末尾に追加するには

http://example.com/social/Twitter/large_image.png

そのため、meta要素全体が次のようになります。

echo '<meta property="og:image" content="http://example.com/social/Twitter/large_image.png?'.uniqid().'" />';
8
Rounin