Wie man Webpages optimal für Social Sharing vorbereitet

Wir bei Pulpmedia bemühen uns, jedes Content-Häppchen auf Social Sharing vorzubereiten, das wir veröffentlichen. Wie das geht, weiß Kevin Niedermayr.

Vor kurzem habe ich einen sehr interessanten Blogpost zum Thema „Social Sharing“ bei MOZ gelesen. Er zeigt auf einfach Art und Weise, wie man Webpages auf das Social Sharing vorbereitet, stellt den Lesern die passenden Templates zur Verfügung und erläutert so manches Tool, dass bei diesem Vorhaben hilfreich ist. Über einen großen Nachteil dieses Blogartikels konnte ich jedoch nicht hinwegsehen – manche der zur Verfügung gestellten Templates hätten nach dem Copy-Paste-Prinzip nicht von den Usern eingefügt werden können, da sie fehlerhaft waren.

Das ist eigentlich nicht sonderlich tragisch, denn fehlende Klammern kann man als Developer selber einfügen – der Artikel richtet sich jedoch an eine andere Zielgruppe: die Personen, die auf diesem Gebiet kaum Erfahrung haben und die hätten die kleinen Fehler nicht bemerkt bzw. ausbessern können. Der großartige Blogpost wäre für sie daher nicht nützlich gewesen. Das wollte ich ändern! Daher habe ich den MOZ-Blogpost als Grundlage genommen und ihn so überarbeitet, dass er nun für alle funktioniert – egal ob mit oder ohne Web-Development-Erfahrung.

Social Sharing – wozu?

Auch wir bei Pulpmedia bemühen uns, Social Media-Metadata in jedes Content-Häppchen zu inkludieren, das wir veröffentlichen. Das erlaubt uns, das Teilen auf Facebook, Twitter, Google+ und Pinterest zu optimieren, indem wir genau definieren, wie Titel, Beschreibungen und Bilder in den Social-Streams erscheinen. Die Auswirkung dessen auf die SEO ist nicht zu verachten. Aus Erfahrung weiß man, dass die richtigen Data – optimierte Bilder inkludiert – dabei helfen den Content zu verbreiten, was häufig zu einem Anstieg der Mentions uns Likes führt.

Aber immer zu wissen, welcher Social Media-Tag eingebunden gehört, kann derweilen schon verwirrend sein. Yoast´s SEO-Plugin ist da für alle WordPress-Publisher eine sehr große Hilfe, für alle anderen: Berücksichtigt die unterschiedlichen Strukturen, welche von den bekannten Social Media-Plattformen unterstützt werden.

MOZ hat in ihrem Blogbeitrag vier Social Media-Tag-Templates zusammengestellt, welche als Vorlage dienen sollten. Diese habe ich als Grundlage für meine Templates genommen, welche Sie nun nur mehr mit Ihren Daten befüllen und Ihre persönlichen Bedürfnissen anpassen können.

Wie werden diese Templates benutzt

Ganz einfach: Damit man die Beispieltemplates nicht mühevoll abtippen muss, habe ich sie so in den Text eingebaut, dass sie einfach nur kopiert werden müssen. Achten Sie jedoch darauf, dass sie die hervorgehobenen Beispieleinfügungen durch Ihre eigenen Daten ersetzen.

Die ersten drei Template-Beispiele sind für typische „Article“-Markup und -Data optimiert, was ideal für Blogposts und die Mehrheit geschriebenen Contents ist. Das letzte Template eignet sich hingegen für Produktseiten.

Sobald Sie diese Templates eingefügt haben, vergessen Sie nicht, diese zu testen und um die etwaige Genehmigung der Social Media-Plattformen anzusuchen.

1. Das Minimaltemplate

Dieser abgespeckte HTML-Block läuft verlässlich und schnell. Er beinhaltet ein Minimum an nackten Daten für ein optimiertes Teilen auf Facebook, Twitter, Google+ und Pinterest.

Der Title-Tag und die Meta Description sind inkludiert, auch wenn diese technisch betrachtet keine Social Media-Meta-Tags sind. Sie können jedoch von Google+ und anderen Social Media-Plattformen genutzt werden. Es ist daher von Vorteil, diese auf jeder Seite, die Sie veröffentlichen, zu inkludieren.

<!-- Gehoert zwischen die head-Tags der Seite -->

<title>Seiten Titel, maximale Länge zwischen 60-70 Zeichen</title>

<meta name="description" content="Beschreibung der Seite. Nicht länger als 155 Zeichen." />

<!– Twitter Card data –>
<meta name=“twitter:card“ value=“summary“>

<!– Open Graph data –>
<meta property=“og:title“ content=“Seitentitel“ />
<meta property=“og:type“ content=“article“ />
<meta property=“og:url“ content=“http://www.pulp.rocks/“ />
<meta property=“og:image“ content=“http://pulp.rocks.com/image.jpg“ />
<meta property=“og:description“ content=“Beschreibung für Open Graph Tags hier.“ />

2. Das Standardtemplate

