Heutzutage ermutigt fast jede Website Besucher, ihre Seiten in sozialen Medien zu teilen. Wir alle haben die allgegenwärtigen Facebook- und Twitter-Symbole unter anderem gesehen, die nur darauf warten, angeklickt zu werden. Das ist keine Überraschung, denn das Teilen über soziale Medien, die Internet-Inkarnation des Mundpropaganda-Prinzips, ist eine der effektivsten Möglichkeiten für Unternehmen und Einzelpersonen, Bekanntheit zu erlangen.
Wenn Benutzer diese Links teilen möchten, liegt es am Webentwickler, sicherzustellen, dass die zugehörigen Webseiten ordnungsgemäß vorbereitet sind, und das werden wir uns jetzt ansehen. Facebook und Twitter sind bei weitem die beliebtesten Social-Media-Plattformen, konzentrieren wir uns also auf diese beiden.
Teilen auf Facebook und Twitter
Facebook bietet Entwicklern verschiedene Möglichkeiten, wie eine geteilte Webseite in ihrer Timeline erscheint, abhängig vom Inhalt der Website. Sofern nicht anders angegeben, wird jede Website standardmäßig als „Website“ bezeichnet, was das Beispiel ist, das wir verwenden werden.
Nehmen wir an, jemand hat die Homepage eines fiktiven Reiseunternehmens geteilt – Facebook zeigt es so an
Twitter hat ebenfalls mehrere Möglichkeiten, geteilte Webseiten zu formatieren, die in seinem Feed erscheinen, aber wir werden uns die ansehen, die dem obigen Beispiel von Facebook sehr ähnlich ist, was Twitter die „Summary Card with Large Image“ nennt.
Wie wir sehen können, weist jede mehrere Attribute der geteilten Webseite auf.
- ein prominentes Bild und Titel
- eine Beschreibung
- der Domainname
Proprietäre <meta>-Tags
Wie spezifizieren wir diese Attribute? Mit <meta>-Tags. Wenn ein Link geteilt wird, durchsuchen sowohl Facebook als auch Twitter die zugehörige Webseite und lesen deren <meta>-Tags, um die entsprechenden Informationen anzuzeigen.
Facebook verwendet <meta>-Tags, die das Open-Graph-Protokoll nutzen, ein Klassifizierungssystem für Webseiten, das über die bereits in HTML5 definierten <meta>-Tags hinausgeht. Eine vollständige Liste der verfügbaren <meta>-Tags finden Sie auf der Open Graph-Website. Es gibt so viele zur Auswahl, dass es etwas einschüchternd sein kann, aber nur vier sind tatsächlich erforderlich.
<meta property="og:title" content="The Rock" />
<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" />Eine frühere Version dieses Beitrags listete diese vier auf.
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">Wir lagen also falsch oder es hat sich geändert.
Twitter hat eigene <meta>-Tags, die dem Open-Graph-Protokoll ähneln, aber das Präfix „twitter“ anstelle von „og“ verwenden. Wie bei Facebook sind nur wenige erforderlich. Auch der Anzeigetyp, den wir von Twitter anfordern, wird spezifiziert.
<meta name="twitter:title" content="European Travel Destinations ">
<meta name="twitter:description" content=" Offering tour packages for individuals or groups.">
<meta name="twitter:image" content=" http://euro-travel-example.com/thumbnail.jpg">
<meta name="twitter:card" content="summary_large_image">Sowohl Facebook als auch Twitter bieten Richtlinien zur Verwendung der obigen <meta>-Tags. Sie sind sich sehr ähnlich, obwohl sie in der Interpretation etwas subjektiv sein können. Beachten Sie, dass sich Facebook für unsere Zwecke auf die geteilte Webseite bezieht, wenn es den Begriff „Objekt“ verwendet.
| Titel | Der Titel, die Überschrift oder der Name des Objekts. | Ein prägnanter Titel für den zugehörigen Inhalt. [Maximal 70 Zeichen.] |
| Beschreibung | Eine kurze Beschreibung oder Zusammenfassung des Objekts. [Zwischen 2 und 4 Sätzen.] | Eine Beschreibung, die den Inhalt kurz zusammenfasst, wie er in einem Tweet präsentiert werden kann. Sie sollten den Titel nicht als Beschreibung wiederverwenden oder dieses Feld verwenden, um die allgemeinen Dienste des Unternehmens zu beschreiben. [Maximal 200 Zeichen.] |
| Bild | Die URL des Bildes für Ihr Objekt. Es sollte mindestens 600×315 Pixel groß sein, aber 1200×630 oder größer wird bevorzugt (bis zu 5 MB). Halten Sie sich an ein Seitenverhältnis von etwa 1,91:1, um Beschneidungen zu vermeiden. | Eine URL zu einem eindeutigen Bild, das den Inhalt der Seite darstellt. Sie sollten kein generisches Bild wie Ihr Website-Logo, das Foto des Autors oder ein anderes Bild, das mehrere Seiten umfasst, verwenden. Bilder für diese Karte sollten mindestens 280 Pixel breit und mindestens 150 Pixel hoch sein. Das Bild darf nicht größer als 1 MB sein. |
| URL | Die kanonische URL für Ihre Seite. Dies sollte die undekorierte URL sein, ohne Sitzungsvariablen, benutzeridentifizierende Parameter oder Zähler. |
Da sich diese proprietären <meta>-Tags letztendlich auf dieselben Elemente beziehen, wäre es ideal, wenn es irgendwie eine Möglichkeit gäbe, die beiden zu vereinen. Glücklicherweise gibt es das.
Tags zusammenführen
Es schadet nicht, mehrere <meta>-Tags zu haben, die redundant erscheinen. Zu viele Informationen haben noch nie jemandem geschadet, außer durch das Hinzufügen ein paar zusätzlicher Bytes zur HTML-Datei.
Aber für unsere Zwecke und aus Gründen der Kürze können wir die Tatsache nutzen, dass Twitter uns erlaubt, Open-Graph-<meta>-Tags anstelle seiner eigenen zu verwenden. Letztendlich sind, abgesehen von der Notwendigkeit, ein Anzeigetyp anzugeben, keine der benutzerdefinierten Twitter-<meta>-Tags erforderlich. Dies ergibt Folgendes, was als absolutes Minimum an <meta>-Tags angesehen werden könnte, um eine Webseite für das Teilen in sozialen Medien geeignet zu machen.
<meta property="og:title" content="European Travel Destinations">
<meta property="og:type" content="article" />
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">Die Richtlinien für das Bild zu vereinheitlichen ist einfach: Folgen Sie der Empfehlung von Facebook mit einer Mindestgröße von 1200×630 Pixeln und einem Seitenverhältnis von 1,91:1, aber halten Sie sich an die Dateigrößenanforderung von Twitter von weniger als 1 MB.
Meta-Tags validieren
Wenn Zweifel an der Rechtmäßigkeit der Reduzierung auf diese fünf Tags bestehen, können wir den hilfreichen Facebook Sharing Debugger und Twitter Card Validator verwenden. Beide Tools durchsuchen jede Webseite, die auf einem öffentlichen Server gehostet wird, nach relevanten <meta>-Tags und zeigen an, wie sie beim Teilen aussehen würde. Sie listen auch Fehler auf und geben Vorschläge. Wie haben wir uns mit unserem speziellen Beispiel geschlagen? Twitter scheint damit einverstanden zu sein, aber Facebook listet andererseits einen Punkt als Warnung auf.
Dies bietet eine perfekte Überleitung zu...
Social Media Analysen
Was Facebook damit meint, ist, dass wenn Sie ihr Analysetool verwenden möchten, das sie Domain Insights nennen, Sie die eindeutige ID-Nummer Ihres Kontos angeben müssen. Der -Tag würde dann etwa so aussehen.
<meta property="fb:app_id" content="your_app_id" />Twitter hat etwas Ähnliches, das sie Twitter Card Analytics nennen. Um das Beste aus diesem Tool herauszuholen, empfiehlt Twitter die Verwendung des folgenden -Tags, der den Twitter-Benutzernamen enthält, der mit der geteilten Webseite verknüpft werden soll.
<meta name="twitter:site" content="@website-username">
Bedenken Sie jedoch, dass die beiden oben genannten <meta>-Tags keine Auswirkungen darauf haben, wie eine geteilte Webseite auf einer Facebook-Timeline oder einem Twitter-Feed erscheint, wenn Sie kein besonderes Interesse an der Nutzung dieser Analysetools haben.
Sonst noch etwas?
Facebook empfiehlt einen zusätzlichen <meta>-Tag, der jedoch nicht erforderlich ist. Ein Tag, der den Namen der Webseite angibt, auf der sich die geteilte Seite befindet.
<meta property="og:site_name" content="European Travel, Inc.">Twitter schlägt auch einen weiteren -Tag vor, der empfohlen, aber nicht erforderlich ist.
<meta name="twitter:image:alt" content="Alt text for image">Dies bietet eine alternative Bildbeschreibung für sehbehinderte Personen.
Abschließende Markierung
Das sollte genügen. Um es noch einmal zu wiederholen: Wenn Sie die Dokumentation von Facebook und Twitter zum Teilen von Webseiten lesen, gibt es viele weitere -Tags, die verwendet werden können, um verschiedene Arten von Inhalten anzugeben. Aber im Allgemeinen reicht Folgendes aus.
<!-- Essential META Tags -->
<meta property="og:title" content="European Travel Destinations">
<meta property="og:type" content="article" />
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">
<!-- Non-Essential, But Recommended -->
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:site_name" content="European Travel, Inc.">
<meta name="twitter:image:alt" content="Alt text for image">
<!-- Non-Essential, But Required for Analytics -->
<meta property="fb:app_id" content="your_app_id" />
<meta name="twitter:site" content="@website-username">
Das ist so hilfreich, danke!
Ein winziges Detail fehlt für einige Validatoren.
Wenn „type“ nicht etwas anderes als „website“ ist, ist es redundant. Wir sollten keinen Code einfügen, nur um zufällige SEO-Validatoren glücklich zu machen. Zumindest solange wir es vermeiden können.
Dies ist ein sehr wichtiger Meta-Tag. Die Eigenschaft og:type ist laut dem Sharing Debugger von Facebook erforderlich (https://developers.facebook.com/tools/debug/sharing/).
Übrigens ein ausgezeichneter Beitrag, sehr nützlich!
Interessant, dass nur 5 Meta-Tags benötigt werden! Das wusste ich nicht.
Tatsächlich, obwohl FB uns mitteilt, dass og:title und og:description benötigt werden, waren sie, als ich das letzte Mal nachgesehen habe, nicht erforderlich und sollten es wirklich nicht sein.
HTML hat bereits einen ordentlichen Titel- und Meta-Description-Tag, und FB kann diese problemlos verwenden (obwohl ihre Scraping-Tools ansonsten ziemlich fehlerhaft sind). Die proprietären Tags sind also völlig redundant, es sei denn, Sie möchten einen anderen Titel/eine andere Beschreibung in FB. Ich vermute, der Zweck der Warnung ist nur, die Bedeutung ihres proprietären „Systems“ aufzublasen.
og:url ist ähnlich redundant, da es normalerweise mit Ihrer kanonischen URL identisch ist (die meiner Meinung nach inzwischen mehr oder weniger Standard ist), die FB durchaus erkennt. Wenn Sie diese nicht haben, sollte FB einfach die geteilte URL verwenden (zumindest als ich das letzte Mal nachgesehen habe).
Das einzig Nützliche ist og:image – und es ist tatsächlich sehr wichtig, da FB es sehr schlecht schafft, ein eigenes richtiges Bild zu finden.
Ich habe es nicht überprüft, aber ich wäre sehr überrascht, wenn es bei Twitter nicht genauso wäre (da sie sogar die og-Tags verwenden).
Wenn Sie sauberen Code mögen, rate ich absolut von redundantem Code/Inhalt und Metadaten ohne klaren und „messbaren“ Zweck ab. Sie nützen nichts und schaden tatsächlich (wenn auch nur ein wenig). Das Schlimmste daran: Wenn Sie aufhören, wachsam zu sein, und „nur ein paar“ (ohne ernsthaften Kampf) verwenden, wird mit der Forderung der meisten Agenturen/Kunden nach immer obskureren „SEO“-Metadaten Ihre Position untergraben und Ihr Code wird schließlich mit nutzlosem Krempel überschwemmt.
Der Titel dieser Webseite ist
The Essential Meta Tags for Social Media | CSS-Tricks, aber beim Teilen würden Sie erwarten, einen sauberen Titel zu sehen, d. h.The Essential Meta Tags for Social Media, während der untere Teilcss-tricks.comals Website anzeigt. Dies ist nur ein Beispiel dafür, warum Sie einen *richtigen* Open Graph-Titel verwenden möchten.Ganz zu schweigen von der Tatsache, dass die OG-Meta-Tags auch von einigen anderen Webseiten oder Apps erkannt werden (ich denke zum Beispiel an Telegram oder WhatsApp), die den Code möglicherweise nicht so „gut“ wie Facebook scannen (was auch immer „gut“ bedeutet). :)
Dies bezieht sich nicht speziell auf Social-Meta-Tags, kann aber nützlich sein. Es ist im Grunde ein Dokument, das alles zeigt, was im
<head>stehen kann/sollte, und auch die verfügbaren Social-Meta-Tags enthält.https://github.com/joshbuchea/HEAD
ALTER!!! @Todd, dieser Link ist UNGLAUBLICH hilfreich.
Außerdem, @Chris & @Adam, DANKE für diesen großartigen Artikel!!! Ich habe mir gerade die Haare gerauft und versucht, die Unterschiede und das Notwendige herauszufinden, ohne redundant zu sein usw.; dann entschied sich Google, mir einen Link zu diesem Artikel zu präsentieren. Sehr hilfreich.
Gute Lektüre! Ich wusste nicht, dass Twitter tatsächlich auf Open Graph zurückgreift, wenn sein proprietäres Format fehlt.
Ich wünschte, es gäbe hier auf der Seite einen Twitter-Teilen-Button.
Guter Beitrag, wusste nicht, dass FB & Twitter diese Werkzeuge hatten. Ich habe festgestellt, dass Yoast SEO in WordPress diese Tags ziemlich gut für Twitter, Facebook, Pinterest und sogar Google+ handhabt. Es hilft, dass man keine Titel und Beschreibungen an mehreren Stellen für jede Seite/jeden Beitrag eingeben muss. Ich habe jedoch ein mu-plugin verwendet, um die Nörgeleien von Yoast nach jedem Update auszublenden.
Ich wusste nicht, dass Twitter OG als Fallback verwendet, macht aber Sinn, wenn sie ansprechende Inhalte teilen wollen.
Haben Sie Jeremy Keiths Beitrag gesehen, wie man das auch ein bisschen schlanker gestalten kann? https://adactio.com/journal/9881
Die allgemeine Kernaussage ist, dass Twitter das Attribut „name“ im Meta-Element verwendet, während Facebook (OG) das Attribut „property“ verwendet, was bedeutet, dass Sie sie für dasselbe Element verwenden und alle Möglichkeiten abdecken können.
Ich glaube nicht, dass es passieren wird, aber falls Twitter beschließt, die OG-Unterstützung einzustellen, mischen Sie einfach die Tag-Namen und es sollte in Ordnung sein. Z. B.
Kann jemand anderes dazu etwas sagen? Sind diese beiden Dinge kombiniert legitim oder gäbe es Konsequenzen?
Ich glaube nicht, dass Twitter-Mitarbeiter Sie jagen werden :) aber ich habe diesen Link gefunden, der für Ihre Frage interessant sein könnte: http://stackoverflow.com/a/28319985/1101509
Schöne Übersicht! Sie verwenden manchmal
meta property=""und manchmalmeta name="", sogar unter den verschiedenen OpenGraph-Tags. Sind diese austauschbar oder was ist der Unterschied zwischen ihnen?In der endgültigen Markierung: Ist der Schrägstrich (nahe dem Ende) notwendig?
Nicht in HTML (optional), aber nachgestellte Schrägstriche waren früher in XHTML erforderlich. Auch in JSX notwendig.
Ich würde empfehlen,
og:image:widthundog:image:heighthinzuzufügen, da beides Facebook hilft, die Größe des og:image zu ermitteln, wenn ein Link zum ersten Mal geteilt wird.Wenn beide Werte groß genug sind, reserviert Facebook den Platz für die große Vorschau, auch wenn der Facebook-Benutzer den Link schneller teilt, als das Bild abgerufen werden konnte.
Wenn beide Werte nicht gesetzt sind, greift Facebook in solchen Fällen auf das kleinere og:image zurück.
Eine anonyme E-Mail sagte:
Ich habe gerade versucht, es auf meiner Website zu implementieren und festgestellt, dass Twitter das große Zusammenfassungsbild nicht anzeigt, es sei denn, die folgenden sind enthalten.
Ich habe nicht bestätigt, dass Twitter kein Bild ohne dies anzeigt (das erscheint höchst unwahrscheinlich), aber ich habe bestätigt, dass diese existieren und die Dokumentation besagt: