So verwenden Sie Open Graph Tags

So verwenden Sie Open Graph Tags

Verwenden Sie Titel-Tags und Meta-Beschreibungs-Tags? Natürlich tun Sie das, denn Sie wissen bereits, dass Meta-Tags Ihr Suchmaschinenranking verbessern können.

Aber wussten Sie, dass Meta-Tags auch Ihren Social-Media-Traffic beeinflussen? Sicher, es gibt Googles Authorship-Tags, aber was ist mit Facebook und Twitter? Tatsächlich haben beide ihre eigenen Meta-Tags für soziale Medien, die Ihnen helfen können, die Menge an sozialem Verkehr zu erhöhen, die Sie erhalten.

Sehen Sie jemals diese Beiträge in sozialen Medien, die cool aussehende Bilder und Videos haben? Sie wissen vielleicht nicht, dass Sie keine Software oder Premium-Konten benötigen, um das Gleiche für Ihre Beiträge in sozialen Netzwerken zu tun.

Sie heißen Facebook Open Graph und Twitter Cards. Hier erfährst du, wie du beide nutzen kannst:

Facebook Open Graph

Wenn du ein Bild auf Facebook teilst, wie sieht es dann aus?

Nun, es sieht nicht immer so aus. Facebook versucht, den Code auf deiner Seite zu lesen, aber es ist nicht immer in der Lage, deine Bilder zu ziehen. Wenn du die Open Graph-Tags nicht verwendest, wenn du eine URL von deiner Website auf Facebook teilst, kann es so aussehen:

So sah es bei Quick Sprout aus, bevor ich Open Graph-Tags auf meiner Website implementierte. Nachdem ich die Open Graph-Tags implementiert hatte, konnte ich meinen Facebook-Traffic um 174 % steigern, einfach weil jetzt ein Bild neben meinen Quick Sprout-Status-Updates zu sehen war.

Nachdem Sie nun überzeugt sind, dass Sie Open Graph verwenden sollten, erfahren Sie hier, wie Sie es auf Ihrer Website einrichten.

og:title

Hier können Sie den Titel Ihres Inhalts eingeben. Dies ist vergleichbar mit dem normalen html-Titel-Tag, den eine Suchmaschine verwenden würde. Wenn Sie Ihren og:title erstellen, halten Sie die Anzahl der Zeichen auf weniger als 95 Zeichen.

Beispiel: <meta property=“og:title“ content=“11 Creative Ways to Build Links“/>

og:type

Hier beschreiben Sie die Art des Inhalts, den Sie teilen. Ist es ein Video, ein Bild, ein Blogbeitrag usw.? Hier finden Sie die vollständige Liste, aus der Sie bei der Definition Ihres Inhaltstyps auswählen können:

Aktivitäten

• Aktivität
• Sport

Unternehmen

• Bar
• Unternehmen
• Café
• Hotel
• Restaurant

Gruppen

• Veranstaltung
• Sportliga
• Sportverein

Organisationen

• Band
• Behörde
• gemeinnützig
• Schule
• Universität

Personen

• Schauspieler
• Sportler
• Autor
• Regisseur
• Musiker
• Politiker
• Persönlichkeit

Orte

• Stadt
• Land
• Landmarke
• Staat_Provinz

Produkte und Unterhaltung

• Album
• Buch
• Getränk
• Lebensmittel
• Spiel
• Produkt
• Lied
• Film
• tv_show

Websites

• blog
• website
• article

Beispiel: <meta property=“og:type“ content=“article“/>

og:description

Dies ist auch ähnlich wie Ihr html-Meta-Description-Tag, da es zur Beschreibung Ihres Inhalts verwendet wird. Sie sollten sich nicht darum kümmern, ob sie reich an Schlüsselwörtern ist, sondern sich stattdessen eine überzeugende Beschreibung ausdenken, die zu mehr Klicks führt. Sie haben bis zu 297 Zeichen für diesen Tag zur Verfügung.

Beispiel: <meta property=“og:description“ content=“Haben Sie es satt, Links auf die altmodische Art aufzubauen? Sie wissen schon, die Methoden, bei denen Sie E-Mails an Tausende von Webmastern verschicken und um Links betteln müssen. „/>

og:image

Erinnerst du dich, dass ich erwähnt habe, dass ich meinen Facebook-Traffic um 174 % steigern konnte? Das lag daran, dass ich Open Graph verwendet habe, um sicherzustellen, dass Facebook jedes Mal ein Bild anzeigt, wenn jemand eine URL von Quick Sprout teilt.

Durch die Verwendung eines og:image-Tags stellen Sie sicher, dass ein Bild neben dem Inhalt angezeigt wird, den Sie teilen. Auf diese Weise hebt es sich von all den anderen textbasierten Status-Updates ab, die die Nutzer in ihren Timelines sehen.

