Social Media Tags: Macht das Markup für Google Plus, Twitter und Facebook Sinn?

Nachdem wir uns letzte Woche den Internen Links gewidmet haben, geht es heute wieder um die Social-Tags. Heute zeigen wir Euch, wie ihr euren Auftritt in wichtigen Social-Media-Kanälen optimieren könnt – damit ihr glänzt, wenn ihr geteilt werdet. Schema.org, OpenGraph und Twitter-Cards machen eure Seite Teilbar.

Open Graph Tag, Twitter-Cards: Was ist das und was braucht man das?

Diese Schemata verarbeiten die URL, die man im Netzwerk teilt und legen Bild, URL und Titel des Postings fest. Braucht man das? Jein. Natürlich, ja! Sonst wäre dieser Artikel ja überflüssig. Funktioniert das Teilen sonst gar nicht? Nein. Fakt ist: Google Plus, Facebook und Co. nehmen, was sie kriegen können. Wenn ihr also alle Tipps unserer Onpage-Fridays umgesetzt habt, seid ihr gut aufgestellt. Hat eure Webseite einen guten Title und eine spannende Description in Eurer Seite, wird der Inhalt dieser beiden Tags beim Teilen dieser Seite dargestellt. Die gute Nachricht: Das funktioniert meistens ganz gut. Aber: Wäre es nicht schön, den Titel und die Beschreibung explizit für die sozialen Kanäle anzupassen? Außerdem: Was beim Text ganz gut funktioniert, kränkelt oft bei der Einbindung eines Beitrags-Bildes. Standardmäßig versuchen die Social Media Riesen das erste Bild im Quelltext als Beitragsbild einzubinden, bei Facebook kann man unter Umständen sogar ein Bild auswählen. Man freut sich schon, wenn das klappt, nur wird leider oft im zweiten Schritt das Bild fröhlich und frei beschnitten – mit oft unschönen Resultaten.

Kontrolle über das Social Sharing bei Facebook: Open-Graph-Tags

Um demjenigen, der unsere Seite (Beitrag, Artikel…) teilt, auch das richtige Bild, passenden Titel und Co. mitzugeben, optimieren wir also die Darstellung. Warum also auf den Zufall setzten, wenn wir die Bedingungen so einfach kontrollieren können? Zunächst ein Code- Ausschnitt aus dem-Tag:

<!-- Open Graph -->
<meta content="de_DE" property="og:locale"></meta>
<meta content="article" property="og:type"></meta>
<meta content="Social Media Tags wie Open Graph und Twitter Cards" property="og:title"></meta>
<meta content="Heute zeigen wir euch, wie ihr euren Auftritt in wichtigen S…e Open Graph optimieren könnt, damit Ihr glänzt beim teilen!" property="og:description"></meta>
<meta content="https://bitskin.berlin/suchmaschinenoptimierung/onpage-s…s-macht-das-markup-fur-google-plus-twitter-und-facebook-sinn" property="og:url"></meta>
<meta content="2015-01-28T10:48:45+00:00" property="og:updated_time"></meta>
<meta content="https://bitskin.berlin/wp-content/uploads/2014/04/onpage-friday-social-media-tags.png" property="og:image"></meta>

Kopiert diese Zeilen in den Kopf-Bereich eures Webseite-Codes, zwischen die zwei-Tags. Füllt dabei zwingend den Inhalt von „content“ mit euren eigenen Daten. Nun gehen wir die einzelnen Tags Schritt für Schritt durch:

