Twitter Cards und Open Graph

Scherzkeks :pieks:

Allerdings sollten wir das Thema Soziale Netzwerke wirklich mal näher besprechen. Bin da ja auch schon lange dran und ja, ich sehe Probleme. Das mit Twitter-Cards, schrieb ich Dir das nicht vor ein paar Wochen oder auch Monaten? Ok, müssen Monate sein, denn die Silvester-Seite nutzt es.

Aber Achtung wegen OG, Schema, rdf, microformat, ld+json usw. DIe Portale haben zwar alle "ihren" eigenen Standard, aber sie nutzen auch andere angaben. So nimmt FB z.B. das Bild aus Schema, wenn das vor dem OG steht. Das Problem dabei, beide erfordern andere Bildgrößen, damit man das große Bild im Post bekommt. FB holt sich dann also ein Bild, das nicht für es erstellt wurde. Pinterest dito. Twitter auch, wenn man sich nicht nur auf Bild beschränkt, sondern alle Möglichkeiten nutzt.

Google liebt ld+json und geografische Angaben. FB gibt dabei dann aber eine Warnung raus, dass die Daten nicht zum "Type" stimmen. Die Rich-Pins von Pinterest kollidieren z.B. auch teilweise mit OG.

Aber das Thema an sich ist gut und auch wichtig, sehe ich zumindest so. Facebook, Twitter, Pinterest und ja, auch Instagram.

Anmerkung für Dich noch Alex....

Du musst zu

<meta property="og:image" content="https://beispiel.rocks/versicherungen.rocks/images/insurance-1991216_640.jpg"/>

auch die Größe angeben mit

<meta property="og:image:width" content="1024" />
<meta property="og:image:height" content="682" />

Die Werte sind nun von mir als Beispiel, nicht von Dir.

Wenn Du das nicht machst, dann Postet FB ein kleines Bild, das es nicht kennt, denn der Post, also der Inhalt und die Bilddaten sind getrennte Prozesse. Das Bild geht über einen externen Proxy (seit 2016). Ohne die Größenangabe weiß "der Post" gar nicht, wie groß das Bild ist, das erst später geladen wird. Dann ist der Post aber schon abgesetzt und wird nicht mehr geändert. Nur der Nächste (der gleichen URL) hat dann das richtige Format.

"2. Verwende die Open Graph-Tags og:image:width und og:image:height

Durch Verwendung dieser Tags werden die Bilddimensionen dem Crawler angegeben, damit dieser das Bild rendern kann, anstatt es asynchron herunterladen und verarbeiten zu müssen."

Wenn Du den FB-Linter allerdings vorher nutzt, dann wird das Bild geladen und ist dann auch richtig, das täuscht also. Ein direkter Share ohne Linter ist falsch.

Dein PlugIn ist also veraltet und nutzt nicht die neuen Anforderungen.

Nee, ist auch nicht einfach. Wobei, eigentlich war es das mal, aber in den letzten Jahren näherten sich alle irgendwie an und nutzen teils mehrere Protokolle. Nur die kollidieren dann teilweise. Alleine schon so was wie "Photo", "Image" und "Logo". Alle drei gibt es, alle drei haben unterschiedliche Bedeutungen, aber alle drei werden von den Portalen auch anders eingesetzt. OGP ist eine sehr gute Quelle, aber das ist eben nur der eigentliche Standard, genauso wie Schema.org. Keines der Social-Portale nutzt den Standard so, wie er ist. Einige lassen was weg, das ist noch das kleinste Problem, andere "definieren aber einfach um".

Versuche mal einen "place" oder eine "location" mit Koordinaten zu hinterlegen. Da wirste kirre bei, bis das alle mal gefressen haben. Dann gibt es teilweise, ja nach Kontext, die Angaben "URL". Wenn man nun denkt, da kommt die Webseite rein, nee. Da muss dann das Profil von Twitter oder FB rein. Oder bei "Author" der Nickname vom Portal, glaube bei Twitter. Letzteres kollidiert dann aber mit G+.

