Ist der Inhalt Ihrer Seite gut teilbar?

Ist Ihr Inhalt SocialReady?

Inhalt öffne dich!

Es ist Ihr ein und alles, es hängen Fleiß, Tränen und Schmerz darin. Die Rede ist vom Inhalt Ihrer Webseite oder auch Ihres Blogs. Jede Formulierung geschliffen, jede Alliteration achtmal auseinander arrangiert. Doch wie sieht dieser Inhalt aus, wenn er in sozialen Netzwerken geteilt wird? Passt die Überschrift, stimmt die Einleitung und vor allem: Wird das richtige Bild angezeigt? Wir verraten Ihnen, auf was Sie achten müssen, damit Ihr Inhalt richtig (mit-) geteilt wird.

So sieht Ihr Inhalt aus, wenn Sie Ihren Content nicht vernünftig vorbereiten ...

Screenshot: www.kontor4.de/impressum.html
  • Glück gehabt – die Überschrift stimmt noch
  • Die Kurzbeschreibung wird aus der Meta-Description der Seite genommen
  • Die URL zur Seite stimmt wenigstens immer ...
  • Es wird immer irgendein auf der Seite angezeigtes Bild genommen. Gehen Sie davon aus, das es immer das falsche ist.

Wenn Sie nicht definieren, welche Inhalte verwendet werden sollen, werden irgendwelche Inhalte verwendet!

Warum Sie dafür sorgen müssen, dass Ihr Inhalt gut geteilt werden kann

Ganz einfach: Weil jeder Leser Ihrer Inhalte auch ein potenzieller Multiplikator ist! Wenn Ihr Inhalt gut ist – dann wird er geteilt. Und wenn Sie Ihren Inhalt nicht entsprechend vorbereiten – dann wird er nicht geteilt. Denn wer will sich seine eigene Facebook-Chronik mit schlecht optimiertem Inhalt verunstalten? Sorgen Sie also dafür, dass Ihr ohnehin guter Inhalt auch Teilens wert wird. Und nur so haben Sie die Kontrolle über Ihre Marke.

Ich kann doch nachträglich die Inhalte auf Facebook und Co verändern!

Ätschi-bätsch: Eben nicht! Seit Mitte Juli 2017 gibt es diese Möglichkeit zumindest auf Facebook nicht mehr. Das nachträgliche Bearbeiten von Inhalten ist damit vorbei. Ob und wann es bei anderen Netzwerken auch verhindert wird steht zum Erstellungs-Zeitpunkt dieses Beitrags noch nicht fest. Das ist aber auch egal, denn wenn Sie nicht festlegen, welche Inhalte geteilt werden sollen, werden irgendwelche Inhalte geteilt!

Quellcode-Zauber statt Feenstaub

Um den Inhalt Ihrer Seiten so aufzubereiten, dass er in sozialen Netzwerken vernünftig geteilt werden kann ist weder Feenstaub noch Raketentechnik nötig. Sie müssen lediglich darauf achten, dass ein paar Angaben zu Ihrem Inhalt im Quellcode der Seite untergebracht sind. Diese Angaben sind von Netzwerk zu Netzwerk unterschiedlich. Aber einmal vernünftig eingerichtet und konfiguriert müssen Sie sich später um nichts mehr kümmern. Und ja, es gibt auch Erweiterungen und Plug-Ins für verschiedene Content-Management-Systeme (CMS). Aber die nehmen Ihnen ja nicht das Grundverständnis für die Logik dahinter ab ...
Folgende Angaben müssen im Quellcode Ihrer Seite untergebracht werden:

  • Überschrift
  • Kurzbeschreibung
  • URL zur Seite
  • URL zum Vorschaubild der Seite

Wenn Sie alles richtig eingestellt haben, dann sieht ein auf Facebook geteilter Inhalt beispielsweise so aus:

Gutes Opengraph beispiel KONTOR4

Das sind die Basics – mehr brauchen Sie nicht. Abhängig vom Netzwerk sind diese Angaben mit unterschiedlichen Code-Schnipseln zu bewerkstelligen.

Diese Angaben braucht Facebook

Damit Facebook nicht raten muss, welche Inhalte des Beitrags angezeigt werden sollen, gibt es die sogenannten "OG-Tag" (OpenGraph-Tags). Ähnlich wie Meta-Tags werden diese im HTML-Header der Website eingebaut und teilen Facebook explizit mit, welche Inhalte aus dem Beitrag gezogen werden sollen. Nutzer haben keine Einsicht in die Meta-Tags - nur wenn der Website-Code eingesehen wird.

Vor dem Einpflegen der OG-Tags muss folgender GHTML Prefix eingebaut werden:

<html prefix=“og: http://ogp.me/ns#“>

Ist dieser Code-Schnipsel nicht eingefügt, werden vom W3C-Validator Fehlermeldungen ausgegeben.

Diese OG-Tags sind einzufügen

