Was ist Open Graph und wie kann ich es für meine Website verwenden?

Das Erstellen von Inhalten und das Verwalten einer Website kann viel Zeit in Anspruch nehmen. Wie können wir sicherstellen, dass unsere Inhalte hervorstechen, wenn sie in sozialen Feeds im Internet geteilt werden?

  • Was ist Open Graph?
  • Warum brauche ich es?
  • Was passiert, wenn ich es nicht habe?
  • Beginnend mit den Grundlagen des offenen Graphen
  • Website geöffneter Diagrammtyp
  • Einige andere offene Diagramm-Tags, die es wert sind, hinzugefügt zu werden
  • Twitter und andere soziale Netzwerke verwenden Open Graph
  • Bilder in offener Grafik
  • Testen Sie Ihre offenen Diagramm-Tags
  • Kann ich ein Beispiel bekommen?

Was ist Open Graph?

Open Graph ist ein Internetprotokoll, das ursprünglich von Facebook erstellt wurde, um die Verwendung von Metadaten innerhalb einer Webseite zur Darstellung des Inhalts einer Seite zu standardisieren.

Darin können Sie Details angeben, die so einfach wie der Titel einer Seite oder so spezifisch wie die Dauer eines Videos sind. Diese Teile passen alle zusammen, um eine Darstellung jeder einzelnen Seite des Internets zu bilden.

Warum brauche ich es?

Inhalte im Internet werden normalerweise mit mindestens einem Ziel erstellt - sie mit anderen zu teilen. Dies ist möglicherweise nicht unbedingt wichtig, wenn Sie es nur an einen Freund senden. Wenn Sie es jedoch freigeben oder in einem sozialen Netzwerk oder einer App mit umfangreichen Vorschauen freigeben möchten, möchten Sie, dass diese Vorschau genauso effektiv ist wie möglich.

So werden Sie 2020 ein Full-Stack-Webentwickler #javascript #fullstack //t.co/A1TsFaDguD

- Colby Fayock (@colbyfayock), 10. März 2020

Dies wird dazu beitragen, die Leute zu ermutigen, Ihre Inhalte zu überprüfen und unweigerlich zu Ihren Inhalten zu klicken.

Was passiert, wenn ich es nicht habe?

Die meisten sozialen Netzwerke versuchen standardmäßig, eine Vorschau Ihrer Inhalte zu erstellen. Das geht meistens nicht so gut.

Nehmen Sie zum Beispiel meine Website colbyfayock.com.

Der Titel meiner Seite und die Beschreibung werden korrekt erfasst, aber es ist nicht der verlockendste Tweet in einem Feed.

Vergleichen Sie das mit der Vorschau eines einzelnen Beitrags und wir sehen eine andere Geschichte.

Was passiert also, wenn Sie keine offenen Diagramm-Tags haben? Es wird nichts Schlimmes passieren, aber Sie werden einige der Funktionen nicht nutzen, die dazu beitragen, dass sich Ihre Inhalte von den vielen anderen Inhalten abheben, die im Internet veröffentlicht werden.

Beginnend mit den Grundlagen des offenen Graphen

Die vier grundlegenden Open Graph - Tags , die für jede Seite erforderlich sind , sind og:title, og:type, og:image, und og:url. Diese Tags sollten für jede Seite, die Sie bedienen, eindeutig sein. Dies bedeutet, dass sich die Tags Ihrer Homepage von der Seite Ihres Blogpost-Artikels unterscheiden sollten.

Obwohl es ziemlich einfach sein sollte, finden Sie hier eine Aufschlüsselung der Bedeutung der einzelnen Tags:

  • og:title: Der Titel Ihrer Seite. Dies entspricht normalerweise dem Tag Ihrer Webseite, es sei denn, Sie möchten es anders präsentieren.
  • og:type: Der "Typ" der Website, die Sie haben. Ich werde im nächsten Abschnitt mehr erklären, obwohl ein generischer "Typ" "Website" ist.
  • og:image: Dies sollte ein Link zu einem Bild sein, das Ihren Inhalt darstellen soll. Es sollte ein hochauflösendes Bild sein, das die sozialen Netzwerke in ihren Feeds verwenden.
  • og:url: Dies sollte die URL der aktuellen Seite sein.

Wenn Sie ein Tag auf Ihrer Website platzieren, sollten Sie es zusammen mit anderen Metadaten in das platzieren. Das verwendete Tag ist ein Tag und sollte wie folgt aussehen:

Wenn ich also vier grundlegende Open-Graph-Tags für meine Website colbyfayock.com erstellen würde, könnte dies folgendermaßen aussehen:

Website geöffneter Diagrammtyp

Das Open-Graph-Protokoll enthält einige Variationen des unterstützten Website-Typs. Dies umfasst Typen wie Website, Artikel oder Video.

Wenn Sie Ihre offenen Diagramm-Tags einrichten, möchten Sie eine Vorstellung davon haben, welcher Typ für Ihre Website sinnvoller ist. Wenn sich Ihre Seite auf ein einzelnes Video konzentriert, ist es wahrscheinlich sinnvoll, den Typ "Video" zu verwenden. Wenn es sich um eine allgemeine Website ohne bestimmte Branche handelt, möchten Sie wahrscheinlich nur den Typ "Website" verwenden.

Ähnlich wie bei den anderen ist dies für jede Seite einzigartig. Wenn Ihre Homepage also "Website" ist, können Sie immer eine andere Seite vom Typ "Video" haben.

Wenn ich also einen offenen Diagrammtyp für meine Website erstellen würde, könnte dies auf meiner Homepage wie folgt aussehen:

Wenn Sie zu einem Blog-Beitrag navigieren, sieht es folgendermaßen aus:

