So vermeiden Sie das beschämende Aussehen Ihrer Website auf Twitter und Facebook

Foto von Hannes Wolf auf Unsplash

Wenn Sie bereits wissen, was Facebook Open Graph und Twitter Cards sind, richtet sich dieser Artikel nicht an Sie. Bitte geben Sie es an jemanden weiter, der diese nicht versteht.

Einführung

Laut Mashable handelt es sich bei 52% der auf Twitter freigegebenen Links um Artikel und Bilder, wobei die Bilder etwa 36% des Kuchens ausmachen. Durchschnittlich teilen die Menschen ungefähr 30 Millionen einzigartige Bilder pro Tag.

Aus Mashable

Hast du gekeucht?

Ich tat.

Tweets mit Bildverknüpfungen erhalten die doppelte Verlobungsrate derjenigen ohne, sagt Buffer.

Diese Statistiken gelten nur für Twitter. Die kombinierten Statistiken für andere beliebte Social-Media-Plattformen werden Sie umhauen.

Fazit ist: Menschen sind visuelle Wesen.

Wenn Ihre Website in sozialen Medien geteilt wird und wie ein langweiliger Sauereintopf aussieht, ist das Engagement gering. Teilen Sie einen Link, der in der Zeitleiste der Personen gut dargestellt wird, und Sie erhalten mit größerer Wahrscheinlichkeit die Art von Engagement, die Sie suchen.

Berücksichtigen Sie diese bei der Erstellung Ihrer Website nicht? Du machst definitiv etwas falsch.

Was genau ist der beschämende Blick?

Nun, nicht alle Links sind gleich. Betrachten Sie die folgenden Grafiken. Sie repräsentieren die Darstellung von zwei verschiedenen Links, die auf Twitter geteilt werden. Der eine stammt von Medium, der andere von einer Website von mir.

Dies ist ein geteilter mittlerer Artikel, und er sieht auf jeden Fall gut aus!

Die vorherige Grafik enthält ein großes Bild, einen Titel und eine Beschreibung und sieht im Allgemeinen gut aus.