Bevor ich Ihnen zeige, wie Sie dieses Tag verwenden können, möchte ich Ihnen die Anforderungen von Facebook erläutern. Ein Bild muss mindestens 50px mal 50px groß sein, aber vorzugsweise größer als 200px mal 200px. Außerdem darf das Bild nicht mehr als 5 MB groß sein.

Beispiel: <meta property=“og:image“ content=“https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg“/>

og:url

In diesem Tag sollten Sie die URL der Seite angeben, die Sie teilen. Dieser Tag mag irrelevant erscheinen, ist aber wichtig, da Sie manchmal mehr als eine URL für denselben Inhalt haben werden. Durch die Verwendung dieses Tags stellst du sicher, dass alle Freigaben an eine URL und nicht an mehrere URLs gehen, was sich positiv auf deinen Facebook-Edgerank auswirken sollte.

Beispiel: <meta property=“og:url“ content=“https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/“/>

og:site_name

Dieses Tag teilt Facebook den Namen deiner Website mit. Du brauchst dieses Tag nicht wirklich, aber es schadet nicht, es einzubauen.

Beispiel: <meta property=“og:site_name“ content=“Quick Sprout“/>

fb:admins

Wenn du eine Fanpage auf Facebook hast und du mehr Daten in Facebook Insights erhalten möchtest, dann musst du dieses Tag verwenden. Es teilt Facebook mit, dass Sie der Eigentümer der Seite sind, und es verbindet Ihre Facebook-Fanpage mit Ihrer Website.

Beispiel: <meta property=“fb:admins“ content=“500013011″/>

Nun, da du deine Facebook Open Graph Meta-Tags eingerichtet hast, lass uns zu Twitter Cards übergehen.

Twitter Cards

Haben Sie jemals einen Tweet wie diesen gesehen?

Nun, diese detaillierten Tweets werden nur angezeigt, wenn Sie Twitter Cards verwenden. Würden Sie das nicht auch gerne für Ihre Website haben? So heben Sie sich von der Masse ab.

So nutzen Sie Twitter Cards:

Wenn Sie das SEO for WordPress Plugin von Yoast verwenden, folgen Sie einfach diesen Schritten.

twitter:card

Dieser Meta-Tag beschreibt die Art des Inhalts, den Sie teilen. Bei Twitter haben Sie drei Möglichkeiten: Foto (für Bilder), Player (für Videos) und Zusammenfassung (für alles andere). Wenn du deine Karte nicht definierst, wählt Twitter standardmäßig „Zusammenfassung“.

Beispiel: <meta name=“twitter:card“ content=“summary“>

twitter:url

Das ist die Seite, die Sie auf Twitter teilen. Ähnlich wie Facebook nach einer URL fragt, tut Twitter dies auch, weil Sie denselben Inhalt auf Ihrer Website mehrmals haben können. So wird sichergestellt, dass eine URL alle Tweets erhält. Andernfalls werden Ihre Tweets auf mehrere URLs aufgeteilt.

Beispiel: <meta name=“twitter:url“ content=“https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/“>

twitter:title

Gleich wie Ihr Facebook Open Graph-Titel sollte dieser nicht mit Schlüsselwörtern vollgestopft werden. Machen Sie ihn so spannend, dass die Leute darauf klicken wollen. Auch hier sollten Sie, wie bei Facebook, die Anzahl der Zeichen auf 70 beschränken.

Beispiel: <meta name=“twitter:title“ content=“11 Creative Ways to Build Links“>

twitter:description

Dies ist ähnlich wie ein Meta-Description-Tag, das Sie für Google verwenden würden. Aber stopfen Sie es nicht mit Schlüsselwörtern voll. Ihr Ziel sollte es sein, einen fesselnden Satz zu formulieren, der die Besucher dazu veranlasst, sich zu Ihrer Website durchzuklicken. Ihre Beschreibung ist auf 200 Zeichen begrenzt.

Beispiel: <meta name=“twitter:description“ content=“ Haben Sie es satt, Links auf die altmodische Art aufzubauen? Sie wissen schon, die Methoden, bei denen Sie E-Mails an Tausende von Webmastern verschicken und um Links betteln müssen. „>

twitter:image

Um Ihren Tweet hervorzuheben, brauchen Sie ein Bild. Ihre Bilder müssen eine Dateigröße von weniger als 1 MB haben und dürfen nicht kleiner als 60 x 60 px sein. Bilder, die größer als 120px x 120px sind, werden in der Größe angepasst.

Beispiel: <meta name=“twitter:image“ content=“ https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg“>

Nachdem Sie die Meta-Tags für die Twitter Card auf Ihrer Website angewendet haben, müssen Sie sich für das Card-Programm von Twitter bewerben. Sobald Sie akzeptiert werden, werden die URLs Ihrer Website im Card-Format angezeigt.

Fazit

Meta-Tags sind nicht nur für Suchmaschinen gedacht. Auch Social Media Sites nutzen sie. So wie Sie Ihre Meta-Tags für Google-Rankings und Klickraten optimieren würden, müssen Sie das Gleiche für Facebook und Twitter tun.