Das Standardtemplate stellt eine robustere Implementierung von Social-Tags dar und ist dafür gemacht, quer auf allen Plattformen zu funktionieren. Als Draufgabe zum Minimaltemplate, welches oberhalb bereits angeführt wurde, beinhaltet das Standardtemplate folgende Features:

Die Twitter-Summary-Card
Das Twitter-Thumbnail-Image
Facebook Page-Insights

<!-- Gehoert zwischen die head-Tags der Seite -->

<title>Seiten Titel, maximale Länge zwischen 60-70 Zeichen</title>

<meta name="description" content="Beschreibung der Seite. Nicht länger als 155 Zeichen." />

<!– Twitter Card data –>
<meta name=“twitter:card“ content=“summary“>
<meta name=“twitter:site“ content=“@pulpmedia“>
<meta name=“twitter:title“ content=“Seitentitel“>
<meta name=“twitter:description“ content=“Beschreibung der Seite. Weniger als 155 Zeichen.“>
<meta name=“twitter:creator“ content=“@pulpmedia“>
<– Twitter Summary card images benoetigen eine Mindestgroesse von 200x200px –>
<meta name=“twitter:image“ content=“http://pulp.rocks/image.jpg“>

<!– Open Graph data –>
<meta property=“og:title“ content=“Seitentiel“ />
<meta property=“og:type“ content=“article“ />
<meta property=“og:url“ content=“http://www.pulp.rocks/“ />
<meta property=“og:image“ content=“http://pulp.rocks/image.jpg“ />
<meta property=“og:description“ content=“Beschreibung der Seite.“ />
<meta property=“og:site_name“ content=“Seitenname, z.B. Pulpmedia“ />
<!–fb:admins wird verwendet um bei Insights das Eigentum der Seite zu „claimen“–>
<meta property=“fb:admins“ content=“Facebook ID des Admins (z.B. 1234,1235)“ />

3. Das volle Programm

Das ist sozusagen das Monster! Im Gegensatz zu den bereits vorgestellten Templates verfügt dieses Template über folgende Punkte:

Twitter-Summary-Card mit großem Bild
Erweiterte Open Graph-Article-Data
Google+ Autorship und Publisher Markup – obwohl dieser Pluspunkt die Content-Erscheinung in Google+ nicht verändert, fügt er Links zu Ihren Google+ Pages in den Suchergebnissen hinzu.
Schema.org Article-Markup

<!-- Hierzu gehört der HTML Tag etwas angepasst, itemscope zegt an, wo im Markup

oder auf der Seite sich der verlinkte Inhalt befindet

Mehr dazu: http://schema.org/docs/gs.html#microdata_itemscope_itemtype
–>
<html itemscope itemtype=“http://pulp.rocks/irgendein-artikel“>

<!– Itemscope kann optional auch auf ein Div angwewendet werden: –>
<div itemscope itemtype=“http://pulp.rocks/ein-spezielles-div“>

<!– Gehoert zwischen die head-Tags der Seite –>
<title>Seiten Titel, maximale Länge zwischen 60-70 Zeichen</title>
<meta name=“description“ content=“Beschreibung der Seite. Nicht länger als 155 Zeichen.“ />

<!– Google Authorship und Publisher Markup –>
<link rel=“author“ href=“https://plus.google.com/[Google+_Profile]/posts“/>
<link rel=“publisher“ href=“https://plus.google.com/[Google+_Page_Profile]“/>

<!– Schema.org markup fuer Google+ –>
<meta itemprop=“name“ content=“Name oder Titel eintragen“>
<meta itemprop=“description“ content=“Eine Beschreibung der Seite“>
<meta itemprop=“image“ content=“http://www.pulp.rocks/image.jpg“>

<!– Twitter Card data –>
<meta name=“twitter:card“ content=“summary_large_image“>
<meta name=“twitter:site“ content=“@pulpmedia“>
<meta name=“twitter:title“ content=“Seitentitel“>
<meta name=“twitter:description“ content=“Beschreibung der Seite in weniger als 200 Zeichen.“>
<!–Twitter Account vom Autor des Inhalts/Artikels–>
<meta name=“twitter:creator“ content=“@author_handle“>
<!– Twitter Summary Large Bild muss mindestens 280x150px gross sein. –>
<meta name=“twitter:image:src“ content=“http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg“>

<!– Open Graph data –>
<meta property=“og:title“ content=“Seitentiel“ />
<meta property=“og:type“ content=“article“ />
<meta property=“og:url“ content=“http://www.pulp.rocks/“ />
<meta property=“og:image“ content=“http://pulp.rocks/image.jpg“ />
<meta property=“og:description“ content=“Beschreibung der Seite.“ />
<meta property=“og:site_name“ content=“Seitenname, z.B. Pulpmedia“ />
<meta property=“article:published_time“ content=“2013-09-17T05:59:00+01:00″ />
<meta property=“article:modified_time“ content=“2013-09-16T19:08:47+01:00″ />
<!–Kategorie des Artikels, z.B. Sport/Gesundheit–>
<meta property=“article:section“ content=“Sports“ />
<meta property=“article:tag“ content=“Artikel Tags“ />
<meta property=“fb:admins“ content=“Facebook ID des Admins (z.B. 1234,1235)“ />

