Hervorragende Software und praktische Tutorials
einführen
Open Graph-ProtokollMachen Sie jede Webseite zu einem Rich Object im sozialen Graphen. Dies wird beispielsweise bei Facebook verwendet, um jeder Webseite die gleiche Funktionalität wie jedem anderen Objekt auf Facebook zu verleihen.
Obwohl es viele verschiedene Technologien und Muster gibt, die kombiniert werden können, liefert keine einzelne Technologie genügend Informationen, um jede Webseite im sozialen Graphen umfassend darzustellen. Das Open Graph Protocol baut auf diesen bestehenden Technologien auf und bietet Entwicklern eine Lösung. Einfachheit für Entwickler ist ein Hauptziel des Open Graph Protocol und bietet vieleTechnische DesignentscheidungenInformationen bereitgestellt.
Grundlegende Metadaten
Um eine Webseite in ein Grafikobjekt umzuwandeln, müssen Sie eine grundlegendeMetadatenWir basieren aufRDFaDas bedeutet, dass Sie zusätzlicheEtikett.
Die vier erforderlichen Eigenschaften für jede Seite sind:
og:Titel
- Der Titel des Objekts sollte im Diagramm erscheinen, zum Beispiel „Der Felsen“.og:Typ
-ObjektTyp, zum Beispiel „video.movie“. Je nach angegebenem Typ sind möglicherweise weitere Eigenschaften erforderlich.og:Bild
– Eine Bild-URL, die ein Objekt im Diagramm darstellen soll.og:url
- Die kanonische URL des Objekts, die als permanente ID im Diagramm verwendet wird, z. B. „https://www.imdb.com/title/tt0117500/“.
Als Beispiel sei das Folgende genanntThe Rock auf IMDBOpen Graph-Protokoll-Markup:
<html prefix="og: https://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="Der Felsen" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html>
Optionale Metadaten
Die folgenden Eigenschaften sind für jedes Objekt optional und werden im Allgemeinen empfohlen:
og:audio
– Die URL der Audiodatei, die dieses Objekt begleitet.og:Beschreibung
- Eine ein- bis zwei Sätze lange Beschreibung Ihres Objekts.og:determiner
- Das Wort, das im Satz vor dem Titel des Objekts steht. (ein, eine, das, "", auto)aufzählen.WennAuto
Auswahl, der Verbraucher der Daten sollte zwischen "a" oder "an" wählen. Der Standardwert ist "" (leer).og:locale
- Diese Tags kennzeichnen das Gebietsschema. Das Format istSprache_Gebiet
Der Standardwert istde_US
.og:locale:alternate
-Diese Seite kann verwendet werden fürEine Reihe anderer Orte.og:Site-Name
- Wenn Ihr Objekt Teil einer größeren Website ist, sollte der Anzeigename für die gesamte Site gelten. Beispiel: „IMDb“.og:video
- Die URL der Videodatei, die dieses Objekt ergänzt.
Beispiel (Zeilenumbrüche dienen nur Anzeigezwecken):
<meta property="og:audio" content="https://example.com/bond/theme.mp3" /> <meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." /> <meta property="og:determiner" content="the" /> <meta property="og:locale" content="en_GB" /> <meta property="og:locale:alternate" content="fr_FR" /> <meta property="og:locale:alternate" content="es_ES" /> <meta property="og:site_name" content="IMDb" /> <meta property="og:video" content="https://example.com/bond/trailer.swf" />
RDF-Schema (inSchildkrötein) kann seinogp.me/nsGefunden in.
Strukturelle Eigenschaften
Einige Eigenschaften können zusätzliche Metadaten enthalten. Diese Metadaten werden auf die gleiche Weise angegeben wie beiEigentum
Dieselben anderen Metadaten wieInhalt
,AberEigentum
Es wird zusätzliche:
.
Sollenog:Bild
Es gibt einige optionale AttributeStrukturierungEigentum:
og:Bild:URL
- Dasselbeog:Bild
.og:image:sichere_URL
– Wenn die Webseite HTTPS erfordert, verwenden Sie eine alternative URL.og:image:type
- Das BildMIME-Typ.og:Bild:Breite
- Die Breite in Pixeln.og:Bild:Höhe
- Hohe Pixelanzahl.og:image:alt
- Eine Beschreibung des Bildinhalts (kein Titel). Wenn die Seite og:image angibt, sollte sie Folgendes angeben:og:image:alt
.
Vollständiges Bildbeispiel:
Sollenog:video
Tags haben die gleichen Tags wieog:Bild
Hier ist ein Beispiel:
Sollenog:audio
Für das Tag sind nur die ersten drei Attribute verfügbar (da die Größe bei Sounds keinen Sinn ergibt):
Arrays
Wenn eine Bezeichnung mehrere Werte haben kann, fügen Sie einfach mehrere Versionen derselben Bezeichnung auf der Seite ein. Bei Konflikten hat die zuerst verwendete Bezeichnung (von oben nach unten) Vorrang.
Ein Strukturattribut wird nach dem Stammtag platziert, in dem es deklariert ist. Sobald ein weiteres Stammelement analysiert wird, gilt das Strukturattribut als abgeschlossen und ein neues Stammelement beginnt.
Zum Beispiel:
Zeigt an, dass die Seite 3 Bilder hat, das erste Bild ist300 x 300
, der mittlere hat eine unbestimmte Größe und der letzte hat eine1000
Höhe in px.
Objekttyp
Um Ihr Objekt in einem Diagramm darzustellen, müssen Sie seinen Typ angeben. Dies geschieht mit dem folgendenog:Typ
Abgeschlossene Eigenschaften:
<meta property="og:type" content="website" />
Wenn sich die Community auf ein Typschema einigt, wird es der globalen Typenliste hinzugefügt. Alle anderen Objekte im Typsystem haben die FormCURIE
Globale Typen werden vertikal gruppiert. Jede Vertikale hat ihren eigenen Namespace. Der Wert des Namespaceog:Typ
Wird immer mit dem Namespace gefolgt von einem Punkt vorangestellt. Dies soll Verwechslungen mit benutzerdefinierten Namespace-Typen vermeiden, die immer einen Doppelpunkt enthalten.
Musik
- Namespace-URI:
https://ogp.me/ns/music#
og:Typ
Werte:
Musik:Dauer
-Ganze Zahl>=1 – Länge des Songs in Sekunden.Musik:Album
- Musikalbum Array - Das Album, aus dem dieses Lied stammt.Musik:Album:CD
-Ganze Zahl>=1 – Auf welcher CD des Albums sich das Lied befindet.Musik:Album:Titel
-Ganze Zahl>=1 - Welches Lied ist das?Musik:Musiker
-personenbezogene Daten Arrays- Der Musiker, der das Lied produziert hat.
Musik:Lied
- Musik.Lied - Songs von diesem Album.Musik:Lied:CD
-Ganze Zahl>=1 - dasselbe wie diesMusik:Album:CD
Ganz im Gegenteil.Musik:Lied:Track
-Ganze Zahl>=1 - dasselbe wie diesMusik:Album:Titel
Ganz im Gegenteil.Musik:Musiker
-personenbezogene Daten- Der Musiker, der das Lied komponiert hat.Musik:Veröffentlichungsdatum
-Datum und Uhrzeit- Das Veröffentlichungsdatum des Albums.
Musik:Lied
- mit MusikalbumDasselbe wieMusik:Lied:CD
Musik:Lied:Track
Musik: Schöpfer
-personenbezogene Daten- Der Ersteller dieser Playlist.
Musik: Schöpfer
-personenbezogene Daten- Der Ersteller der Site.
Video
- Namespace-URI:
https://ogp.me/ns/video#
og:Typ
Werte:
Video: Schauspieler
-personenbezogene Daten Arrays- Schauspieler im Film.Video: Schauspieler: Rolle
-Zeichenfolge- Die Rollen, die sie spielen.Video: Regisseur
-personenbezogene Daten Arrays- Filmregisseur.Video: Autor
-personenbezogene Daten Arrays- Drehbuchautor des Films.Video:Dauer
-Ganze Zahl>=1 – Länge des Films in Sekunden.Video:Veröffentlichungsdatum
-Datum und Uhrzeit- Das Erscheinungsdatum des Films.Video:Tag
-Zeichenfolge Arrays- Tags zum Film.
Video: Schauspieler
- mit Videos.FilmenDasselbeVideo: Schauspieler: Rolle
Video: Regisseur
Video: Autor
Video:Dauer
Video:Veröffentlichungsdatum
Video:Tag
Videoserie
- video.tv_show - Zu welcher Serie diese Episode gehört.
Mehrere TV-Folgen. Metadaten undVideo.FilmDasselbe.
Videos, die keiner anderen Kategorie angehören. Metadaten undVideo.FilmDasselbe.
Keine Vertikale
Dabei handelt es sich um global definierte Objekte, die zwar nicht in eine vertikale Ausrichtung passen, aber weithin verwendet und anerkannt werden.
og:Typ
Werte:
Artikel
- Namespace-URI:https://ogp.me/ns/article#
Artikel:Veröffentlichungszeit
-Datum und Uhrzeit- Wann der Artikel erstmals veröffentlicht wurde.Artikel:Änderungszeit
-Datum und Uhrzeit- Wann der Artikel zuletzt geändert wurde.Artikel:Ablaufzeit
-Datum und Uhrzeit- Wenn der Artikel abläuft.Artikel:Autor
-personenbezogene Daten Arrays- Der Autor des Artikels.Artikel:Abschnitt
-Zeichenfolge- Name des übergeordneten Abschnitts. Beispiel: TechnologieArtikel:Tag
-Zeichenfolge Arrays- Schlagwörter, die mit diesem Artikel in Zusammenhang stehen.
Buch
- Namespace-URI:https://ogp.me/ns/book#
Buch:Autor
-personenbezogene Daten Arrays- Wer hat das Buch geschrieben?Buch: ISBN
-Zeichenfolge- ISBNBuch:Veröffentlichungsdatum
-Datum und Uhrzeit- Das Datum, an dem das Buch veröffentlicht wurde.Buch:Tag
-Zeichenfolge Arrays- Schlagwörter, die mit diesem Buch in Zusammenhang stehen.
Profil
- Namespace-URI:https://ogp.me/ns/profile#
Profil:Vorname
-Zeichenfolge- Ein Name, der einer Person normalerweise von ihren Eltern gegeben oder von ihr selbst gewählt wird.Profil:Nachname
-Zeichenfolge- Ein von der Familie oder durch Heirat geerbter Name, unter dem die Person gut bekannt ist.Profil:Benutzername
-Zeichenfolge– Eine kurze, eindeutige Zeichenfolge zur Identifizierung.Profil:Geschlecht
-aufzählen(Männlich, Weiblich) – Ihr Geschlecht.
Webseite
- Namespace-URI:https://ogp.me/ns/website#
Keine Zuordnung über die grundlegenden Attribute hinaus. Jede Webseite, die nicht als solche gekennzeichnet ist, sollte alsog:Typ
Webseite.
Typ
Die folgenden Typen werden beim Definieren von Eigenschaften im Open Graph-Protokoll verwendet.
Typ | beschreiben | Wort |
---|---|---|
Boolesch | Boolesche Werte stellen wahre oder falsche Werte dar | Wahr, Falsch, 1, 0 |
Datum | DateTime stellt einen Zeitwert dar, der aus einem Datum (Jahr, Monat, Tag) und einer optionalen Zeitkomponente (Stunden, Minuten) besteht. | ISO 8601 |
aufzählen | Ein Typ, der aus einer Menge begrenzter konstanter Zeichenfolgenwerte (Enumerationsmitglieder) besteht. | Zeichenfolgenwert als Enumerationselement |
schweben | 64-Bit-Gleitkommazahl mit Vorzeichen | Der gesamte Text, der dem folgenden Format entspricht: 1.234 |
Ganze Zahl | 32-Bit-Ganzzahlen mit Vorzeichen. In vielen Sprachen werden Ganzzahlen größer als 32 Bit zu Gleitkommazahlen. Daher beschränken wir das Open Graph-Protokoll, um die Verwendung in mehreren Sprachen zu ermöglichen. | Der gesamte Text, der dem folgenden Format entspricht: 1234 |
Zeichenfolge | Unicode-Zeichenfolge | Alle Unicode-Zeichen ohne Escape-Zeichen |
Webseite | Eine Folge von Unicode-Zeichen, die eine Internetressource identifiziert. | Alle gültigen URLs, die das Protokoll https:// oder https:// verwenden |
Diskussion & Support
Weitere Informationen finden Sie in der Facebook-Gruppeoder Entwickler-MailinglisteDas Open Graph-Protokoll wird in erläutert. Es wird derzeit von Facebook verwendet (Siehe ihre Dokumentation)、Google(Siehe ihre Dokumentation)Und mixiGebraucht. Es wird von IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes, TIME, Yelp und vielen anderen veröffentlicht.
Durchführung
Die Open-Source-Community entwickelt zahlreiche Parser und Publishing-Tools. Wenn du etwas Cooles baust, lass es uns in der Facebook-Gruppe wissen!
- Facebook-Objekt-Debugger - Facebooks offizieller Parser und Debugger
- Google Rich Snippets Testtool- Open Graph Protocol-Unterstützung in bestimmten Branchen und Suchmaschinen.
- PHP-Validator und Tokenizer- OGP 2011-Eingabevalidatoren und Tokenizer in PHP5-Objekten
- PHP-Verbraucher - Kleine Bibliothek für den Zugriff auf Open Graph Protocol-Daten in PHP
- OpenGraphNode in PHP - Ein einfacher Parser für PHP
- PyOpenGraph - Eine in Python geschriebene Bibliothek zum Parsen von Open Graph-Protokollinformationen von Websites
- OpenGraph Ruby - Ruby Gem, das Webseiten analysiert und Open Graph-Protokoll-Tags extrahiert
- OpenGraph für Java - Kleine Java-Klasse zur Darstellung des Open Graph-Protokolls
- RDF::RDFa::Parser - Perl RDFa-Parser, der das Open Graph-Protokoll versteht
- WordPress-Plugins– Das offizielle WordPress-Plugin von Facebook, das Open Graph-Metadaten zu WordPress-basierten Websites hinzufügt.
- Alternatives WordPress OGP-Plugin– Ein einfaches, leichtes WordPress-Plugin, das Ihrer WordPress-Website Open Graph-Metadaten hinzufügt.