Zurück zum Blog
Hast du dich jemals gefragt, warum deine auf Facebook oder Twitter geteilten Links manchmal merkwürdig aussehen? Weißt du, wie du das Aussehen deiner geteilten Blog-Posts in diesen sozialen Medien beeinflussen kannst?
Wenn du dir nicht sicher bist, ob du alles getan hast, um die Informationen über deinen Blog-Post oder deine Seite zu optimieren, die auf Facebook und Twitter angezeigt werden, lies weiter. Wir zeigen dir, wie die Verwendung der richtigen Social Media Meta Tags dir helfen kann, das Look & Feel deiner Post-Previews zu verbessern.
Wenn du einen Artikel-Link teilst, möchtest du, dass dein Post nach der Veröffentlichung in den sozialen Medien gut aussieht. Er soll ein hochwertiges Bild, einen korrekten Namen, eine Beschreibung und die richtige URL enthalten. Facebook, Twitter und andere Plattformen beziehen diese Parameter von deiner Website.
Du kannst steuern, was sie aus dem Post ziehen, indem du Social Media Meta Tags (zum Beispiel Open Graph Tags) in den HTML-Code deiner Posts einfügst.
Wenn die Facebook Meta Tags (= Open Graph Meta Tags) vorhanden sind, bestimmst du, was im Facebook-Post angezeigt wird. Wenn du diese Open Graph (og) Properties nicht einfügst, wird Facebook zwar weiterhin Informationen über deinen Blog-Post anzeigen, aber wahrscheinlich nicht so, wie du es dir wünschst. Das funktioniert analog auch mit Twitter Meta Tags. Demonstrieren wir das Ganze anhand von Social Media Meta Tags und dem Teilen von Links auf Facebook.
Web-Content auf Facebook teilen
Facebook ist eine großartige Plattform, um deinen neuen Content zu teilen. Einen neuen Post aus deinem Website-Artikel zu erstellen, ist so einfach wie das Einfügen des Links in ein neues Facebook-Post-Feld.
Schauen wir uns diesen Prozess genauer an. Wir nutzen unseren Post über die Facebook Marketing Strategy als Beispiel.
Nachdem die URL in das neue Post-Feld eingefügt wurde, zieht Facebook die Daten von der Ziel-URL und erstellt einen schön formatierten Post für uns. Das Format wird sofort in der Preview angezeigt – sowohl für Desktop als auch für Mobile. Wenn du Kontentino nutzt, um deinen Social Media Content zu verwalten, ist die Preview sofort im Kontentino Content Calendar verfügbar.
Meta Tags im HTML-Code der Website verstehen
Meta Properties für Suchmaschinen
Ganz oben sehen wir verschiedene Eigenschaften, die die Parameter dieses Artikels definieren, auch Meta Tags oder Meta Properties genannt. Einige davon werden von Suchmaschinen verwendet, um den Website-Inhalt zu verstehen, indem sie zusätzliche Informationen bereitstellen, die nicht auf der Post-Seite selbst angezeigt werden. Dazu gehören zum Beispiel Meta Tags wie:
- Meta Title – <title>
- Meta Description – meta name=”description”
- Robots – meta name=”robots”
Das Bild unten zeigt den HTML-Code für diesen Kontentino-Post. Du kannst diese Meta Tags grün markiert sehen.
Identifizierung von Meta Tags im HTML-Code des Beitrags Facebook Ads Target Audiences 101: The Ultimate Guide
Schneller Tipp: Du bist dir nicht sicher, wie du den HTML-Code deiner Website anzeigst? Drücke einfach STRG+U in deinem Browser auf Windows oder Option + Command + U auf dem Mac.
Dank dieser Meta Tags wissen Suchmaschinen, dass das Indexieren dieser Seite und ihre Parameter auf “follow” (dofollow) gesetzt sind. Der eingegebene Meta Title und die Meta Description werden von Suchmaschinen verwendet, um den Link zu diesem Post in ihren Suchergebnissen (SERP) anzuzeigen. Wie du siehst, sind die Meta Title und Meta Description Properties wie folgt gesetzt:
- Meta Title: ‘Facebook Ads Target Audiences 101: The Ultimate Guide | Kontentino Blog – Simplifying Social Media Approval Workflow’
- Meta Description: ‘Erfahre, wie du die richtigen Leute mit Facebook Ads Target Audiences erreichst.’
Wir wissen, dass diese Meta Tags keine optimale Länge haben, aber wir sind nicht hier, um über SEO oder Google zu sprechen. Kommen wir also direkt zu den Meta Tags darunter, die den Text ‘og:’ enthalten.
Diese Meta Tags oder Meta Properties werden manchmal als Social Meta Tags, Social Media Meta Tags oder einfach og Meta Properties bezeichnet.
Wie du siehst, befinden sich 7 verschiedene og Meta Properties im HTML-Code unseres Blog-Posts:
- og:locale
- og:type
- og:title
- og:description
- og:url
- og:site_name
- og:image
Zusätzlich gibt es weitere Facebook Meta Tags – die og: Properties, die mit dem og:image Meta Tag verknüpft sind:
- og:image:width
- og:image:height
- og:image:alt
- og:image:type
Twitter Meta Tags
Abgesehen davon findest du auch spezielle Social Meta Tags für Twitter im HTML-Code, wie zum Beispiel:
- meta name=”twitter:card”
- meta name=”twitter:title”
- meta name=”twitter:description”
- meta name=”twitter:site”
- meta name=”twitter:image”
Kehren wir zu unserem Beispiel zum Teilen von Facebook-Posts zurück. Wir müssen den Inhalt der ‘og:’ Meta Properties verstehen, dekodieren und bearbeiten, um das Aussehen unseres neuen FB-Posts mit dem eingebetteten Link zu beeinflussen.
Lies weiter und erfahre mehr über: i) Das Dekodieren der og: Meta Properties; ii) Richtlinien zum Schreiben von Inhalten für Social Meta Tags; und iii) Bearbeiten des Inhalts dieser Social Meta Properties im CMS deiner Website.
Facebook und Twitter Publishing mit Kontentino
Melde dich für einen 14-tägigen Test von Kontentino an und meistere Social Media Meta Tags mit uns. Sieh dir die Post-Preview in Kontentino an, bevor du den Beitrag veröffentlichst.
Das ‘og:’ im HTML-Code deiner Website steht für ‘Open Graph’. Es ist ein Akronym des Open Graph Protokolls, das es dir ermöglicht, Facebook mitzuteilen, wie dein geteilter Content angezeigt werden soll. Wie bereits erwähnt (und wie Facebook in seinen Anweisungen für Entwickler angibt), nutzt der Facebook Crawler ohne diese Open Graph Tags interne Heuristiken, um Titel, Beschreibung und Vorschaubild für deinen Content bestmöglich zu erraten. Die explizite Definition dieser Informationen mit Open Graph Tags hilft dabei, die höchste Qualität der Posts auf Facebook zu gewährleisten.
Wie du siehst, sind diese og Meta Tags extrem wichtig für Facebook. Wenn du noch nie davon gehört hast oder denkst, dass sie recht neu sind, wird es dich überraschen, dass das Open Graph Protokoll von Facebook schon vor 10 Jahren (2010) eingeführt wurde. Heute wird es jedoch von der Open Web Foundation verwaltet.
Das Open Graph Protokoll baut auf verschiedenen bestehenden Technologien und Schemata auf, um Entwicklern zu helfen, jede Webseite innerhalb des Social Graph reichhaltig darzustellen. Genug der Geschichte und Definitionen; gehen wir ins Detail der verschiedenen og Meta Tags. Wir schauen uns 4 davon genauer an – diejenigen, die für das Aussehen unseres eingebetteten Posts auf Facebook verantwortlich sind: og:title, og:image, og:url und og:description.
og:title Meta Property
Diese Meta Property ist eine der vier Basis-Metadaten innerhalb des Open Graph Protokolls (diese sind: og:title, og:type, og:image, og:url). Durch die Angabe von og:title legen wir den Titel unseres Objekts fest (in diesem Fall ein Blog-Post), wie er im Social Graph erscheinen soll. Facebook zieht dann diesen og:title und zeigt ihn als Post-Titel an.
og:image Meta Property
Hier fügen wir die URL des Bildes ein, das unser Objekt (den Artikel) im Social Graph repräsentieren soll. In diesem Fall sollte der Link zum Beitragsbild (Featured Image) in dieser Eigenschaft enthalten sein. Durch die Angabe von og:image stellen wir sicher, dass genau dieses Bild auf Facebook angezeigt wird.
Andernfalls könnte Facebook ein anderes Bild aus unserem Post wählen; das könnte das Hauptbild aus der Beitragsübersicht, das Bild am Anfang des Artikels oder irgendein anderes Bild im Blog-Post sein.
og:url Meta Property
Dieser Meta Tag enthält die kanonische URL unseres Objekts, die als dessen permanente ID im Social Graph verwendet wird. In unserem Fall ist die URL in og:url https://www.kontentino.com/blog/facebook-ads-target-audiences/.
og:description Meta Property
Schließlich hilft uns die Angabe des og:description Meta Tags dabei, die Beschreibung beim Teilen dieses Posts anzuzeigen. Wie im HTML-Code-Bild zu sehen ist, lautet sie hier: ‘Erfahre, wie du die richtigen Leute mit Facebook Ads Target Audiences erreichst.’
Twitter Meta Tags
Twitter Meta Tags funktionieren analog zu den Open Graph Meta Tags und spezifizieren den Inhalt, den Twitter beim Teilen einer Webseite auf dieser Plattform abruft.
Meisterung von og Meta Tags
Facebook und Twitter bieten Richtlinien zur Nutzung der oben genannten Meta Tags an. In der folgenden Tabelle fassen wir die Basisinformationen zusammen mit den jeweiligen Empfehlungen zusammen.
Da wir nun die verschiedenen Typen von Social Meta Tags und ihre Auswirkungen verstehen, ist es Zeit, ins CMS deiner Website zu springen und herauszufinden, wo und wie man sie bearbeitet. Wir zeigen dir Beispiele aus dem WordPress CMS, dem weltweit führenden CMS.
Wenn du ein SEO-Plugin wie Yoast SEO, Rank Math, All in One SEO oder ähnliche nutzt, sind diese beim Bearbeiten dieser Social Metadata sehr hilfreich. Fast alle guten SEO-Plugins ermöglichen es dir, die Meta Tags für Facebook und Twitter separat zu ändern. Im Folgenden zeigen wir dir, wie du diese in Rank Math einstellst.
Wir beginnen mit dem Bearbeiten des Posts und klicken auf den SEO-Tab. Dort muss der Bereich ‘Social’ geöffnet werden.
So findest du die Stelle zum Bearbeiten von Social Media Meta Tags in deinem CMS.
Rank Math enthält einen Live-Previewer, der dir zeigt, wie sich die Änderungen auf die Einbettung deines Posts auf Facebook oder Twitter auswirken. Klicke auf den Button ‘Preview & Edit Social Media’.
Bearbeitung der Facebook Meta Tags
Zuerst sehen wir die Preview des Facebook-Posts und darunter die Social Media Meta Tags, die angepasst werden können.
Post-Link-Sharing-Preview, generiert von deinem CMS – in diesem Fall das Rank Math Plugin.
In unserem Fall wurden die Properties og:image, og:title und og:description noch nicht spezifiziert. Wie du siehst, zeigt der Simulator (Preview Snippet Editor) die Werte aus den Basis-Metadaten an, die für Suchmaschinen verwendet werden.
Bearbeiten von Social Media Meta Tags: die og:title und og:description Tags deines Blog-Posts.
In unserem allerersten Bild in diesem Blog-Post sehen wir, dass der fehlende Titel das größte Problem ist. Wir werden jedoch sowohl den Titel als auch die Beschreibung ausfüllen.
Nach dem Speichern der Änderungen sollten wir prüfen, wie der aktualisierte Post aussieht, wenn er auf Facebook geteilt wird.
Neue Social Media Meta Tags für den Post ausgefüllt.
Obwohl Facebook empfiehlt, 2 bis 4 Sätze für den og:description Meta Tag zu verwenden, beschränken wir uns für diese Demonstration auf einen Satz. Wir möchten sehen, ob Facebook ihn überhaupt anzeigt, nachdem wir durch die Reduzierung der Länge des og:title Parameters Platz auf der Card geschaffen haben.
Bevor wir das Ergebnis prüfen, sollten wir andere Lösungen erwähnen, die es ermöglichen, die Open Graph Parameter in WordPress zu bearbeiten. Wenn du kein SEO-Plugin nutzt, kannst du ein spezielles Open Graph Plugin wie OG verwenden oder die Social Metadata manuell in den HTML-Code deiner Webseite einfügen. Letzteres ist auch für andere CMS nützlich. Wix hat eine integrierte Lösung zum Einfügen von og Meta Properties, ebenso wie andere große Content-Management-Systeme.
Sobald du mit der Bearbeitung der Facebook oder Twitter Meta Tags fertig bist, ist es Zeit, das Teilen deines Posts auf diesen Plattformen zu testen. Schauen wir uns an, wie unser Post jetzt auf Facebook aussehen würde. Wir können den Facebook Debugger (offiziell Facebook Sharing Debugger genannt, manchmal auch als FB Preview Tool bezeichnet) nutzen, um die modifizierten Posts auf Facebook zu betrachten. Vergiss davor nicht, deinen Cache zu leeren oder temporäre Safari-Dateien zu löschen (falls du diesen Browser nutzt), falls dies nach dem Speichern des Posts nicht automatisch geschehen ist.
Open Graph Meta Tags im Facebook Link Sharing Debugger.
Link-Preview im Facebook Sharing Debugger, die deine Social Media Meta Tags in Aktion zeigt.
Wie du oben siehst, sieht alles gut aus und die Änderungen an den Facebook Meta Tags wurden übernommen.
Gängige Missverständnisse über Social Media Meta Tags
Mythos 1: Social Media Meta Tags dienen nur SEO-Zwecken.
Meta Tags sind nicht nur für Suchmaschinen wichtig – sie spielen eine entscheidende Rolle dabei, wie dein Content in sozialen Netzwerken dargestellt wird. Social Media Meta Tags wie og:image und og:title optimieren deine Posts gezielt für Plattformen wie Facebook und Twitter und verbessern das Engagement.
Mythos 2: Alle Bilder werden in sozialen Medien perfekt angezeigt.
Nicht jedes Bild deines Posts wird beim Teilen korrekt angezeigt. Ohne die Angabe von og:image oder die Nutzung einer Twitter Card wählen soziale Plattformen möglicherweise ein beliebiges Bild aus oder formatieren das Visuelle falsch, was das Erscheinungsbild deines Beitrags beeinträchtigt.
Mythos 3: Meta Tags sind nur für One-Page-Websites wichtig.
Meta Tags sind für Websites mit mehreren Seiten unerlässlich. Ob deine Seite Blogs oder Produktlisten enthält, die Nutzung von og:type und anderen Meta Tags sorgt für eine konsistente und optimierte Darstellung über mehrere Plattformen hinweg.
Mythos 4: Man kann sich darauf verlassen, dass Social-Media-Plattformen Inhalte korrekt anzeigen.
Sich darauf zu verlassen, dass Facebook oder Twitter deinen Post automatisch formatieren, ist riskant. Ohne das manuelle Setzen wichtiger Meta Tags wie og:url und og:description ziehen soziale Plattformen möglicherweise falsche oder unvollständige Daten, was die visuelle Attraktivität deines Contents mindert.
Mythos 5: Social Meta Tags sind ohne Programmierkenntnisse schwierig zu implementieren.
WordPress-Plugins und Tools wie Rank Math vereinfachen das Hinzufügen und Verwalten von Social Media Meta Tags erheblich. Du musst kein Webentwickler sein, um sicherzustellen, dass deine Posts für das Teilen in sozialen Medien optimiert sind.
Mythos 6: Twitter Cards funktionieren nur mit statischen Bildern.
Twitter Cards unterstützen verschiedene Medienformate, einschließlich GIFs und Videos. Du kannst Fotos oder andere Medien an deine Summary Card anhängen, um deine Posts in diesem sozialen Netzwerk dynamischer und ansprechender zu gestalten.
Mythos 7: Meta Tags sind nur für den eigenen Content gedacht.
Bei Meta Tags geht es nicht nur um die eigene Website; sie helfen auch, wenn dein Content auf anderen Websites geteilt wird. Das korrekte Setzen von meta property=”og:image” und meta property=”og:title” sorgt dafür, dass dein Content überall professionell aussieht.
Fazit
Wir hoffen, dieser Artikel hat dir geholfen, die og Meta Properties und ihre Bedeutung für das Teilen von Links auf Facebook und Twitter zu verstehen. Wenn du dein Social Media Marketing auf das nächste Level heben möchtest, probiere Kontentino aus. Es ist ein benutzerfreundliches Tool zur Erstellung von Social Media Content, das effiziente Team-Kollaboration und Content-Freigaben ermöglicht.
Unser Content Calendar integriert eine Preview-Funktion, sodass du nirgendwo anders hinmusst, um zu sehen, wie dein neuer Link-Post aussehen wird. Das spart wertvolle Zeit bei der Überprüfung und Optimierung deiner Social Media Meta Tags.
Und was gibt es Besseres, als UTM-Parameter zu setzen, um die Post-Performance in deiner Web-Analytics zu tracken, ein Veröffentlichungsdatum in der Zukunft festzulegen oder ein Budget für das Boosting zuzuweisen, um eine größere Reichweite zu erzielen?
FAQ
Was ist ein Social Media Meta Tag?
Ein Social Media Meta Tag liefert entscheidende Daten wie Titel, Bilder und Beschreibungen für Social-Media-Plattformen, wenn Webseiten geteilt werden. Er ist essenziell zur Steigerung des Engagements auf den großen Plattformen.
Was sind Beispiele für Meta Tags?
Beispiele sind meta property=”og:title”, meta property=”og:image” und meta property=”og:url”, die das Teilen auf Plattformen wie Facebook und Twitter optimieren und sicherstellen, dass dein Content gut repräsentiert wird.
Was sind Social Media Metadaten?
Social Media Metadaten umfassen Open Graph Daten wie einen prägnanten Titel, eine Beschreibung und hochwertige Bilder, die das Erscheinungsbild von Social Media Posts auf Plattformen wie Twitter und Facebook verbessern.
Was sind Social Media Tags?
Social Media Tags sind Identifikatoren wie Twitter Card Tags oder og Tags, die im HTML-Code eingebettet sind, um zu beeinflussen, wie Webseiten beim Teilen angezeigt werden, und so die Sichtbarkeit zu erhöhen.
Wie erstellt man Meta Tags?
Um Meta Tags zu erstellen, fügt ein Webentwickler einige Codezeilen in die HTML-Datei einer Webseite ein, einschließlich Parametern wie dem Title Tag, dem Description Tag und einem eindeutigen Bild, das den Content repräsentiert.
Welche sozialen Medien nutzen Meta?
Meta Tags werden von großen Plattformen wie Facebook, Twitter und LinkedIn genutzt, um zu optimieren, wie Webseiten und Posts beim Teilen erscheinen und so das User-Engagement zu fördern.
Ist ein Meta Tag notwendig?
Ja, Meta Tags sind entscheidend für das Online-Marketing, da sie steuern, wie dein Content in sozialen Netzwerken aussieht. Sie stellen sicher, dass das richtige Bild und der richtige Titel gezeigt werden, was Shares und Engagement steigert.
Wie findet man Meta Tags?
Du kannst den HTML-Quelltext einer Website untersuchen, um Meta Tags zu finden. Tools wie der Facebook Debugger helfen ebenfalls dabei, spezifische Meta Properties wie og:image oder og:type einzusehen.
Wie viele Meta Tags sollte ich verwenden?
Nutze essenzielle Meta Tags wie og:title, og:image, og:url und Twitter Card Tags, um deine Sichtbarkeit zu optimieren. Priorisiere Qualität vor Quantität und konzentriere dich auf Tags mit großer Hebelwirkung.
Was ist ein Facebook Meta Tag?
Ein Facebook Meta Tag, wie meta property=”og:title”, ist Teil des Open Graph Protokolls. Er hilft zu bestimmen, wie deine Webseiten oder Posts auf Facebook erscheinen, um ein besseres User-Engagement zu gewährleisten.
Was ist die Meta Property og:title content?
Die Meta Property og:title definiert den Titel deiner Webseite, wie er beim Teilen auf Social-Media-Plattformen wie Facebook angezeigt wird.
Was ist die Meta Property og:image content?
Die Meta Property og:image legt die URL des Bildes fest, das erscheint, wenn dein Content in den sozialen Medien geteilt wird.
Was ist die Meta Property og:type content?
Die Meta Property og:type definiert die Art des geteilten Inhalts (z. B. Artikel, Website), was den Plattformen hilft, ihn richtig zu kategorisieren und anzuzeigen.
Was sind Metadaten? 3 Beispiele?
Beispiele für Metadaten sind der Description Tag, Session-Variablen zur Nutzeridentifikation und der meta property=”og:image” Tag, der Plattformen hilft, das richtige Bild zum Teilen auszuwählen.
