Share
Keine zwei Websites werden gleich gestaltet. Daher kann es für Social-Media-Plattformen wie Facebook schwierig sein, die richtigen Informationen im Inhalt zu finden, die angezeigt werden, wenn die Seite im Newsfeed freigegeben wird.
Hier kommt das Open Graph Protocol (OGP) ins Spiel; eine von Facebook entwickelte Initiative, mit der Webinhalte leicht erkannt und auf ihrer Plattform angezeigt werden können.
Untersuchen Sie Folgendes:
Im Facebook-Feed gerenderte Seite, ohne Open Graph-Meta-TagsDies gibt uns eine anständige Inhaltsvorschau auf dem Facebook-Feed mit Titel und Auszug. Wenn wir uns den Inhalt unserer Demo-Seite ansehen, gibt es jedoch noch ein paar weitere Elemente, die verwendet werden könnten. wie das Bild und der Name des Autors. Facebook wird diese Informationen nicht ohne Hilfe abrufen.
Sehen wir uns also an, wie wir Open Graph nutzen können, um die Präsentation von Inhalten auf Facebook zu verbessern.
Open Graph gibt eine Anzahl von Meta-Tags an, die Metainformationen des Inhalts definieren, ähnlich den Meta-Tags, die wir Suchmaschinen in gängigen SEO-Praktiken zuführen. Bevor wir diese Meta-Tags hinzufügen, müssen Sie den XML-Namespace für Open Graph in festlegen html.
Das Namespace-Konzept in HTML ähnelt anderen Web-Sprachen. Es verhindert Mehrdeutigkeiten in der Datenstruktur. Es bezieht sich darauf, welche semantischen Vokabulare oder Syntax verwendet werden soll, wenn der Namespace im Dokument vorhanden ist. In unserem Fall die og Namensraum bezieht sich auf das Open Graph Protocol, während das fb Namensraum bezieht sich auf die Facebook-eigene Open Graph-Spezifikation.
Alternativ können wir das verwenden Präfix Attribut, um diese Namespaces zu definieren. Zum Beispiel:
Facebook erfordert, dass immer einige Tags vorhanden sind.
Zuerst den Inhaltstyp, der durch angegeben wird og: typ Eigentum. Auf der Startseite setzen wir normalerweise den Wert auf Webseite.
Und normalerweise setzen Sie es auf Artikel für den Inhalt.
Es können auch mehrere andere Werte eingestellt werden og: typ Meta-Tag, die enthalten Produkt, Platz, video.Film, books.book, und vieles mehr, falls Ihr Inhalt kein typischer Artikel wie ein Blogbeitrag oder eine Nachricht ist.
Zum Beispiel:
Die mit der URL angegebene Inhalts-URL og: url Diese Eigenschaft muss eine absolute URL der Webseite ohne Abfragezeichenfolgen oder Hashwerte enthalten, ähnlich der kanonisch Verknüpfung. Auf der Startseite ist die URL die Homepage-URL:
Die Inhalts-URL wird etwas detaillierter sein:
Der Metatitel, der mit angegeben wird og: titel Diese Eigenschaft definiert den Titel für die Vorschau. Der Wert des Titels stimmt möglicherweise nicht immer mit dem in der Gruppe festgelegten Titel überein Titel Etikett; Sie können den Titel für die Freigabe ändern oder abkürzen.
Der Inhalt unserer Seite bezieht sich zum Beispiel auf CSS und ist für soziale Medien berechtigt: "Learn CSS: The Complete Guide". Der Dokumententitel lautet jedoch eigentlich "Open Graph Protocol - Tuts +", also:
Es gibt kein definiertes Zeichenlimit für og: titel, Facebook ist jedoch bekannt, dass er gelegentlich Titel abschneidet, insbesondere für Inhalte, die im Kommentarthread geteilt werden, wenn der Platz eng ist.
Facebook schneidet Titel und Beschreibung der freigegebenen Inhalte auf der Facebook-Wand ab Die Meta-Beschreibung, die mit angegeben wird og: Beschreibung Tag, liefert den freigegebenen Inhaltsauszug.
Facebook setzt der Beschreibung keine definierte Zeichen- oder Wortbegrenzung. Trotzdem wird Facebook die Beschreibung abschneiden, wenn sie es für richtig hält. Halten Sie die Beschreibung also kurz und verlockend.
Das Meta-Image wird mit definiert og: Bild, So können Sie den Inhalt visuell darstellen, und der Wert muss nicht immer ein Bild im Inhalt sein. Verwenden Sie das beste Bild, um die Leser dazu zu bewegen, auf den Inhalt zu klicken und ihn schließlich zu lesen.
Neben der URL können Sie auch die Metatags hinzufügen, indem Sie die Bildgröße und den MIME-Typ angeben. Diese Meta-Tags sind optional, erleichtern jedoch die Arbeitsbelastung von Facebook beim Analysieren und Zwischenspeichern des Bildes.
Die minimale Bildgröße ist auf 200 x 200 Pixel begrenzt, Facebook empfiehlt jedoch eine Bildgröße von 1200 x 630 Pixeln, um das bestmögliche Ergebnis zu erzielen.
Kleines vs. großes Bild in gemeinsam genutzten Facebook-Inhalten.Vielleicht möchten Sie auch das Seitenverhältnis Ihres Bildes berücksichtigen:
"Versuchen Sie, Ihre Bilder so nahe wie möglich an einem Seitenverhältnis von 1,91: 1 zu halten, um das gesamte Bild in News Feed anzuzeigen, ohne zu beschneiden." - Facebook Developers
Fügen Sie in Facebook die Facebook-App-ID mit hinzu fb: app_id Meta-Tag wird dringend empfohlen. Mit der App-ID kann Facebook eine Verknüpfung zu Ihrer Website herstellen und einen umfassenden Überblick darüber erhalten, wie Nutzer mit Ihrer Website und den Inhalten interagieren.
Sie können dies ignorieren, wenn eine Analyse Ihrer Website nicht erforderlich ist.
Einige Metatags sind optional, können aber in bestimmten Fällen nützlich sein.
Der Site-Name wird mit angegeben og: site_name Meta-Tag. Es definiert den Namen der Website oder genauer die Marke Ihrer Website. Die Marke oder der Name der Website ist möglicherweise nicht immer Ihr Domainname. Tuts + ist in diesem Fall ein gutes Beispiel.
Gemäß unseren Branding-Richtlinien sollte dies jedoch als Tuts + anstelle von Tutsplus geschrieben werden tutsplus.com ist der Domainname, da eine Domain das nicht enthalten kann + Zeichen, daher:
Facebook zeigt diesen Site-Namen nicht in den freigegebenen Inhalten an. Stattdessen finden Sie es in der Benachrichtigung, wenn Sie ein Facebook Social Plugin wie Facebook Comment auf Ihrer Website installiert haben.
Es gibt eine Reihe von Metatags, die sich auf den angegebenen Inhaltstyp beziehen. Wie impliziert, unterscheiden sich diese Tags je nach dem in og: typ Meta-Tag. Hier haben wir eine Artikel. Ein Artikel kann mit ein paar unterstützenden Meta-Tags wie z Artikel: Autor, Artikel: Published_time, Artikel: Herausgeber, Artikel: Abschnitt, und Artikel: Tag.
Bevor Sie diese Metatags hinzufügen, müssen Sie einen neuen Namespace hinzufügen, der auf die Spezifikation des Open Graph-Artikels verweist. Zu diesem Zeitpunkt haben wir also drei Namensräume og, fb, und Artikel.
Laut Facebook die Artikel: Autor Das Meta-Tag sollte eine Facebook-Profil-URL oder die ID des Autors des Artikels enthalten.
Das Hinzufügen mehrerer URLs oder IDs ist zulässig, falls mehrere Autoren zum Artikel beigetragen haben.
Spitze: Wenn der Autor kein Facebook-Konto besitzt, können Sie das Konto ersetzen Artikel: Autor mit den folgenden Autor Meta-Tag.
Facebook zeigt den Autorennamen wie folgt in der Vorschau an.
Obwohl Facebook vorschlägt, dass wir Artikel-Tags enthalten, z Artikel: Published_date und Artikel: Abschnitt Sie fügen zum Zeitpunkt des Schreibens keine Bedeutung hinzu. Das heißt, es sei denn, Sie befassen sich mit einer Instant-Artikelseite.
Wie bereits erwähnt, hängen diese Tags weitgehend von Ihrem Inhaltstyp ab. Wenn der Inhaltstyp ist video.Film, geeignetere Tags wären Video: Schauspieler, Video: Regisseur, und Video: Dauer anstatt der Artikel: Published_date.
Aus diesem Grund überlasse ich diesen Teil von Open Graph Ihnen. Facebook hat umfangreiches Referenzmaterial zu diesen Meta-Tags sowie einige Beispiele für Code-Snippets zur Verfügung gestellt.
Open Graph wurde seitdem von anderen Social-Media-Plattformen wie Twitter (obwohl Twitter auch eine eigene Markenbezeichnung namens Twitter Cards hat), Pinterest, LinkedIn und Google+ in der einen oder anderen Form übernommen. In diesem Lernprogramm haben wir uns einige Open Graph-Meta-Tags angesehen und diese genutzt, um die Inhaltsvorschau überzeugender zu gestalten.
Wenn Sie feststellen, dass Ihr Inhalt nicht wie erwartet gerendert wird, verwenden Sie den Facebook Sharing Debugger, um herauszufinden, was mit dem Markup nicht in Ordnung ist.
Accentsconagua