og:title - Der Titel, der in Facebook angezeigt werden soll
og:image - Die URL des Bildes, das angezeigt werden soll. Hier finden Sie Tipps zum richtigen Format der Bilder.
og:type - Um welche Art von Inhalt handelt es sich? In den meisten Fällen werden Sie website, blog oder article verwenden. Aber: Es gibt noch einige mehr ...
og:url - Der Link zum Beitrag
og:description - Der bescheibende Text zum Beitrag

Wie sieht das in der Praxis aus?

<meta property="og:title" content="Einfache Bildbearbeitung - online und kostenlos!"/>
<meta property="og:description" content="► Bildbearbeitung im Browser - einfach, schnell und dazu kostenlos! Wir erklären wie es geht!"/>
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.kontor4.de/werkzeug/bildbearbeitung-online-und-kompakt.html" />
<meta property="og:image" content="http://www.kontor4.de/files/oneo/img/content/aktuelles/2017/Bildbearbeitung_Online/bildbearbeitung_1200x627_k4.jpg" />
Diese Angaben braucht Twitter

Ähnlich wie bei Facebook, nutzt Twitter auch strukturierte Daten, die sich stark am OpenGraph Protokoll orientieren.

Einen Unterschied gibt es jedoch: Twitter hat verschiedene Anzeigeformate (TwitterCards)

Die jeweiligen Meta-Tags werden, wie auch die von Facebook, im Head-Bereich der Website eingebunden. Für jede Card-Variante gibt es zudem eigene Contenttypen. Diese müssen vorher definiert werden, sonst erkennt Twitter diese nicht als solche. Weiterhin hat jede Card bestimmte Eigenschaften, die erst durch die passende Card nutzbar werden.

Diese Tags sind einzufügen

twitter:card - Der Cardtyp, der angezeigt werden soll
twitter:site - Der Link zum Beitrag
twitter:creator - Der Autor / Urheber des Beitrags
twitter:title - Der Titel, der auf Twitter angezeigt werden soll
twitter:description - Der bescheibende Text zum Beitrag
twitter:image - Die URL des Bildes, welches angezeigt werden soll

Die verschiedenen TwitterCards

Summary Card: content="summary"

Diese TwitterCard ist die Standard-Karte und wird für die meisten Inhaltsformen genutzt. Sie enthält einen Titel, einen beschreibenden Text, das passende Bild, sowie den Link zum Beitrag.

Summary Card with Large Image: content="summary_large_image"

Ähnlich wie die SummaryCard, nur mit großem Vorschaubild.

App Card: content="app"

Wer Apps per Twitter verbreiten möchte, sollte diese Card nutzen. Mit korrekt eingetragenen Tags, lässt sich eine App auf dem Smartphone im richtigen App-Store öffnen.

PlayerCard: content="player"

Mit der PlayerCard lassen sich direkt Video- und Audio-Dateien abspielen.

Wie sieht das in der Praxis aus?

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@kontorvier"/>
<meta name="twitter:creator" content="@kontorvier"/>
<meta name="twitter:title" content="Einfache Bildbearbeitung - online und kostenlos! - Wonach suchen Sie?"/>
<meta name="twitter:description" content="► Bildbearbeitung im Browser - einfach, schnell und dazu kostenlos! Wir erklären wie es geht!"/>

Wichtigster Anpassungsbedarf: Das Vorschaubild

Sie haben sich bei Ihrer Bildauswahl etwas gedacht, die Text-/Bildschere passt optimal – doch auf Facebook wird das Bild nicht vernünftig angezeigt. Mögliche Gründe können sein:

  • Die Bildabmessungen passen nicht, das Vorschaubild ist zu groß/klein
  • Das Dateiformat des Vorschaubilds ist falsch
  • Die URL zum Bild ist falsch

Hilfreich ist dabei ein Blick in die Facebook-Dokumentation.

Was steckt technisch dahinter?

Wenn Sie die aufgeführten Anpassungen auf Ihrer Seite vorgenommen haben, dann ist Ihr Inhalt auf jeden Fall schon mal eins: ausgezeichnet! Und zwar für Maschinen. Mit dem so ausgezeichneten Text kann z.B. Facebook dem Quellcode Ihrer Seite entnehmen, welche Inhalte angezeigt werden sollen wenn Ihre Seite auf Facebook geteilt wird. Wenn Sie Facebook und Co. nicht unterstützen, dann werden irgendwelche Inhalte genommen – aber nicht die, die Sie sich vorgestellt haben.

Welche Inhalte werden ohne diese Angaben verwendet?

Wenn beispielsweise keine Opengraph-Auszeichnungen vorhanden sind, verwendet Facebook den Title-Tag, die Meta-Description und das erste verwendbare Bild als Vorschaubild.

Sie brauchen Unterstützung bei der Umsetzung?

Dann sollten wir mal reden. Wir kennen die Kniffe gut und wissen welche Hebel betätigt werden müssen, damit Ihre Website "SocialReady" wird. Profitieren Sie davon und kontaktieren Sie uns - damit Sie mit Ihrer Website auch über Social Media Marketing so richtig durchstarten können!

Kontakt aufnehmen

Zurück

Weitere Beiträge zu ...

Diesen Beitrag teilen auf ...

Zurück