Optimierung der Open Graph Meta-Tags für Javascript

Open Graph Vorschau

Die Optimierung sozialer Medien ist ebenso wie die Suchmaschinenoptimierung (SEO) entscheidend für die Besucherzahlen einer Website.

Wenn Sie auf Ihrer Website die Funktion zum sozialen Austausch aktivieren, trägt dies zur Markenpräsenz bei und bietet weitere damit verbundene Vorteile.

Eine Website, die für die Weitergabe in sozialen Netzwerken optimiert ist, macht es Ihren Nutzern leicht, sie mit Freunden und beruflichen Netzwerken zu teilen, die wahrscheinlich einen zusätzlichen Nutzen aus Ihren Inhalten ziehen werden. Außerdem werden Ihre Inhalte so einem potenziellen neuen Publikum zugänglich gemacht, das sich sonst nicht mit Ihrer Marke auseinandergesetzt oder Ihre Inhalte gefunden hätte.

Sie kann sogar selbst als sozialer Beweis dienen. Wenn jemand Ihre Inhalte auf einer Social-Media-Plattform teilt, ist das so, als würde ein Nutzer sagen: "Diese Website ist es wert, besucht zu werden." Je mehr Ihre Inhalte geteilt werden, desto wahrscheinlicher ist es, dass andere Internetnutzer Ihre Website besuchen und dasselbe tun.

Wir denken bei der Website-Optimierung an Suchmaschinen wie Google und Bing, aber auch Social-Media-Plattformen wie Facebook, Twitter und Instagram haben jeweils ihre eigenen Bots, die das Internet nach Inhalten durchsuchen. 

Es gibt zwei Hauptwege, um Social-Sharing-Funktionen auf Ihrer Website auszuführen: durch die Integration von Social-Sharing-Schaltflächen am unteren Rand jedes Beitrags und durch die Aktivierung des Open-Graph-Protokolls mit dynamischen Meta-Tags.

Mit Open Graph können Webseiten eine Rich-Snippet-Vorschau erhalten, wenn jemand Ihre Webseite in sozialen Medien teilt. Statt einer flachen URL mit einfachem Text enthält die Seite einen sozialen Graphen mit dynamischen Elementen wie einem Seitentitel, einem hervorgehobenen Bild und einer Vorschau des Textes auf der Seite.

Wenn ein Blogbeitrag mit Open Graph-Metadaten direkt von einer Website geteilt wird, steuern die dynamischen Meta-Tags, welche Inhalte (z. B. der Titel, der Name der Website, ein Vorschaubild) angezeigt werden, wenn der Beitrag in sozialen Netzwerken geteilt wird. Die Informationen werden in einer Rich-Snippet-Vorschau angezeigt, die einladender und ansprechender ist als nur eine URL mit einfachem Text. Rich Snippets wie diese machen es wahrscheinlicher, dass sich die Nutzer mit dem Beitrag beschäftigen.

Facebook und Twitter haben jeweils ihre eigenen dynamischen Meta-Tags, die den Bots anzeigen, welche Informationen angezeigt werden sollen.

Facebook

Facebook Open Graph

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.io/">
<meta property="og:title" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<meta property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<meta property="og:image" content="https://example.io/assets/meta-tag.png">

Twitter

Twitter Open Graph

<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.io/">
<meta property="twitter:title" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<meta property="twitter:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<meta property="twitter:image" content="https://example.io/assets/meta-tags.png">

Die Bots der sozialen Netzwerke können die meisten statischen HTML-Seiten problemlos crawlen. Komplikationen treten auf, wenn sie versuchen, SPAs (Single Page Applications) mit dynamischen Inhalten zu crawlen, die mit JavaScript-Frameworks wie Angular, React und Vue erstellt wurden.

Herausforderungen mit JavaScript und SPAs

Herausforderungen mit JavaScript und SPAs

Google kann in der Regel JavaScript crawlen und ausführen, solange es auf der Serverseite zugänglich ist. Spider von sozialen Netzwerken können das nicht.

Wenn es sich bei Ihrer Website um eine SPA handelt, die mit einem JavaScript-Framework erstellt wurde, können Open-Graph-Scraper für soziale Medien die Open-Graph-Tags, die Sie zur Kennzeichnung sozialer Inhalte verwenden, nicht lesen. Sie lesen nur, was in der index.html-Datei Ihrer Webseite steht, und führen nicht den JavaScript-Inhalt selbst aus. Auf diese Weise entlasten ihre Bots Ihre Server und beschleunigen den Crawling-Prozess.