Ach ja, wegen veraltet. Hatte ich Dir ja auch geschrieben. Das was Xovi da als Fehler bemängelt ist keiner und die Vorgabe, die die dann liefern, die ist falsch, denn Twitter nutzt die Angaben gar nicht mehr.

Da helfen also Anleitungen gar nicht wirklich weiter, da muss man wirklich alles testen.

Sieht man auch sehr schön beim Google-Test. Jage die Seite da mal durch, dann hagelt es Fehler:

Zitat

author
Für das Feld author ist ein Wert erforderlich.

datePublished
Für das Feld datePublished ist ein Wert erforderlich.

headline
Für das Feld headline ist ein Wert erforderlich.

image
Für das Feld image ist ein Wert erforderlich.

publisher
Für das Feld publisher ist ein Wert erforderlich.

dateModified
Das Feld dateModified ist ein empfohlenes Feld. Bitte geben Sie einen Wert ein, falls verfügbar.

mainEntityOfPage
Das Feld mainEntityOfPage ist ein empfohlenes Feld. Bitte geben Sie einen Wert ein, falls verfügbar.

Alles anzeigen

Oder Deine Angabe oben im <html> also der Namespace für FB. Der ist ebenso falsch. Wegen dem hagelt es Fehler im w3c. Die Angabe, die Du da hast, die ist für HTML4 bzw. xHTML gedacht, aber nicht für HTML5, das Du verwendest.

Und beobachte die Cards mal regelmäßig bzw. beobachte Twitter und seine Anforderungen. Du nutzt nämlich z.B. den Card-Typ "photo".

<meta name="twitter:card" content="photo" />

Den gibt es aber schon länger nicht mehr und wird nur noch übergangsweise unterstützt. Fällt er weg, dann gehen Deine Cards nicht mehr.

Zur Auswahl stehen: The card type, which will be one of “summary”, “summary_large_image”, “app”, or “player”.

Richtig in Deinem Fall wäre summary_large_image

Zitat von Alex07

ach ja und bei HTML5 ist das richtig (war vorher falsch... )

HTML

[TABLE]
[TR]
[/TR]
[TR]
[TD]<html xmlns="https://beispiel.rocks/beispiel.rocks/www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" dir="ltr" >[/TD]
[/TR]
[TR]
[TD] [/TD]
[/TR]
[/TABLE]

Doofe Frage... Warum? Es ist valide, das stimmt. Aber warum gibst Du einen XML-Namespace an, wenn Du gar kein XML nutzt?

Gültig, valide, ausreichend und "nationaler" wäre einfach ein

<html lang="de">

Aber weil ich es oben irgendwo schrieb. Ich habe gerade selbst mit den Auszeichnungen Probleme. Pinterest hat was geändert und die Änderung ist mit keinem kompatibel, weder FB noch Twitter.

"durch andere Strukturierte Daten"

Aufpassen, denn genau hier liegt mein Problem mit Pinterest!!!

Zur Erklärung. Ich hatte immer den Type "product" für die Unterkünfte und an manchen Stellen den Type "Website". Pinterest stellte nun die Anforderungen von "Product" um, kann ich so also nicht mehr nutzen. Nur viel Auswahl haben die nicht. Also auf "Article" gewechselt und schon gingen die Probleme los, denn der Type kollidiert mit anderen Angaben. Nun müssen neue rein, andere raus. Dann geht Pinterest und Twitter, FB aber nicht mehr

Ursache des Problems? Datenmischung. Genauso wie bei Dir auf der Seite. Du nutzt auch jetzt schon drei verschiedene Syntaxen. Open Graph, Twitter, Schema.org. Die einzelnen Dienste holen sich also nicht mehr die speziell für sie erstellten Angaben, sondern die, die sie am schnellsten finden, egal von welcher Auszeichnung.

Es kann also z.B. drei "Description" geben. Als OG, als TWITTER und als "Itemscope". Doof nur. Einige nehmen den ersten Treffer, andere den letzten und wieder andere ALLE.