Die gängigsten Open-Graph-Website-Typen finden Sie auf der Open-Graph-Webseite: //ogp.me/#types

Einige andere offene Diagramm-Tags, die es wert sind, hinzugefügt zu werden

Obwohl Sie mit den Grundlagen im Allgemeinen einverstanden sind, sind hier einige weitere, die es wert wären, hinzugefügt zu werden:

  • og:description: Eine Beschreibung Ihrer Seite. Ähnlich wie og:titledies kann das gleiche sein wie das Tag Ihrer Website , es sei denn, Sie möchten es anders präsentieren.
  • og:locale: Wenn Sie Ihre Tags lokalisieren möchten, ist es wahrscheinlich sinnvoll, das Gebietsschema einzuschließen. Das Format ist language_TERRITORY, wo der Standard ist en_US.
  • og:site_name: Der Name der gesamten Website, auf der sich Ihr Inhalt befindet. Wenn Sie sich auf einer Blogpost-Seite befinden, wird möglicherweise titleder Titel dieses Blogposts verwendet, wobei site_nameder Name Ihres Blogs lautet.
  • og:video: Haben Sie ein Video, das Ihre Inhalte unterstützt? Hier ist eine Chance, es aufzunehmen. Fügen Sie mit diesem Tag einen Link zu Ihrem Video hinzu.

Diese Tags werden im gleichen Muster wie zuvor hinzugefügt:

Twitter und andere soziale Netzwerke verwenden Open Graph

Die meisten sozialen Netzwerke halten sich an die Grundlagen offener Graph-Standards, einige enthalten jedoch auch eine eigene Erweiterung, um das Erscheinungsbild ihres Ökosystems anzupassen.

Auf Twitter können Sie beispielsweise angeben twitter:card, welche Art von „Karte“ Sie verwenden können, wenn sie Ihre Website anzeigen. Zu diesem Zeitpunkt umfassen ihre Kartentypen:

  • Zusammenfassung
  • summary_large_image
  • App
  • Spieler

Dies hilft Ihnen bei der Auswahl, wie Ihre Links in ihrem Feed verwendet werden. Wenn Sie sich summary_large_imagezum Beispiel dafür entscheiden, zeigt Twitter Ihre Links mit großen hochauflösenden Bildern an, solange Sie diese im og:imageTag angeben.

Im Folgenden finden Sie einige Kurzreferenzen zur Dokumentation der Verwendung von Open-Graph-Tags für einige Social-Media-Websites:

  • Twitter: //developer.twitter.com/de/docs/tweets/optimize-with-cards/guides/getting-started
  • Facebook: //developers.facebook.com/docs/sharing/webmasters/
  • Pinterest: //developers.pinterest.com/docs/rich-pins/overview/?
  • LinkedIn: //www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=de

Bilder in offener Grafik

Während Sie Ihr Bild hinzufügen, wie og:imagees oft genug sein sollte, kann es manchmal schwierig sein, Ihr Bild korrekt anzuzeigen. Wenn Sie auf Probleme stoßen, enthält der Open Graph-Standard einige Bild-Tags wie og:image:urlvs og:image:secure_urlsowie das og:image:widthund og:image:height.

Stellen Sie sicher, dass Sie alle Hinweise und Beispiele in der offenen Diagrammdokumentation befolgen. Darüber hinaus haben einige der sozialen Netzwerke Bildanforderungen. Für Twitter ist beispielsweise ein Verhältnis von 2: 1 mit einer Mindestgröße von 300 x 157 und einer Höchstgröße von 4096 x 4096 unter 5 MB sowie im JPG-, PNG-, WEBP- oder GIF-Format erforderlich.

Wenn Sie nicht weiterkommen, testen Sie Ihre Tags mithilfe der Tools des Social Media-Netzwerks, um festzustellen, ob Sie das Problem finden können.

Testen Sie Ihre offenen Diagramm-Tags

Glücklicherweise bieten unsere bevorzugten sozialen Netzwerke auch Tools, mit denen wir unsere Tags debuggen können. Sobald Sie sichergestellt haben, dass Ihre Tags tatsächlich im Quellcode Ihrer Website angezeigt werden, können Sie eine Vorschau des Erscheinungsbilds Ihrer Website im Feed anzeigen.

  • Twitter: //cards-dev.twitter.com/validator
  • Facebook: //developers.facebook.com/tools/debug/
  • Pinterest: //developers.pinterest.com/tools/url-debugger/

Weiter in offene Graph-Tags graben

Während die meisten davon eine einfache Website abdecken sollten, gibt es einige weitere Tags, die Ihnen und Ihrem Unternehmen bei der Auffindbarkeit in sozialen Netzwerken helfen können.

Wenn Sie mehr tauchen möchten, bietet die Dokumentation eine hervorragende Liste aller verfügbaren Tags, die Sie verwenden können.

//ogp.me/

Kann ich ein Beispiel bekommen?

Wenn Sie nur nach einem Beispiel suchen, um loszulegen, sollten Sie Folgendes tun, wenn Sie Ihre Tags für einen Blog-Beitrag einrichten:

Suchen Sie nach anderen Möglichkeiten, um Ihre Inhalte zu optimieren und zu analysieren?

  • So fügen Sie Ihrem Github-Projekt-Repository ein Social Media-Bild hinzu
  • So verstehen Sie Google Analytics und den Traffic auf Ihrer Website
  • So richten Sie die Leistung des YouTube-Kanals mit Google Analytics ein und verfolgen sie

Folgen Sie mir für mehr Javascript, UX und andere interessante Dinge!

  • ? Folge mir auf Twitter
  • ? ️ Abonniere mein Youtube
  • ✉️ Melden Sie sich für meinen Newsletter an