Wenn Ihre verschachtelten Routen nicht ausdrücklich Ihre Metadaten in Ihrer index.html-Datei beschreiben (was nicht der Fall ist, wenn es sich bei Ihrer Website um eine SPA handelt), können die Open-Graph-Crawler der sozialen Medien nicht auf die Inhalte zugreifen, die Sie in Ihren Routen beschrieben haben, und Facebook, Twitter, WhatsApp usw. können die Metatags nicht lesen und Ihre Inhalte in den sozialen Medien nicht richtig anzeigen.

Gemeinsame Lösung - Server-seitiges Rendering

Gemeinsame Lösung - Server-seitiges Rendering

Gemeinsame Lösung - Server-seitiges RenderingServerseitiges Rendering (SSR) ist eine gängige Lösung für dieses Problem, da es die Open-Graph-Daten serverseitig rendert, um sie für das Crawling vorzubereiten, und Metatags für Bots und Open-Graph-Scraper leicht zugänglich macht.

SRR hat jedoch seine eigenen Komplikationen. Die Aktivierung von SSR für eine SPA zur Aktivierung von Social Sharing erfordert langwierige Workarounds und die Installation von JavaScript-Bibliotheken, die für jedes Framework wie Angular, React usw. spezifisch sind.

Kompliziert wird es auch, wenn Ihre Webseiten dynamische Inhalte haben. Jedes Mal, wenn sich die kleinsten Daten auf Ihrer Seite ändern - sei es eine URL-Aktualisierung oder eine Änderung des Seitentitels - müssen Ihre Server den gesamten Open-Graph-Inhalt neu laden.

SSR eignet sich gut für einfache Anwendungen und Websites, die nicht viele oder überwiegend statische Seiten haben. Es ist jedoch keine nachhaltige Lösung, wenn Sie 1.000 oder 10.000 Seiten haben, die alle dynamische URLs haben. Sie ist nicht skalierbar, und der damit verbundene Aufwand und die Serverkosten überwiegen die Vorteile einer verbesserten sozialen Freigabe.

Deshalb ist die beste Lösung für die Freigabe in den sozialen Medien das Pre-Rendering.

Beste Lösung - Dynamisches Rendering mit Prerender

Prerender

Prerender optimiert Ihre JavaScript-Website nicht nur für Suchmaschinen. Es optimiert sie auch für Social Sharing.

Prerender verwendet dynamisches Rendering, um das Laden der Open-Graph-Tags zu automatisieren, die normalerweise hinter JavaScript verborgen wären. Es erkennt automatisch, welcher User-Agent Ihre Website besucht - ob ein Social-Media-Crawler oder ein menschlicher Nutzer - und liefert ihm die korrekte Version Ihrer Webseite.

Crawler, die von sozialen Netzwerken geschickt werden, halten in der Regel an, wenn sie Ihre index.html-Datei finden, ohne das JavaScript auszuführen, in dem Ihre Metadaten gespeichert sind. Der Bot ist nicht in der Lage zu erkennen, wie der Seitentitel lautet, welches Bild mit der Seite verknüpft ist oder andere Informationen, die in einem geteilten Social-Media-Post enthalten sein könnten. Und wenn jemand auf die Schaltfläche zum Teilen in sozialen Netzwerken am unteren Rand klickt und den Beitrag auf Facebook teilt, sieht er nur eine flache URL, die keine nützlichen Informationen über den Inhalt der Seite enthält.

Prerender hingegen lädt dynamische Inhalte auf Ihre Webseiten vor, macht die darin enthaltenen Open-Graph-Meta-Tags für alle wichtigen sozialen Netzwerke leicht zugänglich und fügt bei Bedarf neue, dynamisch erstellte URLs hinzu.

Wenn Ihr Nutzer dann Ihren neuesten Blogbeitrag auf Facebook, Twitter, WhatsApp oder LinkedIn teilt, sieht jeder, der ihm folgt, auf einen Blick, warum Ihre Website einen Besuch wert ist. Testen Sie Prerender kostenlos und beginnen Sie mit dem Aufbau einer Social-Media-Präsenz, die Ihre Nutzer nicht ignorieren können.