{"id":1012,"date":"2015-12-21T18:17:52","date_gmt":"2015-12-21T18:17:52","guid":{"rendered":"http:\/\/www.backlinktest.com\/blog\/?p=1012"},"modified":"2019-03-04T16:55:36","modified_gmt":"2019-03-04T16:55:36","slug":"nuetzliche-open-graph-basics","status":"publish","type":"post","link":"https:\/\/www.backlinktest.com\/blog\/nuetzliche-open-graph-basics\/","title":{"rendered":"N\u00fctzliche Open Graph-Basics"},"content":{"rendered":"<p>Die Nutzung von sozialen Netzwerken, wie Facebook und Google+, ist heutzutage aus dem Unternehmensmarketing nicht mehr wegzudenken. Schlie\u00dflich k\u00f6nnen hier, zu relativ \u00fcberschaubaren Kosten, eine hohe Reichweite erzielt und die Bekanntheit gesteigert werden. Geteilte Beitr\u00e4ge, Likes und Kommentare, also so genannte \u201eSocial Signals\u201c, haben zudem einen positiven Effekt auf die Suchmaschinenoptimierung.<!--more--><\/p>\n<p>Teilen User die Website eines Unternehmens, k\u00f6nnen sie ihren eigenen Freundeskreis bzw. neue Fans und Follower auf die jeweilige Unternehmensseite aufmerksam machen. <\/p>\n<p>Gibt der Betreiber einer Website jedoch nicht explizit vor, welche Daten beim Teilen eines Links angezeigt werden sollen, stellen Facebook und Google+ die jeweiligen Informationen selbst zusammen. Nicht selten passiert es dann, dass ein verschwommenes oder verpixeltes Bild angezeigt wird, die \u00dcberschrift unpassend ist und der Beschreibungstext sein Ziel verfehlt.<\/p>\n<p>Mit dem im Jahr 2010 eingef\u00fchrten \u201eOpen Graph Protocol\u201c gibt es die M\u00f6glichkeit, durch Zugang zur Facebook-API, genau diese Angaben f\u00fcr geteilte Links bei Facebook und Google+ vorab ganz individuell zu definieren. <\/p>\n<p>Heute stellen wir Ihnen einige Basics vor, damit Sie die Meta-Angaben geteilter Links ganz einfach selbst anpassen k\u00f6nnen.<\/p>\n<h2>Open Graph richtig verwenden<\/h2>\n<p>Die Einbindung der Meta-Daten erfolgt, innerhalb des HTML-Dokuments, im Header. Hier lassen sich dem Quelltext verschiedene Codes hinzuf\u00fcgen \u2013 die drei wichtigsten und deren Funktionen stellen wir Ihnen im Folgenden vor. <\/p>\n<h2>Ein Titelbild festlegen \u201eog:image\u201c<\/h2>\n<p>\u201eEin Bild sagt mehr als tausend Worte\u201c \u2013 das ist wahr, denn ein aussagekr\u00e4ftiges Titelbild weckt die Neugier auf den geteilten Link und tr\u00e4gt nachweislich entscheidend dazu bei, dass User auf den Link klicken. Der Wahl des Bildes kommt also eine ganz besondere Bedeutung zu und die Entscheidung sollte deshalb wohl\u00fcberlegt sein \u2013 ist aber nat\u00fcrlich auch jederzeit r\u00fcckg\u00e4ngig zu machen oder zu \u00e4ndern.<\/p>\n<p>Das Markup zum Einf\u00fcgen eines individuellen Titelbildes lautet:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.backlinktest.com\/blog\/wp-content\/uploads\/2015\/12\/bildre.jpg\" width=\"501\" height=\"25\" \/><\/p>\n<p>Doch aufgepasst: Damit das gew\u00e4hlte Bild wie gew\u00fcnscht mit dem geteilten Beitrag angezeigt wird, gilt es auch die entsprechenden Bildgr\u00f6\u00dfen zu beachten, die von Facebook und Google+ vorgegeben werden. Hier gibt es immer mal wieder \u00c4nderungen, die man dann auch entsprechend bei der Wahl des Titelbildes ber\u00fccksichtigen sollte. <\/p>\n<p>Aktuell liegt die optimale empfohlene Gr\u00f6\u00dfe bei 1200 x 900 Pixeln \u2013 bei geringeren Aufl\u00f6sungen wird das Bild von Facebook entsprechend \u201egestreched\u201c. Ein Bild sollte jedoch mindestens 300 x 150 Pixel gro\u00df sein.<\/p>\n<p>Weitere aktuelle Bildgr\u00f6\u00dfen von Facebook, Google+ &#038; Co. finden Sie <a href=\"https:\/\/allfacebook.de\/pages\/bildgroessen-facebook-twitter-google-pinterest\" target=\"_blank\" rel=\"noopener\">hier<\/a>.<\/p>\n<h2>Definition der \u00dcberschrift \u201eog:title\u201c<\/h2>\n<p>Die \u00dcberschrift, oder auch \u201eTitle\u201c genannt, ist \u2013 neben einem aussagekr\u00e4ftigen Bild \u2013 der \u201eEyecatcher\u201c eines geteilten Links. Aus diesem Grund ist es besonders wichtig, eine pr\u00e4gnante \u00dcberschrift zu w\u00e4hlen, welche die Interessen und Bed\u00fcrfnisse der Zielgruppe anspricht. <\/p>\n<p>Versetzen Sie sich in die Zielgruppe hinein und \u00fcberlegen Sie, welcher Titel Aufmerksamkeit erwecken k\u00f6nnte. F\u00fcr die Wahl der \u00dcberschrift stehen maximal 95 Zeichen zur Verf\u00fcgung, nach etwa 50 Zeichen findet ein Zeilenumbruch statt. Ein \u201eknackiger Einzeiler\u201c ist vermutlich besser geeignet, als die ganze Bandbreite der Zeichenzahl auszusch\u00f6pfen \u2013 das h\u00e4ngt aber nat\u00fcrlich ganz individuell von der Zielgruppe bzw. dem zu erreichenden Ziel ab.<\/p>\n<p>Der zugeh\u00f6rige Markup lautet:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.backlinktest.com\/blog\/wp-content\/uploads\/2015\/12\/uberschrift.jpg\" width=\"451\" height=\"29\" \/><\/p>\n<h2>Der Beschreibungstext \u201eog:description\u201c<\/h2>\n<p>Welchen Inhalt erwartet der User, wenn er auf den geteilten Link klickt? Diese Frag zu beantworten, das ist die Aufgabe des Beschreibungstextes, auch \u201eDescription\u201c genannt. Mit \u201eog:description\u201c kann ein individueller Beschreibungstext f\u00fcr geteilte Links in sozialen Netzwerken definiert werden. Die maximale Zeichenl\u00e4nge betr\u00e4gt 297, allerdings gilt auch hier: Je k\u00fcrzer und aussagekr\u00e4ftiger, desto besser!<\/p>\n<p>Wenn Sie im Header des HTML-Dokuments eine entsprechende Beschreibung einf\u00fcgen m\u00f6chten, ist das folgende Markup der richtige:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.backlinktest.com\/blog\/wp-content\/uploads\/2015\/12\/beschreibung.jpg\" alt=\"beschreibung\" width=\"427\" height=\"16\" \/><\/p>\n<h2>N\u00fctzliches Instrument: Der Open Graph Debugger<\/h2>\n<p>Wer \u00fcberpr\u00fcfen m\u00f6chte, welche Daten Facebook beim Teilen einer URL anzeigen, f\u00fcr den stellt der <a href=\"https:\/\/developers.facebook.com\/tools\/debug\/\" target=\"_blank\">Facebook Object Debugger<\/a> ein \u00e4u\u00dferst hilfreiches Instrument dar. Die hier gespeicherten Informationen lassen sich l\u00f6schen und durch individuelle Angaben ersetzen.<\/p>\n<p>Auch Google bietet eine entsprechende M\u00f6glichkeit zu \u00fcberpr\u00fcfen, welche Angaben beim Teilen eines Links extrahiert werden \u2013 das \u201c<a href=\"hhttps:\/\/search.google.com\/structured-data\/testing-tool\" target=\"_blank\" rel=\"noopener\">Structured Data Testing Tool<\/a>\u201d.<\/p>\n<h2>Fazit<\/h2>\n<p>Damit das Interesse der User an dem geteilten Beitrag geweckt wird, sind ein aussagekr\u00e4ftiges Bild eines geteilten Links, ein pr\u00e4gnanter Beschreibungstext und eine neugier-weckende \u00dcberschrift von entscheidender Bedeutung. Umso wichtiger, diesen Aspekt nicht dem Zufall zu \u00fcberlassen und die Meta-Angaben den Interessen der Zielgruppe entsprechend zu definieren. Auf diese Weise lassen sich deutliche Verbesserungen im Hinblick auf die Klickrate (\u201eClick-Through-Rate\u201c, kurz CTR) verzeichnen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Nutzung von sozialen Netzwerken, wie Facebook und Google+, ist heutzutage aus dem Unternehmensmarketing nicht mehr wegzudenken. Schlie\u00dflich k\u00f6nnen hier, zu relativ \u00fcberschaubaren Kosten, eine &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[200],"tags":[114,48,115],"class_list":["post-1012","post","type-post","status-publish","format-standard","hentry","category-seo-tipps","tag-facebook","tag-google","tag-open-graph"],"aioseo_notices":[],"views":4453,"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1Rh7p-gk","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.backlinktest.com\/blog\/wp-json\/wp\/v2\/posts\/1012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.backlinktest.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.backlinktest.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.backlinktest.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.backlinktest.com\/blog\/wp-json\/wp\/v2\/comments?post=1012"}],"version-history":[{"count":0,"href":"https:\/\/www.backlinktest.com\/blog\/wp-json\/wp\/v2\/posts\/1012\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.backlinktest.com\/blog\/wp-json\/wp\/v2\/media?parent=1012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.backlinktest.com\/blog\/wp-json\/wp\/v2\/categories?post=1012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.backlinktest.com\/blog\/wp-json\/wp\/v2\/tags?post=1012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}