Hier ist ein Link zu meiner eigenen Website, der nicht so gut aussieht. Trauriges Zeug :(

Das sieht einfach nicht so gut aus. Was tut Medium also, damit die gemeinsam genutzten URLs gut aussehen?

Vom Nullpunkt zum Helden

Lassen Sie uns Schritt für Schritt vorgehen, um eine Website vom "beschämenden Look" zum "verdammt großartig" zu machen.

Für unsere Überlegungen verwende ich eine meiner Websites, TheReduxJSBooks.com, als Laborratte.

Um eine Vorschau der Linkvorschau auf Twitter und Facebook anzuzeigen, bieten beide Unternehmen Debugger an, in die Sie Ihren Link einfügen und sich selbst davon überzeugen können.

Hier ist der Link für den Facebook Sharing-Debugger und dieser für Twitter.

Beginnen wir bei „Null“ und sehen wir uns an, wie TheReduxJSBooks.com aussieht, wenn es jetzt freigegeben wird.

Folgendes haben wir auf Facebook:

Die Armen sehen aus, wenn sie auf Facebook (FB) geteilt werden. Wie im FB-Sharing-Debugger simuliert, gelang es FB, die URL und den ersten Text auf der Website anzuzeigen

Und das auf Twitter:

So schlecht - es werden keine Vorschauen angezeigt :( Twitter ruft keine Informationen von der Website ab. Sie müssen die Arbeit erledigen.

Diese sehen im Moment nicht beeindruckend aus, aber wir werden das in Kürze beheben.

Um zu kontrollieren, wie Ihre Links bei der Weitergabe aussehen, hat Facebook die Technologie Open Graph entwickelt. Es wird fast zu einem Standard für alle anderen Dienste und nicht nur für Facebook. Twitter nennt ihr etwas anderes, Twitter Cards.

Mal sehen, wie diese funktionieren.

Facebook Open Graph

Im Facebook Open Graph geht es ganz einfach darum, bestimmte Meta-Tags in den Kopf Ihres HTML-Codes einzufügen.

Diese Metadaten werden von Ihrer Site gelesen und wirken sich auf die Vorschau Ihres Links aus, wenn Sie freigegeben werden.

Werfen Sie jetzt einen Blick auf die Endergebnisse, die wir erzielen, wenn der Link auf Facebook geteilt wird.

Das Endergebnis, auf das wir schießen.

Was ist jetzt anders?

Was ist anders?

Nun, das sieht wunderschön aus. Mit einem benutzerdefinierten Bild, einem Titel und einer Beschreibung steuern Sie vollständig, wie Ihre Linkvorschau angezeigt wird.

Hier ist der Code, der die oben gezeigte Vorschau ergab:









Ich weiß, es fühlt sich wie viel Code an, ist es aber nicht.

Diese befinden sich im Kopf Ihrer HTML-Seite. Zum Beispiel


   

Lassen Sie uns nun die einzelnen Open Graph-Metatags nacheinander durchgehen.

Hier ist der erste:

Was Sie dort haben, ist ein Meta-Tag mit zwei Attributen, Eigenschaft und Inhalt.

property definiert die Eigenschaft des betreffenden Metatags. In diesem Fall hat es den Wert og: url.

Wie Sie vielleicht erraten haben, ist og die Abkürzung für Open Graph und url gibt an, dass dies die URL des freigegebenen Links beschreibt. Der Inhalt enthält dann den Wert für die URL, d. H. "Https://thereduxjsbooks.com".

Das war einfach.

Gleiches gilt nun für die Tags type, title und description. Siehst du die?

Die Tags für Typ, Titel und Beschreibung.

Die nächsten Meta-Tags beschreiben die Bildvorschau. Der erste hat eine Eigenschaft, og: image, und der Inhalt ist die URL zum Bild.

Wichtig ist, dass Sie für Facebook Open Graph die Breite und Höhe des Bildes angeben müssen - vorzugsweise 1200 x 630 Pixel

Die anderen Tags beschreiben lediglich den Alternativtext, den Typ, die Breite und die Höhe des Bildes.

Der Alternativtext des Bildes, Typ, Breite und Höhe!

Toll! Jetzt kennen Sie die wichtigsten Teile des Facebook Open Graph.

Twitter-Karten

Wie bei Facebook haben Sie auch die vollständige Kontrolle darüber, wie Ihr Link angezeigt wird, wenn Sie ihn auf Twitter teilen.

Wenn Sie Ihren Link auf Twitter teilen und davon ausgehen, dass Sie bereits die Facebook Open Graph-Metatags festgelegt haben, erhalten Sie tatsächlich eine Vorschau.

Es könnte ungefähr so ​​aussehen:

Einige grundlegende Beschreibungen stammen aus den Facebook Open Graph-Metatags. Eigentlich gar nicht so schlecht.

Nicht schlecht, aber auch nicht großartig.

Wenn wir fertig sind, haben wir Folgendes auf Twitter:

Das bessere Ergebnis für Twitter.

Wie Sie sehen, ist das Vorschaubild viel größer und die Beschreibung nicht so lang. Facebook nimmt mehr Zeichen auf - aber nicht Twitter.

Hier sind die grundlegenden Tags, die Sie benötigen.


    
    
    
    

Einfach!

Das erste Meta-Tag ist sehr wichtig.

Im Gegensatz zu Facebook Open Graph mit den Eigenschaften und Inhaltsattributen verwenden Twitter-Karten Namen und Inhaltsattribute.

Hier ist der Name twitter: card und der Inhalt summary_large_image. Dies beschreibt den Typ der gewünschten Twitter-Karte. Es gibt viele verschiedene Arten von Twitter-Karten. Mit summary_large_image erhalten Sie jedoch die große Bildvorschau, die Sie zuvor gesehen haben.

Im Gegensatz zu Facebook müssen Sie die Breite und Höhe des Bildes nicht beschreiben

Nur den Namen, Twitter: Bild und Inhalts-URL reichen aus!

Geben Sie zum Schluss einfach den Alternativtext des Bildes und eine kürzere Beschreibung für Twitter ein.


Und das ist alles!

Was noch schöner ist, ist, dass das Einrichten bedeutet, dass andere Dienste diese Metadaten gleichermaßen nachschlagen und Ihre Links wunderschön anzeigen können!

Hier ist eine Vorschau, wann der Link auf Slack geteilt wird.

Derselbe Link wurde auf Slack geteilt. Das sieht gut aus!

Slack ist nur einer von vielen Diensten, die die Facebook Open Graph- und Twitter Card-Technologie ehren.

Fazit

Ich habe viele Informationen übersprungen, um diesen Artikel kurz zu halten. Weitere technische Informationen finden Sie in den offiziellen Dokumenten für Facebook Open Graph und Twitter Cards.

Jetzt wissen Sie, dass diese wunderschönen Linkvorschauen auf Twitter und Facebook nicht von ungefähr da waren.

Jemand hat den Code geschrieben, und jetzt wissen Sie, wie.

Erstellen Sie Websites, die auf Twitter und Facebook besonders gut aussehen!