4. Das Produkttemplate

Bei Händlern sind Produkt-Markups sehr populär und für Developer sind diese leicht in die Warenkorb-Software zu implementieren. Des Weiteren unterscheidet sich das Produkttemplate nur in einigen Punkten vom zuvor genannten Template:

modifizierter <html>-Tag, um die schema.org Produkt-Data wiederzuspiegeln
Die Twitterkärtchen inkludieren die notwenigen Data-Lables.
Die Open Graph-Data beinhaltet Preis- und Währungsinformationen.

<!-- Um den Artikel in die Itemscope aufzunehmen muss der HTML Tag wie folgt aktualisiert werden. -->

<html itemscope itemtype="http://pulp.rocks/irgendein-artikel">

<!– Schema.org markup for Google+ –>
<meta itemprop=“name“ content=“Name oder Titel eintragen“>
<meta itemprop=“description“ content=“Eine Beschreibung der Seite“>
<meta itemprop=“image“ content=“http://www.pulp.rocks/image.jpg“>

<!– Twitter Card data –>

<!–Die jeweilige Card welche man verwenden moechte: Summary, Summary mit grossem Bild
Photo, Gallery, App, Player (Video, Audio, Media), oder Product (eCommerce)
–>
<meta name=“twitter:card“ content=“product“>
<meta name=“twitter:site“ content=“@pulpmedia“>
<meta name=“twitter:title“ content=“Seitentitel“>
<meta name=“twitter:description“ content=“Beschreibung der Seite in weniger als 200 Zeichen.“>
<!–Twitter Account vom Autor des Inhalts/Artikels–>
<meta name=“twitter:creator“ content=“@author_handle“>
<meta name=“twitter:image:src“ content=“http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg“>
<!–Benötigte Daten für das jeweilige Produkt: z.B. Farbe, Preis, Damen/Herren Mode, …–>
<meta name=“twitter:data1″ content=“$3″>
<meta name=“twitter:label1″ content=“Price“>
<meta name=“twitter:data2″ content=“Black“>
<meta name=“twitter:label2″ content=“Color“>

<!– Open Graph data –>
<meta property=“og:title“ content=“Seitentiel“ />
<meta property=“og:type“ content=“article“ />
<meta property=“og:url“ content=“http://www.pulp.rocks/“ />
<meta property=“og:image“ content=“http://pulp.rocks/image.jpg“ />
<meta property=“og:description“ content=“Beschreibung der Seite.“ />
<meta property=“og:site_name“ content=“Seitenname, z.B. Pulpmedia“ />
<!–bei statischen Preisen wird hier die Stückzahl und die Waehrung angegeben bei dynamischen
Stueckzahlen/Preisen sieht es anders aus, siehe hier:
https://developers.facebook.com/docs/payments/product
–>
<meta property=“og:price:amount“ content=“15.00″ />
<meta property=“og:price:currency“ content=“USD“ />

Test und Bewilligung – die richtigen Tools

So manche soziale Plattform verlangt von ihren Usern, dass sie um eine Genehmigung ansuchen, bevor sie ihre Meta-Information auf der Seite anzeigen dürfen. Welche das sind, wie Sie diese Erlaubnis erhalten und welche Tools dabei sehr nützlich sind, wird nun erläutert:

a) Der Facebook Debugger

Man braucht zuvor keine Genehmigung, um eine Meta-Information auf Facebook zu zeigen, aber das von der Social Media-Plattform angebotene Debugging-Tool stellt Ihnen zahlreiche Informationen zu Ihren Tags zur Verfügung. So lassen sich ebenfalls die Twitter-Tags analysieren.

b) Das Twitter-Validation Tool

Bevor Ihre Twitter-Card auf der Social Media-Plattform sichtbar wird, muss zuerst Ihre Domain bewilligt werden. Glücklicherweise könnte dieser Prozess nicht einfacher sein. Nachdem Sie Ihre Card implementiert haben, geben Sie ihre URL in das Validation-Tool ein. Nachdem Ihr Markup gecheckt wurde, wählen Sie „Submit for Aproval“ aus und twittern Sie los.

c) Googles Test-Tool für strukturierte Daten

Webmaster nutzen üblicherweise das Test-Tool für strukturierte Daten um Autorship-Markups und die Vorschau der Snippets in den Suchergebnissen zu testen. Es kann jedoch auch zeigen, welche weiteren Datentypen Google aus jeder Seiter extrahieren kann.

d) Der Pinterest Rich Pins Validator

Wie auch bei Twitter benötigt man bei Pinterest ebenfalls eine Erlaubnis, um die Rich-Pin-Funktion zu aktivieren. Mit Hilfe dieses Rich Pins Validator-Tool kann man das eigene Data-Makeup testen und gleichzeitig um dessen Einbindung ansuchen.