it-swarm.com.de

Twitter-Karte [summary_large_image] zeigt kein Bild an

Ich habe eine Reihe von Twitter-Karten für meine Website eingerichtet.

Die Art der Twitter-Karte ist [summary_large_image].

Die Meta-Informationen, die in _<head>_ meiner Webseite enthalten sind, lauten:

_<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" />
_

Ich erkenne, dass im obigen Markup Redundanz vorhanden ist. Vor dem aktuellen Setup habe ich versucht, eine beliebige Anzahl von _og:_ & _Twitter:meta -Elementen hinzuzufügen und zu entfernen (weniger Redundanz) ) alternative Kombinationen ...

Twitter hat meine Domain für [summary_large_image] Twitter-Karten überprüft und in die Whitelist aufgenommen.

Der Twitter Card Validator gibt das folgende Protokoll zurück:

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

Alle Elemente der Karte werden sowohl auf dem Validator als auch in meinem eigenen Twitter-Stream einwandfrei angezeigt, außer ...

... das Bild ist nicht da.

Ich habe es geschafft, das Bild einmal auf meinem Laptop anzuzeigen (aber nie wieder, und ich bin mir nicht sicher, was ich diesmal anders gemacht habe).

Es gibt keine Probleme, das Bild in der nativen iOS-Twitter-App anzuzeigen - das Bild wird immer in der App angezeigt.

Irgendwelche Hinweise? Vielen Dank.

6
Rounin

Es gibt anscheinend zwei wichtige Aspekte, die berücksichtigt werden müssen, bevor das Bild für die Twitter-Karte [summary_large_image] angezeigt wird:

1) Die Bildmaße müssen (mindestens) der Mindestbreite (280px) und der Mindesthöhe (150px) entsprechen. Wird das Bild schmaler oder kürzer, wird es nicht angezeigt.

2) Eine Seite kann (anscheinend) kein Bild für ihre [summary_large_image] Twitter-Karte referenzieren, auf die die [summary_large_image] Twitter-Karte einer anderen Seite bereits verwiesen hat. Wenn dies versucht wird, wird das Bild nicht angezeigt. (Diese Einschränkung gilt nicht für die native iOS-Twitter-App.)

Ich habe die Einschränkung 2) umgangen, indem ich die Funktion PHP verwendet habe

uniqid()

um eine zufällige alphanumerische Zeichenfolge an das Ende von anzuhängen

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

so dass das gesamte Metaelement lautet:

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