{"id":867209,"date":"2023-10-06T10:26:06","date_gmt":"2023-10-06T15:26:06","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/so-konfigurieren-sie-open-graph-und-twitter-karten-fur-wordpress\/"},"modified":"2023-10-06T10:26:06","modified_gmt":"2023-10-06T15:26:06","slug":"so-konfigurieren-sie-open-graph-und-twitter-karten-fur-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/so-konfigurieren-sie-open-graph-und-twitter-karten-fur-wordpress\/","title":{"rendered":"So konfigurieren Sie Open Graph und Twitter Karten f\u00fcr WordPress"},"content":{"rendered":"<p>\n<img decoding=\"async\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/Como-configurar-Open-Graph-y-Twitter-Tarjetas-para-WordPress.jpg\"><\/p>\n<p>Gute Inhalte ziehen ein relevantes Publikum auf Ihre Website und es besteht eine gute Chance, dass einige dieser Personen Ihre Inhalte in sozialen Medien teilen m\u00f6chten.  Manchmal treten jedoch Probleme auf, wenn geteilte Inhalte in einem sozialen Stream nicht korrekt angezeigt werden. Hier kann die Verwendung von Open Graph-Tags Abhilfe schaffen.<\/p>\n<p>Mit Open Graph k\u00f6nnen Sie das Erscheinungsbild von Titel, Bild, Beschreibung und mehr Ihrer Inhalte steuern, wenn diese \u00fcber soziale Kan\u00e4le geteilt werden.  M\u00f6glicherweise sind Sie bereits mit g\u00e4ngigen Meta-Tags wie dem Titel-Tag und den Beschreibungs-Tags vertraut.  Viele Blogger wissen jedoch nicht, dass es andere spezifische Meta-Tags f\u00fcr Social-Media-Websites wie Google+ gibt. Facebook, Twitter Und Pinterest.  Der Grund, warum diese Social-Media-Sites mit der Verwendung von Metadaten begonnen haben, besteht darin, Inhalte zusammen mit zugeh\u00f6rigen Bildern, Beschreibungen und Links ordnungsgem\u00e4\u00df anzuzeigen.  Durch die Definition dieser Meta-Tags k\u00f6nnen Sie sicherstellen, dass Ihre Inhalte in sozialen Medien einfacher geteilt und auf einen Blick verstanden werden k\u00f6nnen.<\/p>\n<p>Jede Social-Media-Site hat unterschiedliche Vorlieben. Pinterest und Google+ bevorzugen Schema-Tags, unterst\u00fctzen aber auch Open Graph-Protokoll-Tags, die von bevorzugt werden FacebookGoogle+ und Pinterest.<\/p>\n<p>Open Graph-Tags liegen zwischen <\/p>\n<p>  Abschnitt der Website.  Die am h\u00e4ufigsten verwendeten Tags sind:<\/p>\n<ul>\n<li>og: Titel<\/li>\n<li>og: Beschreibung<\/li>\n<li>og: URL<\/li>\n<li>og: Site-Name<\/li>\n<li>og: Bild<\/li>\n<li>og: Typ<\/li>\n<\/ul>\n<p>Das macht wahrscheinlich nicht viel Sinn, daher finden Sie hier einige Diagramme zum Teilen in sozialen Netzwerken, in denen die Open Graph-Tags deutlich gekennzeichnet sind.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1632155286_977_Como-configurar-Open-Graph-y-Twitter-Tarjetas-para-WordPress.jpg\" alt=\"Pinterest    Beispiel f\u00fcr einen Rich Pin\" width=\"1000\" height=\"508\"><\/p>\n<p class=\"wp-caption-text\">Pinterest    Beispiel f\u00fcr einen Rich Pin<\/p>\n<p><img decoding=\"async\" aria-describedby=\"caption-attachment-46201\" loading=\"lazy\" class=\"\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1632155287_903_Como-configurar-Open-Graph-y-Twitter-Tarjetas-para-WordPress.jpg\" alt=\"Beispiel f\u00fcr Google +1-Aktionen\" width=\"650\" height=\"440\"><\/p>\n<p id=\"caption-attachment-46201\" class=\"wp-caption-text\">Beispiel f\u00fcr Google +1-Aktionen<\/p>\n<p><img decoding=\"async\" aria-describedby=\"caption-attachment-46202\" loading=\"lazy\" class=\"\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1632155287_165_Como-configurar-Open-Graph-y-Twitter-Tarjetas-para-WordPress.jpg\" alt=\"Facebook    Beispiel f\u00fcr ein offenes Diagramm\" width=\"966\" height=\"640\"><\/p>\n<p id=\"caption-attachment-46202\" class=\"wp-caption-text\">Facebook    Beispiel f\u00fcr ein offenes Diagramm<\/p>\n<p><img decoding=\"async\" aria-describedby=\"caption-attachment-46203\" loading=\"lazy\" class=\"\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1632155287_287_Como-configurar-Open-Graph-y-Twitter-Tarjetas-para-WordPress.jpg\" alt=\"Twitter    Kartenbeispiel\" width=\"800\" height=\"618\"><\/p>\n<p id=\"caption-attachment-46203\" class=\"wp-caption-text\">Twitter    Kartenbeispiel<\/p>\n<p>Au\u00dferdem Twitter Sie haben Ihre eigenen benutzerdefinierten Tags namens definiert Twitter Karten.  Mithilfe dieser Tags k\u00f6nnen Ihre Links jedes Mal, wenn sie getwittert werden, mehr Informationen pr\u00e4sentieren.  \u00c4hnlich wie Open Graph-Tags, die Twitter Auch die Kartenetiketten geh\u00f6ren dazu <\/p>\n<p>  Abschnitt einer Webseite.  Meist genutzt Twitter Die Tags sind:<\/p>\n<ul class=\"no-borders-list\">\n<li>Twitter: Karte<\/li>\n<li>Twitter: Website<\/li>\n<li>Twitter: Ersteller<\/li>\n<\/ul>\n<p>W\u00e4hrend Sie Open Graph und hinzuf\u00fcgen k\u00f6nnen Twitter Karten-Tags Manuell gibt es auf WordPress.org viele Plugins, die es selbst unerfahrenen Benutzern leicht machen, Tags zu WordPress-Beitr\u00e4gen und -Seiten hinzuzuf\u00fcgen.  Zu unseren Favoriten geh\u00f6ren:<\/p>\n<ol>\n<li>SEO von Yoast<\/li>\n<li>Diagramm \u00f6ffnen f\u00fcr FacebookGoogle+ und Twitter Kartenetiketten<\/li>\n<li>Das SEO-Framework<\/li>\n<li>J.M. Twitter Karten (nur f\u00fcr Twitter Karten)<\/li>\n<li>Open Graph-Protokoll-Framework (nur f\u00fcr Open Graph-Tags und f\u00fcr Entwickler empfohlen)<\/li>\n<\/ol>\n<p>F\u00fcr dieses Tutorial verwenden wir die integrierten Optionen des Yoast SEO-Plugins, um spezielle Meta-Tags zu definieren, um unsere Beitr\u00e4ge Rich Media-freundlich zu gestalten.<\/p>\n<p><strong>Notiz:<\/strong> Sie sollten nur ein Plugin verwenden, das \u00fcber eine \u00e4hnliche Funktionalit\u00e4t verf\u00fcgt.  Wenn Sie WordPress SEO von Yoast bereits installiert haben, ist es besser, dieses Plugin zu konfigurieren, als auch Open Graph zu installieren FacebookGoogle+ und Twitter Karten-Tags-Addon.<\/p>\n<h2>Schritt 1 \u2013 Installieren Sie die neueste Version von Yoast SEO<\/h2>\n<p>Wir empfehlen Ihnen, die neueste Version von Yoast SEO zu installieren.  Der einfachste Weg, dies zu tun, ist \u00fcber das WordPress-Admin-Panel unter Plugins > Neu hinzuf\u00fcgen und nach \u201eYoast SEO\u201c zu suchen.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1632155287_983_Como-configurar-Open-Graph-y-Twitter-Tarjetas-para-WordPress.jpg\" alt=\"Installieren Sie das kostenlose Yoast SEO-Plugin\" width=\"1000\" height=\"428\"><\/p>\n<p>Dann installieren und aktivieren Sie das Plugin (klicken Sie einfach auf diese Schaltfl\u00e4che).<\/p>\n<p>Nach der Aktivierung sollte in Ihrem WordPress-Administrationsbereich eine neue Registerkarte \u201eSEO\u201c angezeigt werden.  Es gibt jede Menge coole Funktionen in Yoast SEO (f\u00fcr Breadcrumbs, Weiterleitungen usw.), aber was uns heute interessiert, ist die Registerkarte \u201eSoziale Netzwerke\u201c.<\/p>\n<h2>Schritt 2: Konfigurieren Sie Ihre sozialen Einstellungen<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/1584123970_42_Los-errores-mas-comunes-de-WordPress-SEO-en-el-sitio.jpg\" alt=\"Yoast SEO Social-Einstellungen\" width=\"1000\" height=\"634\"><\/p>\n<p>So konfigurieren Sie Open Graph und Twitter Karten navigieren im WordPress-Admin-Panel zu SEO > Soziales.  F\u00fcgen Sie hier zun\u00e4chst die Links zu Ihren sozialen Profilen hinzu, damit Suchmaschinen \u00fcberpr\u00fcfen k\u00f6nnen, ob sie tats\u00e4chlich mit Ihrer Website verbunden sind.  Fahren Sie dann mit den verschiedenen sozialen Registerkarten fort.<\/p>\n<h3>Facebook<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1632155288_766_Como-configurar-Open-Graph-y-Twitter-Tarjetas-para-WordPress.jpg\" alt=\"Yoast-SEO: Facebook Diagrammdaten \u00f6ffnen\" width=\"1000\" height=\"604\"><\/p>\n<p>Der erste Schritt besteht darin, Open Graph-Metadaten f\u00fcr zu aktivieren Facebook Beitr\u00e4ge \u2013 Klicken Sie einfach auf die Option \u201eAktiviert\u201c.  Vorausgesetzt, Sie haben den zugeh\u00f6rigen Inhalt Ihrer Website bereits hinzugef\u00fcgt Facebook Auf der Registerkarte \u201eKonten\u201c sind Sie bereit.  Sie k\u00f6nnen bei Bedarf ein Standardbild f\u00fcr jede Seite hinzuf\u00fcgen, die keine vorgestellten Medien enth\u00e4lt, aber das bleibt Ihnen \u00fcberlassen.<\/p>\n<h3>Twitter<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1632155288_142_Como-configurar-Open-Graph-y-Twitter-Tarjetas-para-WordPress.jpg\" alt=\"Yoast-SEO: Twitter Card Open Chart-Daten\" width=\"1000\" height=\"485\"><\/p>\n<p>Mit Facebook fertig, es ist Zeit, es anzusprechen Twitter.  Stellen Sie einfach sicher Twitter Wenn die Kartenmetadaten aktiviert sind, w\u00e4hlen Sie dann ein Standardkartenlayout aus (Zusammenfassung oder Zusammenfassung mit gro\u00dfem Bild).  Auch dies wird mit dem verbunden sein Twitter Handle, das Sie auf der Seite \u201eKonten\u201c hinzugef\u00fcgt haben.<\/p>\n<h3>Pinterest<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1632155288_605_Como-configurar-Open-Graph-y-Twitter-Tarjetas-para-WordPress.jpg\" alt=\"Yoast-SEO: Pinterest Diagrammdaten \u00f6ffnen\" width=\"1000\" height=\"484\"><\/p>\n<p>Pinterest    ist etwas anders, da diese Plattform eine Meta-Tag-Verifizierung verwendet.  gehen Sie zu Ihrem Pinterest Um ein Konto einzurichten, bewegen Sie den Mauszeiger \u00fcber das Benutzersymbol und klicken Sie dann auf die Registerkarte \u201eEinstellungen\u201c.  Klicken Sie auf die Option \u201eWebsite beanspruchen\u201c und w\u00e4hlen Sie die Option \u201eHTML-Tag hinzuf\u00fcgen\u201c.<\/p>\n<p>Kopieren Sie das generierte Meta-Tag und f\u00fcgen Sie es in Ihr Yoast SEO-Dashboard ein.  Speichern Sie Ihre \u00c4nderungen und kehren Sie dann zu zur\u00fcck Pinterest liefern.  Das sagt Pinterest um das Label zu \u00fcberpr\u00fcfen und Ihre Website zu verifizieren.  Das ist alles Pinterest!<\/p>\n<h3>Google+<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1632155288_985_Como-configurar-Open-Graph-y-Twitter-Tarjetas-para-WordPress.jpg\" alt=\"Yoast SEO \u2013 Google+ Open Graph Data\" width=\"1000\" height=\"484\"><\/p>\n<p>Das letzte soziale Konto, das Sie einrichten m\u00fcssen, ist Google+. Dabei handelt es sich lediglich um einen Link zur Google+-Seite Ihres Unternehmens.  F\u00fcgen Sie es ein und das war&#8217;s.<\/p>\n<h3>Legen Sie Standardwerte fest<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/1584123969_317_Los-errores-mas-comunes-de-WordPress-SEO-en-el-sitio.jpg\" alt=\"Yoast SEO \u2013 Standardinhaltstypen\" width=\"1000\" height=\"890\"><\/p>\n<p>Der letzte Schritt besteht darin, Ihre Standarddatei zu erstellen.  Yoast verwendet Meta-Boxen in seinen Inhalten, um Open Graph-Daten zu definieren. Stellen Sie daher sicher, dass Sie deren Standardeinstellungen unter SEO > Suchdarstellung > Inhaltstypen bearbeiten.  Verwenden Sie die integrierten Snippet-Variablen von Yoast SEO, um Ihre eigenen dynamischen Standardeinstellungen f\u00fcr den Titel Ihres Beitrags (verwendet f\u00fcr og:title) und die Meta-Beschreibung (verwendet f\u00fcr og:description) zu erstellen.<\/p>\n<h3>Benutzerdefiniertes Bild, Titel und Beschreibung<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1632155289_868_Como-configurar-Open-Graph-y-Twitter-Tarjetas-para-WordPress.jpg\" alt=\"Yoast SEO \u2013 Benutzerdefinierte Inhalte\" width=\"940\" height=\"600\"><\/p>\n<p>Yoast SEO bietet auch eine Option f\u00fcr einzelne Beitr\u00e4ge, um das verwendete Bild, den Titel und die Beschreibung anzupassen Facebook Und Twitter.  Wenn Sie einen Beitrag bearbeiten, scrollen Sie einfach nach unten zum Abschnitt \u201eYoast SEO\u201c und klicken Sie auf das Teilen-Symbol (es sieht kleiner aus als das Symbol).\n<\/p>\n<h2>Debugging und Validierung<\/h2>\n<p>Jede gro\u00dfe Social-Media-Site verf\u00fcgt \u00fcber einen eigenen Validator oder Debugger, mit dem Sie testen und in der Vorschau sehen k\u00f6nnen, wie Ihre Links aussehen, wenn sie in sozialen Medien geteilt werden.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/1588906927_943_Guia-definitiva-de-marcado-de-esquemas-de-WordPress.jpg\" alt=\"Google-Test f\u00fcr strukturierte Daten\" width=\"1000\" height=\"661\"><\/p>\n<p><strong>Testtool f\u00fcr strukturierte Daten von Google<\/strong>: Dieses Tool zeigt Ihnen nicht die Vorschau des auf Google+ geteilten Beitrags, sondern zeigt an, welche Metadaten vorhanden und f\u00fcr Google lesbar sind.  Seine Eigenschaften werden in den Eigenschaften des RDFA-Knotens angezeigt.<\/p>\n<p><strong>Facebook    Debuggen<\/strong>: F\u00fcgen Sie nach der Implementierung von Open Graph-Tags einfach die URL Ihrer Website ein, die die Tags enth\u00e4lt.  Es zeigt Ihnen die Eigenschaften des Objekts.<\/p>\n<p><strong>Twitter    Validierungstool<\/strong>: \u00dcber diesen Link k\u00f6nnen Sie eine Vorschau anzeigen Twitter Karte zum Posten, bevor sie in den sozialen Medien geteilt wird.<\/p>\n<p><strong>Pinterest    Rich-Pin-Validator<\/strong>: \u00c4hnlich wie bei den letzten beiden Validatoren geben Sie einfach die URL mit den Open Graph-Tags ein, um eine Vorschau anzuzeigen und sicherzustellen, dass Ihr Inhalt so angezeigt wird, wie er sollte.  Wenn Sie das gesamte Tutorial befolgt haben, werden Sie keine Probleme haben.<\/p>\n<h3>Schlussbemerkung<\/h3>\n<p>Durch die Verwendung dieser Open Graph-Meta-Tags k\u00f6nnen Sie die Darstellung von Titeln, Bildern, Beschreibungen und anderen Details Ihrer Inhalte in sozialen Medien optimieren.  Dies kann dazu beitragen, den Verkehr auf sozialen Websites zu erh\u00f6hen, da Links mit klaren Informationen tendenziell mehr Shares und nat\u00fcrliche Links erhalten.  Dar\u00fcber hinaus neigen Menschen dazu, Links zu vertrauen, die mehr Informationen enthalten, anstatt auf kurze oder nackte URLs zu klicken (es kann auch hilfreich sein, wenn Sie Techniken zur Automatisierung des Teilens in sozialen Netzwerken verwenden).<\/p>\n<p>Wir hoffen, dass unser Leitfaden Ihnen beim Einrichten der Open Graph-Meta-Tags Ihrer Website geholfen hat Twitter Karten, aber wenn Sie Fragen haben, k\u00f6nnen Sie diese gerne stellen.  Wir helfen gerne, wenn wir k\u00f6nnen!<\/p>\n<p>Welche WordPress-Plugins verwenden Sie, um diese Meta-Tags zu implementieren?  Haben Sie weitere Tipps oder Tricks, die Sie hinzuf\u00fcgen k\u00f6nnen?  F\u00fchlen Sie sich frei, Ihre Gedanken in den Kommentaren unten zu erw\u00e4hnen.<\/p>\n   ","protected":false},"excerpt":{"rendered":"<p>Gute Inhalte ziehen ein relevantes Publikum auf Ihre Website und es besteht eine gute Chance, dass einige dieser Personen Ihre Inhalte in sozialen Medien teilen m\u00f6chten. Manchmal treten jedoch Probleme auf, wenn geteilte Inhalte in einem sozialen Stream nicht korrekt angezeigt werden. Hier kann die Verwendung von Open Graph-Tags Abhilfe schaffen. Mit Open Graph k\u00f6nnen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":867210,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2023\/06\/5-1.jpg","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/867209"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=867209"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/867209\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/867210"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=867209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=867209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=867209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}