{"id":30221,"date":"2026-02-17T08:42:00","date_gmt":"2026-02-17T07:42:00","guid":{"rendered":"https:\/\/www.web-systems.pl\/open-graph-tags-linkvorschau-social-media\/"},"modified":"2026-09-25T08:09:07","modified_gmt":"2026-09-25T07:09:07","slug":"open-graph-tags-linkvorschau-social-media","status":"publish","type":"post","link":"https:\/\/www.web-systems.pl\/de\/open-graph-tags-linkvorschau-social-media\/","title":{"rendered":"Open-Graph-Tags: So richten Sie die Linkvorschau in Social Media ein"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Wie ein geteilter Link aussieht, bestimmen die <strong>Open-Graph-Tags<\/strong> im &lt;head&gt;-Bereich der Seite. Fehlen sie, raten Facebook, LinkedIn oder Messenger den Titel und das Bild selbst. Und sie raten jedes Mal anders. Statt des Beitragsbilds erscheint das Logo aus dem Footer, irgendein Icon oder eine leere Kachel. Im Folgenden zeige ich, welche Tags Sie einbauen sollten und wie Sie die Grafik vorbereiten. Au\u00dferdem geht es darum, wie Sie das Ganze in WordPress einrichten und wie Sie eine Plattform zwingen, die Vorschau zu aktualisieren, wenn sie hartn\u00e4ckig die alte Version zeigt.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhaltsverzeichnis<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.web-systems.pl\/de\/open-graph-tags-linkvorschau-social-media\/#Was_sind_Open-Graph-Tags_und_woher_nehmen_Plattformen_die_Linkvorschau\" >Was sind Open-Graph-Tags und woher nehmen Plattformen die Linkvorschau?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.web-systems.pl\/de\/open-graph-tags-linkvorschau-social-media\/#Welche_Open-Graph-Tags_sind_Pflicht_und_welche_lohnen_sich_zusaetzlich\" >Welche Open-Graph-Tags sind Pflicht und welche lohnen sich zus\u00e4tzlich?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.web-systems.pl\/de\/open-graph-tags-linkvorschau-social-media\/#og_image_Groesse_Format_und_Seitenverhaeltnis_des_Bildes\" >og:image: Gr\u00f6\u00dfe, Format und Seitenverh\u00e4ltnis des Bildes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.web-systems.pl\/de\/open-graph-tags-linkvorschau-social-media\/#So_richten_Sie_Open-Graph-Tags_in_WordPress_und_auf_anderen_Websites_ein\" >So richten Sie Open-Graph-Tags in WordPress und auf anderen Websites ein<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.web-systems.pl\/de\/open-graph-tags-linkvorschau-social-media\/#Warum_aendert_sich_die_Linkvorschau_nicht_und_wie_aktualisiert_man_sie\" >Warum \u00e4ndert sich die Linkvorschau nicht und wie aktualisiert man sie?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.web-systems.pl\/de\/open-graph-tags-linkvorschau-social-media\/#Die_Linkvorschau_als_fester_Teil_jeder_Veroeffentlichung\" >Die Linkvorschau als fester Teil jeder Ver\u00f6ffentlichung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.web-systems.pl\/de\/open-graph-tags-linkvorschau-social-media\/#Haeufige_Fragen\" >H\u00e4ufige Fragen<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.web-systems.pl\/de\/open-graph-tags-linkvorschau-social-media\/#Beeinflussen_Open-Graph-Tags_das_Ranking_bei_Google\" >Beeinflussen Open-Graph-Tags das Ranking bei Google?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.web-systems.pl\/de\/open-graph-tags-linkvorschau-social-media\/#Brauchen_LinkedIn_und_Facebook_eigene_Tags\" >Brauchen LinkedIn und Facebook eigene Tags?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.web-systems.pl\/de\/open-graph-tags-linkvorschau-social-media\/#Was_tun_wenn_nach_der_Aenderung_von_og_image_weiterhin_das_alte_Bild_erscheint\" >Was tun, wenn nach der \u00c4nderung von og:image weiterhin das alte Bild erscheint?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Was_sind_Open-Graph-Tags_und_woher_nehmen_Plattformen_die_Linkvorschau\"><\/span>Was sind Open-Graph-Tags und woher nehmen Plattformen die Linkvorschau?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Das sind Meta-Tags, aus denen ein soziales Netzwerk erf\u00e4hrt, mit welchem Titel, welchem Bild und welcher Adresse es die Seite darstellen soll. Laut der <a href=\"https:\/\/ogp.me\/\" rel=\"nofollow noopener\" target=\"_blank\">Spezifikation des Open-Graph-Protokolls<\/a> machen sie aus einer normalen Unterseite ein Objekt, das die Plattform genauso anzeigt wie ihre eigenen Inhalte. Technisch sind das einfach zus\u00e4tzliche &lt;meta property=&#8221;og:&#8230;&#8221;&gt;-Elemente im Kopf des Dokuments. Besucher sehen sie nicht. \u00dcberhaupt nicht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Facebook, LinkedIn und die meisten Messenger lesen dieselben Tags aus. Einmal eingebaut, wirkt es an vielen Stellen gleichzeitig, praktisch. Verwechseln Sie sie aber nicht mit schema.org-Daten (ein h\u00e4ufiger Fehler). Meta-Tags f\u00fcr Social Media steuern, wie eine geteilte Seite aussieht. <a href=\"https:\/\/www.web-systems.pl\/czym-sa-dane-strukturyzowane-i-jak-ich-uzywac-na-stronach-www\/\">Was strukturierte Daten sind<\/a>, ist dagegen ein anderes Thema: eine Beschreibung des Inhalts f\u00fcr Suchmaschinen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Welche_Open-Graph-Tags_sind_Pflicht_und_welche_lohnen_sich_zusaetzlich\"><\/span>Welche Open-Graph-Tags sind Pflicht und welche lohnen sich zus\u00e4tzlich?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Die Spezifikation verlangt auf jeder Seite vier Eigenschaften. Einige weitere verbessern Aussehen und Barrierefreiheit der Vorschau. Pflicht sind:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>og:title<\/strong> - der Titel, der in der Vorschau erscheinen soll,<\/li>\n<li><strong>og:type<\/strong> - die Art des Objekts, bei einem Blogbeitrag meist article,<\/li>\n<li><strong>og:image<\/strong> - die Adresse des Bildes, das in der Kachel angezeigt wird,<\/li>\n<li><strong>og:url<\/strong> - die kanonische Adresse, die der Plattform als feste Kennung der Seite dient.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Dazu empfehle ich einige erg\u00e4nzende Tags. og:description ist eine kurze Beschreibung. og:image:alt beschreibt die Grafik f\u00fcr Screenreader (und wird meiner Meinung nach am h\u00e4ufigsten vergessen). og:locale gibt Sprache und Region an, og:site_name den Namen der Website. Ein kompletter Satz f\u00fcr einen einzelnen Beitrag kann so aussehen:<\/p>\n\n\n\n<pre><code>&lt;meta property=\"og:title\" content=\"So richten Sie die Linkvorschau ein\" \/&gt;\n&lt;meta property=\"og:type\" content=\"article\" \/&gt;\n&lt;meta property=\"og:url\" content=\"https:\/\/example.com\/linkvorschau\/\" \/&gt;\n&lt;meta property=\"og:image\" content=\"https:\/\/example.com\/img\/linkvorschau.jpg\" \/&gt;\n&lt;meta property=\"og:image:alt\" content=\"Link-Kachel mit Titel und Beitragsbild\" \/&gt;\n&lt;meta property=\"og:description\" content=\"Kurze Beschreibung des Beitrags f\u00fcr die Vorschau.\" \/&gt;\n&lt;meta property=\"og:locale\" content=\"de_DE\" \/&gt;\n&lt;meta property=\"og:site_name\" content=\"Name der Website\" \/&gt;<\/code><\/pre>\n\n<h2><span class=\"ez-toc-section\" id=\"og_image_Groesse_Format_und_Seitenverhaeltnis_des_Bildes\"><\/span>og:image: Gr\u00f6\u00dfe, Format und Seitenverh\u00e4ltnis des Bildes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p class=\"wp-block-paragraph\">Abmessungen und Seitenverh\u00e4ltnis des Bildes m\u00fcssen zur aktuellen Dokumentation der Plattformen passen. Wenn nicht, wird die Grafik beschnitten oder schrumpft zu einem kleinen Vorschaubild neben dem Text. Meta und LinkedIn \u00e4ndern ihre Vorgaben immer wieder. Schauen Sie deshalb in die Hilfe der jeweiligen Plattform, bevor Sie eine Grafikvorlage erstellen, und nicht in eine Anleitung von vor ein paar Jahren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unabh\u00e4ngig von den Abmessungen bew\u00e4hren sich ein paar einfache Regeln:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>geben Sie eine absolute Adresse mit https an, keinen relativen Pfad,<\/li>\n<li>halten Sie das wichtigste Element und eventuellen Text in der Bildmitte, denn die R\u00e4nder werden oft abgeschnitten,<\/li>\n<li>erstellen Sie f\u00fcr jeden Beitrag eine eigene Grafik statt eines einzigen Logos f\u00fcr die ganze Website.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u00dcbrigens: Die Vorschau auf Facebook und das Link-Vorschaubild auf LinkedIn nutzen dasselbe og:image. Eine sauber gemachte Datei deckt also meist beide Netzwerke ab.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"So_richten_Sie_Open-Graph-Tags_in_WordPress_und_auf_anderen_Websites_ein\"><\/span>So richten Sie Open-Graph-Tags in WordPress und auf anderen Websites ein<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In WordPress \u00fcberlassen Sie das am einfachsten einem SEO-Plugin, das die Tags f\u00fcr jeden Beitrag selbst erzeugt. Drei Schritte, fertig:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Installieren und konfigurieren Sie ein SEO-Plugin, zum Beispiel Rank Math oder Yoast.<\/li>\n<li>\u00d6ffnen Sie im Beitragseditor den Social-Media-Reiter und legen Sie Titel, Beschreibung und Bild f\u00fcr geteilte Links fest.<\/li>\n<li>Speichern Sie den Beitrag und pr\u00fcfen Sie im Quelltext der Seite, ob die og:-Tags die richtigen Werte haben.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Bei uns sieht das so aus: Auf web-systems.pl erzeugt Rank Math og:title, og:image, og:image:alt und og:locale. Und noch etwas. Titel und Beschreibung f\u00fcr Social Media m\u00fcssen den Meta-Title f\u00fcr Google nicht kopieren. Sie d\u00fcrfen k\u00fcrzer und pointierter sein. Die Regeln sind im Grunde dieselben wie beim <a href=\"https:\/\/www.web-systems.pl\/seo-copywriting\/\">Texten f\u00fcr Suchmaschinen<\/a>, nur sitzt der Leser woanders. Er scrollt durch den Feed, nicht durch Suchergebnisse.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Onlineshops und auf Websites ohne WordPress kommen die Tags direkt in die Header-Vorlage. Meist nebenbei, wenn Sie die <a href=\"https:\/\/www.web-systems.pl\/tworzenie-stron-www\/\">Erstellung einer Firmenwebsite<\/a> in Auftrag geben. Achten Sie daf\u00fcr auf doppelte Tags. Theme plus zwei Plugins, jedes f\u00fcgt seine eigenen ein, und die Plattform nimmt das falsche Bild. Ein Klassiker.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Warum_aendert_sich_die_Linkvorschau_nicht_und_wie_aktualisiert_man_sie\"><\/span>Warum \u00e4ndert sich die Linkvorschau nicht und wie aktualisiert man sie?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Weil Plattformen die Vorschau im Cache speichern. Nach einer Korrektur der Tags m\u00fcssen Sie also ein erneutes Abrufen der Seite erzwingen. Auf Facebook geht das im Sharing Debugger von Meta, auf LinkedIn im Post Inspector. Sie f\u00fcgen die Adresse ein, das Tool l\u00e4dt die Seite neu und zeigt, was es ausgelesen hat, samt Warnungen. Wie der Cache genau funktioniert, beschreibt die Dokumentation der jeweiligen Plattform.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Fehlersuche beginne ich immer mit der Quelltextansicht im Browser. Sind dort keine Tags? Dann hilft auch kein Debugger. Die h\u00e4ufigsten Ursachen sind:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>ein Bild, das kleiner ist, als die Plattform verlangt,<\/li>\n<li>eine Bildadresse als relativer Pfad,<\/li>\n<li>eine Sperre f\u00fcr den Crawler der Plattform in der robots.txt oder in den Sicherheitseinstellungen des Servers,<\/li>\n<li>eine Weiterleitungskette, die zu einer anderen Version der Adresse f\u00fchrt,<\/li>\n<li>fehlendes og:url oder eine Adresse, die nicht der kanonischen entspricht.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Die_Linkvorschau_als_fester_Teil_jeder_Veroeffentlichung\"><\/span>Die Linkvorschau als fester Teil jeder Ver\u00f6ffentlichung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hier braucht es keine Tricks, nur eine Gewohnheit. Legen Sie bei jedem neuen Beitrag Bild und Titel f\u00fcr geteilte Links fest, und bevor Sie den Link irgendwo posten, schicken Sie ihn durch den Debugger. Eine gepflegte Kachel wirkt in organischen Posts genauso wie in Anzeigen. Deshalb sind gut eingerichtete Open-Graph-Tags das Fundament, auf dem <a href=\"https:\/\/www.web-systems.pl\/marketing-spolecznosciowy\/\">Kampagnen in sozialen Medien<\/a> aufbauen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Haeufige_Fragen\"><\/span>H\u00e4ufige Fragen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1790308489366-0\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Beeinflussen_Open-Graph-Tags_das_Ranking_bei_Google\"><\/span>Beeinflussen Open-Graph-Tags das Ranking bei Google?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>u003cpu003eNein. Google ber\u00fccksichtigt sie nicht bei der Bestimmung der Position. Sie entscheiden aber dar\u00fcber, wie ein Link nach dem Teilen aussieht, und davon h\u00e4ngt ab, ob jemand darauf klickt und wie viel Traffic aus Social Media kommt.u003c\/pu003e<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1790308489366-1\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Brauchen_LinkedIn_und_Facebook_eigene_Tags\"><\/span>Brauchen LinkedIn und Facebook eigene Tags?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>u003cpu003eMeist nicht, denn beide Netzwerke lesen og:title, og:image und og:description. Eine eigene Grafik braucht es nur, wenn die Dokumentation einer Plattform ein anderes Seitenverh\u00e4ltnis verlangt als das, das Sie bereits verwenden.u003c\/pu003e<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1790308489366-2\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Was_tun_wenn_nach_der_Aenderung_von_og_image_weiterhin_das_alte_Bild_erscheint\"><\/span>Was tun, wenn nach der \u00c4nderung von og:image weiterhin das alte Bild erscheint?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>u003cpu003eErzwingen Sie ein erneutes Abrufen der Adresse im Sharing Debugger oder im Post Inspector. Hat das nicht geholfen? Laden Sie die Grafik unter einem neuen Dateinamen hoch und ersetzen Sie die Adresse in og:image. Die Plattform kann n\u00e4mlich das Bild selbst im Speicher behalten, unabh\u00e4ngig von der Seite.u003c\/pu003e<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Wie ein geteilter Link aussieht, bestimmen die Open-Graph-Tags im &lt;head&gt;-Bereich der Seite. Fehlen sie, raten Facebook, LinkedIn oder Messenger den Titel und das Bild selbst. Und sie raten jedes Mal anders. Statt des Beitragsbilds erscheint das Logo aus dem Footer, irgendein Icon oder eine leere Kachel. Im Folgenden zeige ich, welche Tags Sie einbauen sollten [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":30167,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[815],"tags":[],"class_list":["post-30221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-online-marketing-de"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/posts\/30221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/comments?post=30221"}],"version-history":[{"count":1,"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/posts\/30221\/revisions"}],"predecessor-version":[{"id":30240,"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/posts\/30221\/revisions\/30240"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/media\/30167"}],"wp:attachment":[{"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/media?parent=30221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/categories?post=30221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/tags?post=30221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}