• og:title: Der Titel eures Artikels, Posts oder einfach eurer Seite. Verwendet einen Titel der eure Facebook-Fans anspricht – also lieber aufregend als sachlich.
• og:type: Für eine Startseite bietet sich „website“ an. Für Blogartikel oder Unterseiten „article“. Eine komplette Liste von Typen gibt es hier (https://developers.facebook.com/docs/reference/opengraph/).
• og:url: Tragt hier die URL eurer Seite ein.
• og:image: Das Bild zu eurem Artikel. Seid kreativ! Hier kann der Link zu einem Bild aus eurem Artikel rein, aber auch ein Link zu einem völlig anderen Bild.
• Vielleicht wollt ihr ja Bild verwenden, dass neugierig auf den Artikel, die Seite macht? Animiert die Facebook-User zum klicken  – sachliche Zurückhaltung ist hier meist fehl am Platz. Übrigens: Facebook-Thumbnails müssen nicht mehr quadratisch sein! Facebook empfiehlt eine Bildergröße von 1200×627 Pixeln, mindestens 377×197 Pixel (mehr hier). Schneidet also eure Bilder vorher zurecht, damit ihr die 100% Kontrolle über die Darstellung eurer Links im Newsfeed eurer Fans habt.  
• og:description: Ein bezaubernder Teaser für eure Hompage oder euren Blogartikel. Soll Lust aufs Lesen machen und etwas über den zu erwartenden Inhalt preisgeben.
• og:site_name: Der Name eurer Firma, Marke, Projekts oder eurer Hauptseite. fb:admins: Wenn ihr hier die ID eurer Facebook Fanpage eintragt, verbindet ihr eure Homepage mit eurer Facebook-Fanpage. So könnt ihr erweiterte Besucherstatistiken bei „Facebook Insights“ einsehen. Im Zweifel könnt ihr dieses Tag weglassen.

Leider konnten sich die zwei blauen Social Media Giganten (Facebook und Twitter) nicht einigen. Der beliebte Dienst mit dem Vögelchen hat seine eigenen Meta Tags entwickelt: Die Twitter Card. Und damit euer-Bereich noch voller (und nützlicher) wird, fügt auch diesen Code ein:

<!-- Twitter Cards -->
<meta content="summary" name="twitter:card"></meta>
<meta content="@Bitskin" name="twitter:site"></meta>
<meta content="@paintsNdesign" name="twitter:creator"></meta>
<!-- Der Rest ist ja identisch -->

 Bevor wir die einzelnen Tags durchgehen: Je mehr ihr ausfüllt, desto besser – mindestens jedoch muss die erste Zeile vorhanden sein.

• twitter:card: Standardmäßig auf “summary” gesetzt, was für Blogbeiträge, Seiten usw. perfekt passt.
• twitter:site: Wenn im Namen eurer Firma erscheinen soll, tragt hier den Twitter-Namen des Firmenprofil ein. Das @ nicht vergessen!
• twitter:title:  Ein aufregender Titel für euren Inhalt.
• twitter:description:  Ein schöner Teaser-Text für euren Inhalt. Maximal 200 Zeichen lang.
• twitter:creator:  Der Twitter-Benutzername des Verfassers.
• twitter:image:src:  Twitter empfiehlt eine Bildgröße von mindestens 280×150 Pixeln!

Mehr auf der Twitter-Cards-Website: hier.

Und was ist mit Google Plus?

Google Plus macht einen außerordentlich guten Job, auch ohne Markup. Falls ihr jedoch abweichenden Titel, eine andere Beschreibung und ein separates Bild angeben wollt, verwendet diese Zeilen:

<!-- Schema.org für Google Plus -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

Das Ganze ist ziemlich selbsterklärend. Google Plus empfiehlt als im quadratischen Format eine Bildgröße von mindestens 150×150 Pixeln. Mehr zu den Bildgrößen haben wir übrigens in einem eigenen Social Media Image Post.

Allgemeine Tipps zu Social Media Tags

Was ihr hoffentlich schon von anderen Beiträgen zum Thema SEO bei uns gelesen habt gilt auch hier: Stopft eure Social Media Tags nicht voll mit Keywords! Macht sie lesbar und klickbar. Die Benutzer von CMS-Systemen wie WordPress dürfen sich freuen: Mit SEO-Plugins wie YOAST wird euch die Arbeit, den Code jedes Mal selbst in den Quelltext zu kopieren erspart. Hier genügt es die Inhalte einzugeben – das Plugin erstellt den erforderlichen Code selbst.

Lieber noch mal kontrollieren!

Zum Schluss könnt ihr bequem testen, ob die Einbindung eurer Social Media Tags auch funktioniert. Hier findet ihr die Links zu den Test-Tools der Social Media Riesen: 

• Social Tag Test für Twitter: https://dev.twitter.com/docs/cards/validation/validator
• Social Tag Test für Facebook: https://developers.facebook.com/tools/debug
• Social Tag Test für Google+ (Rich Snippet Test) http://www.google.com/webmasters/tools/richsnippets
• Verwendete Seiten und nützliche Links: http://moz.com/blog/meta-data-templates-123 http://www.suchmaschinenland.de/tipps/index.php/metadaten-fuer-social-media-links-optimieren https://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013 http://www.quicksprout.com/2013/03/25/social-media-meta-tags-how-to-use-open-graph-and-cards/