Sie sind wahrscheinlich sehr oft auf diese Einbettungen gestoßen, ohne darüber nachzudenken Immer wenn Sie jemandem einen Link auf einer Social-Media-Plattform oder einer Messaging-App senden, wird der Link erweitert und enthält Inhalte von der Website, normalerweise ein Bild, einen Titel und eine Beschreibung. So richten Sie das ein.
Was sind Open Graph-Meta-Tags?
Die Konfiguration für diese Einbettungen ist mit <meta> Tags, normalerweise in der Kopfzeile Ihrer Website. Dafür gibt es einen Standard, der ursprünglich bei Facebook entwickelt wurde und sich “Open Graph Protocol nennt.”
Die Tags verwenden immer das folgende Format mit einem “ Eigentum” Wert auf “og:” gefolgt vom Typ des Tags und einem “Inhalt” Wert auf den Wert des Inhalts auf der Seite gesetzt:
<meta property=”og:type” content=”value” />
Eine grundlegende Einrichtung für die meisten Websites sieht beispielsweise wie folgt aus:
<meta property=”og:image” content=”https://i.imgur.com/imagelink.jpg”> <meta property=”og:title” content=”Website-Titel” /> <meta property=”og:description” content=”Website-Beschreibung” /> <meta property=”og:type” content=”website” /> <meta property=”og:url” content=”https://example.com/” />
Dadurch werden Bild, Titel & Link, Beschreibung und teilt Websites mit, dass es sich um eine Website handelt. Dies führt zu einer einfachen Einbettung wie der folgenden:
Werbung
Es ist ein einfaches Format, aber es gibt einige Optionen, die die meisten Websites erkennen. Sie finden die vollständige Liste auf der Open Graph-Website, aber wir werden die wichtigsten hier behandeln.
Twitter erkennt OG-Tags, aber es ist erwähnenswert, dass sie auch ihre eigenen Tags haben, die Priorität haben.
<meta name=”twitter:title” content=”Website-Titel”> <meta name=”twitter:description” content=”Website-Beschreibung”> <meta name=”twitter:image” content=”https://i.imgur.com/imagelink.jpg”>
OG-Meta-Tags verwenden
Zuerst der Titel. Dies ist ein extrem einfaches Tag, das aber für jeden notwendig ist. Auch wenn Ihre Einbettung ein Objekt anstelle einer Seite darstellt, sollte sie dennoch einen Titel haben, der erklärt, was es ist.
<meta property=”og:title” content=”Website-Titel” />
Wenn Ihr Titel die Aufgabe nicht erfüllt, können Sie optional eine erweiterte Beschreibung hinzufügen:
<meta property=”og:description” content=”Website-Beschreibung” />
Das og:type-Tag ist auch sehr wichtig, da es Websites mitteilt, welche Art von Inhalten Sie verlinken und wie sie formatiert werden sollen. Es erlaubt auch verschiedene Arten von optionalen Parametern je nach Typ. Es gibt ein paar verschiedene Optionen:
- Website, die eine grundlegende Standardeinstellung ist.
- Artikel, der einen Nachrichten-/Blog-Beitrag darstellt und die optionalen Parameter veröffentlichte_zeit , geänderte_zeit , Autor , Abschnitt und Tag enthält.
- Profil, das einen Nutzer darstellt und Optionen für Vorname, Nachname, Nutzername und Geschlecht bietet.
- video.other, das ein Video darstellt. Es gibt auch Tags für Filme und Fernsehsendungen mit eigenen Parametern.
- Verschiedene musikbezogene Tags, von denen einige auf Websites wie Facebook auf die weiße Liste gesetzt wurden.
Für optionale Parameter müssen Sie eine separate Meta-Property mit dem Parameternamen hinzufügen. Wenn Sie beispielsweise music:duration:
<meta property=”music:duration” content=”60″ /> Werbung
Sie möchten auch das URL-Tag so einrichten, dass es zurück zu Ihrer Website führt.
<meta property=”og:url” content=”https://example.com /” />
Wenn Sie möchten, dass ein Bild mit Ihrer Einbettung angezeigt wird, müssen Sie dies ebenfalls festlegen. Bilder haben viele Konfigurationsoptionen:
<meta property=”og:image” content=”https://example.com/ogp.jpg” /> <meta property=”og:image:secure_url” content=”https://secure.example.com/ogp.jpg” /> <meta property=”og:image:type” content=”image/jpeg” /> <meta property=”og:image:width” content=”400″ /> <meta property=”og:image:height” content=”300″ /> <meta property=”og:image:alt” content=”Ein leuchtend roter Apfel mit herausgenommenem Biss” />
Es gibt auch og:video und og:audio-Tags, die auf dieselbe Weise funktionieren, jedoch jeweils für Video und Audio.
Sie können den Site-Namen auch manuell festlegen, wenn der Titel dies tut’ Geben Sie das nicht weiter.
<meta property=”og:site_name” content=”CloudSavvy IT” />
Debugging von Meta-Tags
Es ist nicht die beste Idee, sie sich selbst zum Debuggen zu senden es ist schwieriger, schnelle Änderungen vorzunehmen.
Glücklicherweise gibt es einige großartige Tools wie Opengraph.xyz, in die Sie Ihren Link einfügen und die Einbettungsantwort für verschiedene Plattformen anzeigen können.
Werbung
Sie möchten den Link natürlich trotzdem auf jede Plattform senden, um zu überprüfen, ob er funktioniert.
Können Sie Tags dynamisch generieren?
Natürlich! Tags sind nur HTML, und bei den meisten modernen Web-Frameworks dreht sich alles um das Rendern von dynamischem HTML. Es muss jedoch im Header enthalten sein, sodass es bei einigen Frameworks, die sich auf das Schreiben in den Hauptteil der Seite konzentrieren, die Dinge verkomplizieren kann.
In React können Sie dies leicht mit einem Paket namens “react-helmet” tun , die in Ihrer Hauptkomponente App() enthalten ist. Sie können natürlich die Standard-JSX-Syntax verwenden, um alle Werte durch Werte aus dem Status Ihrer Seite zu ersetzen.
importiere Reagieren aus “reagieren”; Helm aus “react-helmet” importieren; function App() { return ( <main> <Helmet> <title>Example</title> <meta itemprop=”name” content=”Example” /> <meta property=”og:title” content=”Beispiel” /> <meta itemprop=”description” content=”Eine Beschreibung” /> <meta name=”description” content=”Eine Beschreibung” /> <meta property=”og: description” content=”Eine Beschreibung” /> <meta itemprop=”image” content=”http://example.com/example.png” /> <meta property=”og:image” content=” http://example.com/example.png” /> <meta property=”og:url” content=”https://example.com” /> <meta property=”og:type” content =”Website” /> </Helmet> </main>); }
Für WordPress können Sie dies mit einem Plugin konfigurieren oder etwas PHP zu Ihrer header.php-Datei hinzufügen.
<meta name=”description” content=”<?php if ( is_single() ) { single_post_title('', true); } else { bloginfo('name'); echo ” – “; bloginfo('description'); } ?>” />
Andere Frameworks unterstützen wahrscheinlich in gewisser Weise Meta-Tags, daher sollten Sie überprüfen, wie es für Ihre Anwendung funktioniert.