"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "einführung", "hProperties": { "id": "einführung" } }, "depth": 2, "value": "Einführung" }, { "data": { "id": "noch-nie-von-website-metadaten-gehört", "hProperties": { "id": "noch-nie-von-website-metadaten-gehört" } }, "depth": 2, "value": "Noch nie von Website-Metadaten gehört?" }, { "data": { "id": "einrichten-der-open-graph-metadaten", "hProperties": { "id": "einrichten-der-open-graph-metadaten" } }, "depth": 2, "value": "Einrichten der Open Graph-Metadaten" }, { "data": { "id": "einrichten-der-twitter-karten-metadaten", "hProperties": { "id": "einrichten-der-twitter-karten-metadaten" } }, "depth": 2, "value": "Einrichten der Twitter-Karten-Metadaten" }, { "data": { "id": "schlussbemerkungen", "hProperties": { "id": "schlussbemerkungen" } }, "depth": 2, "value": "Schlussbemerkungen" }]; const readingTime = { "minutes": 3, "words": 825, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", img: "img", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "einführung", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#einführung", children: _jsx(_components.span, { children: "#" }) }), "Einführung"] }), "\n", _jsx(_components.p, { children: "Wenn du einen Link zu deiner Website in sozialen Medien teilst, möchtest du, dass er gut aussieht. Anstatt nur einen einfachen Link zu zeigen, möchtest du eine schöne Vorschau mit allen notwendigen Metadaten wie Titel, Beschreibung und Bild anzeigen. Hier kommen die Open Graph und Twitter (jetzt X) Karten-Metadaten ins Spiel." }), "\n", _jsxs(_components.p, { children: ["In diesem Artikel zeigen wir dir, wie du Open Graph (", _jsx(_components.a, { href: "https://ogp.me/", children: "ogp.me" }), ") und Twitter-Karten-Metadaten für deine Website einrichtest. Wir zeigen dir auch, wie du deine Metadaten testest, um sicherzustellen, dass sie in sozialen Medien gut aussehen."] }), "\n", _jsxs(_components.h2, { id: "noch-nie-von-website-metadaten-gehört", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#noch-nie-von-website-metadaten-gehört", children: _jsx(_components.span, { children: "#" }) }), "Noch nie von Website-Metadaten gehört?"] }), "\n", _jsx(_components.p, { children: "Wenn ein Mensch eine Website besucht, sieht er den vom Browser gerenderten Inhalt. Aber wenn ein Bot (wie ein Suchmaschinen-Crawler oder ein sozialer Medien-Scraper) eine Website besucht, sieht er nur das rohe HTML. Website-Metadaten treten nun in Kraft, um strukturierte Informationen über die Website an den Bot bereitzustellen, die er zur Darstellung einer strukturierten Ausgabe, wie einer Vorschaubildkarte, verwenden kann." }), "\n", _jsxs(_components.p, { children: ["Wenn du mit der rechten Maustaste auf eine Website klickst und \"Seitenquelltext anzeigen\" wählst, siehst du das rohe HTML der Website. Die Metadaten sind normalerweise im ", _jsx(_components.code, { children: "" }), "-Abschnitt des HTML enthalten und sehen etwa so aus:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsx(_components.p, { children: "Der obige Code ist selbsterklärend: Der Titel der Website ist \"Meine Website\" und die Beschreibung ist \"Das ist meine Website.\"." }), "\n", _jsxs(_components.p, { children: ["Du wirst das ", _jsx(_components.code, { children: "og:" }), "-Präfix in den Metadaten bemerken, das für ", _jsx(_components.a, { href: "https://ogp.me/", children: "Open Graph" }), " steht. Open Graph ist ein von Facebook entwickeltes Protokoll zur Bereitstellung strukturierter Informationen über eine Website. Twitter (jetzt X) hat auch sein eigenes Metadatenprotokoll, die Twitter-Karten."] }), "\n", _jsxs(_components.h2, { id: "einrichten-der-open-graph-metadaten", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#einrichten-der-open-graph-metadaten", children: _jsx(_components.span, { children: "#" }) }), "Einrichten der Open Graph-Metadaten"] }), "\n", _jsx(_components.p, { children: "Einige der häufigsten Open Graph-Metadata-Tags sind:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:site_name" }), ": Der Name der Website."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:title" }), ": Der Titel der aktuellen Seite."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:description" }), ": Eine kurze Beschreibung der Website."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:image" }), ": Die URL des anzuzeigenden Bildes."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:url" }), ": Die ", _jsx(_components.a, { href: "https://developers.google.com/search/docs/crawling-indexing/canonicalization", children: "kanonische URL" }), " der Website."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:type" }), ": Der Typ der Website (z.B. Website, Artikel, Video)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Der Unterschied zwischen ", _jsx(_components.code, { children: "og:title" }), " und ", _jsx(_components.code, { children: "og:site_name" }), " besteht darin, dass ", _jsx(_components.code, { children: "og:title" }), " der Titel der aktuellen Seite ist (z.B. der Blogpost-Titel), während ", _jsx(_components.code, { children: "og:site_name" }), " der Name der Website ist (z.B. der Blogname). Wenn du den Quellcode dieser Seite überprüfst, siehst du die folgenden Open Graph-Metadaten:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Da wir ", _jsx(_components.code, { children: "og:type" }), " auf ", _jsx(_components.code, { children: "article" }), " gesetzt haben, können zusätzliche Metadaten wie Autor und Veröffentlichungsdatum hinzugefügt werden. Zum Beispiel, wenn du die Tags für einen Blogpost hinzufügen möchtest, kannst du die folgenden Metadaten hinzufügen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Open Graph gibt an, dass du mehrere Werte hinzufügen solltest, indem du mehrere ", _jsx(_components.code, { children: "" }), "-Tags mit demselben Eigenschaftsnamen verwendest."] }), "\n", _jsxs(_components.p, { children: ["Nachdem du die Open Graph-Metadaten zu deiner Website hinzugefügt hast, kannst du sie mit dem ", _jsx(_components.a, { href: "https://developers.facebook.com/tools/debug/", children: "Facebook Sharing Debugger" }), " testen. Gib einfach die URL deiner Website ein und klicke auf \"Debuggen\". Wenn es Probleme mit den Metadaten gibt, zeigt der Debugger die Fehler an."] }), "\n", _jsxs(_components.p, { children: ["Hier ist ein Beispiel für unseren Blogpost ", _jsx(_components.a, { href: "/wann-sollte-ich-jwts-verwenden", children: "Wann sollte ich JWTs verwenden?" }), " im Facebook Sharing Debugger:"] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/Screenshot_2024_08_24_at_15_29_16_min_34070c92c1.png", alt: "Facebook Debugger" }) }), "\n", _jsxs(_components.h2, { id: "einrichten-der-twitter-karten-metadaten", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#einrichten-der-twitter-karten-metadaten", children: _jsx(_components.span, { children: "#" }) }), "Einrichten der Twitter-Karten-Metadaten"] }), "\n", _jsxs(_components.p, { children: ["Twitter-Karten ähneln den Open Graph-Metadaten, haben jedoch ", _jsx(_components.a, { href: "https://developer.x.com/en/docs/x-for-websites/cards/overview/", children: "ihre eigenen Konventionen" }), ". Es gibt vier Arten von Twitter-Karten:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Zusammenfassungskarte: Eine Karte mit Titel, Beschreibung und Thumbnail." }), "\n", _jsx(_components.li, { children: "Zusammenfassungskarte mit großem Bild: Eine Karte mit Titel, Beschreibung und großem Bild." }), "\n", _jsx(_components.li, { children: "App-Karte: Eine Karte zur Bewerbung mobiler Apps." }), "\n", _jsx(_components.li, { children: "Player-Karte: Eine Karte für Video- und Audioinhalte." }), "\n"] }), "\n", _jsx(_components.p, { children: "Für unseren Blogpost verwenden wir die Zusammenfassungskarte mit großem Bild. Die Twitter-Karten-Metadaten für den Blogpost sehen so aus:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsx(_components.p, { children: "Die beiden Hauptunterschiede zu den Open Graph-Metadaten sind:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Der ", _jsx(_components.code, { children: "twitter:card" }), "-Tag ist erforderlich und gibt den Kartentyp an."] }), "\n", _jsxs(_components.li, { children: ["Der ", _jsx(_components.code, { children: "twitter:site" }), "-Tag gibt den Twitter-Handle der Website an."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Es gab einen ", _jsx(_components.a, { href: "https://cards-dev.twitter.com/validator", children: "Twitter-Karten-Validator" }), ", allerdings wurde die Vorschaufunktion in den Tweet Composer verschoben (besser als nichts, aber)."] }), "\n", _jsxs(_components.h2, { id: "schlussbemerkungen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#schlussbemerkungen", children: _jsx(_components.span, { children: "#" }) }), "Schlussbemerkungen"] }), "\n", _jsx(_components.p, { children: "Das Einrichten von Open Graph- und Twitter-Karten-Metadaten für deine Website ist einfach, aber nützlich. Menschen lieben Bilder, und eine schöne Vorschaubildkarte kann mehr Aufmerksamkeit auf deine Website lenken. Viel Glück mit deiner Website und viel Spaß beim Teilen!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent };