{"id":214,"date":"2018-03-09T10:34:15","date_gmt":"2018-03-09T10:34:15","guid":{"rendered":"https:\/\/www.social-fanclick.com\/blog\/?p=214"},"modified":"2020-08-27T20:19:54","modified_gmt":"2020-08-27T20:19:54","slug":"opengraph-tags-bei-facebook","status":"publish","type":"post","link":"https:\/\/www.social-fanclick.com\/blog\/opengraph-tags-bei-facebook\/","title":{"rendered":"OpenGraph Tags bei Facebook"},"content":{"rendered":"<p><!--more--><\/p>\n<h1>OpenGraph Tags bei Facebook<\/h1>\n<p>Wer hat das nicht auch schon erlebt: Ich ver\u00f6ffentliche einen tollen Text auf meinem Blog oder meiner Webseite und teile diesen dann bei Facebook. Doch was macht Facebook daraus? Der Titel wird abgeschnitten, so dass er seinen Sinn verliert, als Untertitel wird ein Text eingeblendet, der eigentlich f\u00fcr die Suchmaschine geschrieben wurde und dann platziert Facebook auch noch das v\u00f6llig falsche Vorschaubild. Nein, so kann man die Kundschaft nicht \u00fcber Facebook auf die eigenen Inhalte locken. Geht das nicht etwas zielgerichteter? Es geht. Und zwar mit den OpenGraph Tags.<\/p>\n<h2>OG-Tags sinnvoll einsetzen<\/h2>\n<p>Facebook bietet mit den OG-Tags eine M\u00f6glichkeit an, gezielt jene Inhalte in die Vorschau von geteilten Inhalten aufzunehmen, die die Zielgruppe auch sehen soll. Dazu werden bestimmte Tags im Head-Bereich einer Seite platziert, die definieren, welcher Titel, welcher Untertitel und welche Grafik eingeblendet werden sollen. Diese Tags sind kompatibel zu HTML-5. Wer mit XHTML arbeitet, wird mit den OG-Tags HTML-Fehler im Sinne des W3-Validators produzieren. Das kann behoben werden, indem die OpenGraph Tags nur dann eingeblendet werden, wenn Facebook die Seite besucht.<\/p>\n<h2>Sehr wichtig: Die Grafik<\/h2>\n<p>Ein Bild sagt mehr als viele Worte und das falsche Bild ist oft keine Einladung, die geteilten Inhalte zu besuchen. Mit dem Tag og:image kann definiert werden, welches Bild in der Facebook-Vorschau angezeigt werden soll. Das darf sogar ein Bild sein, das gar nicht auf der Zielseite zu sehen ist, etwa eine Grafik, die speziell f\u00fcr Facebook in das passende Format gebracht worden ist. Und das passende Format ist auch ein Schl\u00fcssel bei der Bildanzeige: W\u00e4hlen Sie ein quadratisches Bild, dann wird dieses bei Facebook recht klein angezeigt, der Text wird rechts neben dem Bild platziert. Stimmt das Bild nicht mit dem Vorschauformat von Facebook \u00fcberein, dann kann es passieren, dass Teile der Grafik abgeschnitten werden. M\u00f6glicherweise verliert das Bild auf diese Weise seine Botschaft. Ein Format von 820 x 310 Pixeln passt derzeit hervorragend zur Facebook-Vorschau. Aber auch das kann sich eines Tages wieder \u00e4ndern.<\/p>\n<h2>Die \u00dcberschrift<\/h2>\n<p>Genau genommen gibt es zwei unterschiedliche Vorschau-Darstellungen f\u00fcr geteilte Inhalte bei Facebook: Einmal in der mobilen Ansicht und einmal in der Desktop-Ansicht. W\u00e4hlen Sie kurze Titel mit einer L\u00e4nge von maximal 25 Zeichen und kopieren Sie diese nicht einfach vom Title der Seite. Denn sonst wird wom\u00f6glich noch der Name Ihrer Seite mitkopiert, was den Leser irritiert. Sie k\u00f6nnen die \u00dcberschrift mit dem og:title Tag definieren.<\/p>\n<h2>Kurz und knapp: Der Untertitel<\/h2>\n<p>Der Untertitel sollte auch keine Kopie der Meta-Description sein. Gerade Google testet derzeit l\u00e4ngere Descriptions, die dann auch in den Suchergebnissen angezeigt werden. Vor allem in der mobilen Vorschau bei Facebook wird es hier aber eng. Viel mehr als 100 Zeichen sollten Sie da nicht ansetzen. Mit dem Tag og:description k\u00f6nnen Sie den Untertitel Ihrer Vorschau definieren.<\/p>\n<h2>Weitere OpenGraph Tags<\/h2>\n<p>Sie k\u00f6nnen eine Lokalisierung \u00fcber og:locale definieren, die kanonische URL mit og:url angeben und mit og:video einen Film platzieren, der dann direkt im Feed abgespielt wird. Insgesamt sind die OpenGraph Tags ein sehr m\u00e4chtiges Werkzeug, um geteilte Inhalte f\u00fcr die Facebookvorschau zu optimieren.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":215,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-social-media-tipps"],"_links":{"self":[{"href":"https:\/\/www.social-fanclick.com\/blog\/wp-json\/wp\/v2\/posts\/214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.social-fanclick.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.social-fanclick.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.social-fanclick.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.social-fanclick.com\/blog\/wp-json\/wp\/v2\/comments?post=214"}],"version-history":[{"count":2,"href":"https:\/\/www.social-fanclick.com\/blog\/wp-json\/wp\/v2\/posts\/214\/revisions"}],"predecessor-version":[{"id":278,"href":"https:\/\/www.social-fanclick.com\/blog\/wp-json\/wp\/v2\/posts\/214\/revisions\/278"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.social-fanclick.com\/blog\/wp-json\/wp\/v2\/media\/215"}],"wp:attachment":[{"href":"https:\/\/www.social-fanclick.com\/blog\/wp-json\/wp\/v2\/media?parent=214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.social-fanclick.com\/blog\/wp-json\/wp\/v2\/categories?post=214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.social-fanclick.com\/blog\/wp-json\/wp\/v2\/tags?post=214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}