"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduktion", "hProperties": { "id": "introduktion" } }, "depth": 2, "value": "Introduktion" }, { "data": { "id": "aldrig-hört-talas-om-webbplatsmetadata", "hProperties": { "id": "aldrig-hört-talas-om-webbplatsmetadata" } }, "depth": 2, "value": "Aldrig hört talas om webbplatsmetadata?" }, { "data": { "id": "ställa-in-open-graph-metadata", "hProperties": { "id": "ställa-in-open-graph-metadata" } }, "depth": 2, "value": "Ställa in Open Graph-metadata" }, { "data": { "id": "ställa-in-twitter-cards-metadata", "hProperties": { "id": "ställa-in-twitter-cards-metadata" } }, "depth": 2, "value": "Ställa in Twitter Cards-metadata" }, { "data": { "id": "avslutande-anteckningar", "hProperties": { "id": "avslutande-anteckningar" } }, "depth": 2, "value": "Avslutande anteckningar" }]; const readingTime = { "minutes": 3, "words": 823, "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: "introduktion", children: ["Introduktion", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduktion", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "När du delar en länk till din webbplats på sociala medier vill du att den ska se bra ut. Istället för att bara visa en enkel länk, vill du visa en vacker förhandsgranskning med all nödvändig metadata som titel, beskrivning och bild. Det är här Open Graph och Twitter (nu X) Cards metadata kommer in." }), "\n", _jsxs(_components.p, { children: ["I den här artikeln kommer vi att visa dig hur du ställer in Open Graph (", _jsx(_components.a, { href: "https://ogp.me/", children: "ogp.me" }), ") och Twitter Cards metadata för din webbplats. Vi kommer också att visa dig hur du testar din metadata för att säkerställa att den ser bra ut på sociala medier."] }), "\n", _jsxs(_components.h2, { id: "aldrig-hört-talas-om-webbplatsmetadata", children: ["Aldrig hört talas om webbplatsmetadata?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aldrig-hört-talas-om-webbplatsmetadata", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "När en människa besöker en webbplats ser de innehållet som visas av webbläsaren. Men när en bot (som en sökmotorcrawler eller en social media scraper) besöker en webbplats ser den bara den råa HTML-koden. Webbplatsmetadata träder nu in för att ge strukturerad information om webbplatsen till boten, som den kan använda för att rendera ett strukturerat utdata, som ett förhandsgranskningskort." }), "\n", _jsxs(_components.p, { children: ["Om du högerklickar på en webbplats och väljer \"Visa sidkälla\", kommer du att se webbplatsens råa HTML. Metadatan är vanligtvis inkluderad i ", _jsx(_components.code, { children: "" }), "-sektionen av HTML:en och ser ut ungefär så här:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsx(_components.p, { children: "Koden ovan är självförklarande: webbplatsens titel är \"Min webbplats\" och beskrivningen är \"Detta är min webbplats.\"." }), "\n", _jsxs(_components.p, { children: ["Du kanske märker ", _jsx(_components.code, { children: "og:" }), " prefixet i metadatan, vilket står för ", _jsx(_components.a, { href: "https://ogp.me/", children: "Open Graph" }), ". Open Graph är ett protokoll som utvecklats av Facebook för att tillhandahålla strukturerad information om en webbplats. Twitter (nu X) har också sitt eget metadataprotokoll, kallat Twitter Cards."] }), "\n", _jsxs(_components.h2, { id: "ställa-in-open-graph-metadata", children: ["Ställa in Open Graph-metadata", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ställa-in-open-graph-metadata", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Några av de vanligaste Open Graph-metadata-taggarna är:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:site_name" }), ": Namnet på webbplatsen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:title" }), ": Titeln på den aktuella sidan."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:description" }), ": En kort beskrivning av webbplatsen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:image" }), ": URL:en till bilden som ska visas."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:url" }), ": Den ", _jsx(_components.a, { href: "https://developers.google.com/search/docs/crawling-indexing/canonicalization", children: "kanoniska URL:en" }), " för webbplatsen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:type" }), ": Typen av webbplatsen (t.ex. webbplats, artikel, video)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Skillnaden mellan ", _jsx(_components.code, { children: "og:title" }), " och ", _jsx(_components.code, { children: "og:site_name" }), " är att ", _jsx(_components.code, { children: "og:title" }), " är titeln på den aktuella sidan (t.ex. blogginläggstiteln), medan ", _jsx(_components.code, { children: "og:site_name" }), " är namnet på webbplatsen (t.ex. bloggnamnet). Om du kollar sidans källkod kommer du se följande Open Graph-metadata:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Eftersom vi har ", _jsx(_components.code, { children: "og:type" }), " inställt på ", _jsx(_components.code, { children: "artikel" }), ", kan ytterligare metadata som författare och publiceringsdatum läggas till. Till exempel, om du vill lägga till taggar för ett blogginlägg, kan du lägga till följande metadata:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Open Graph specificerar att om du vill lägga till flera värden, bör du använda flera ", _jsx(_components.code, { children: "" }), "-taggar med samma egenskapsnamn."] }), "\n", _jsxs(_components.p, { children: ["Efter att ha lagt till Open Graph-metadata till din webbplats kan du testa den med hjälp av ", _jsx(_components.a, { href: "https://developers.facebook.com/tools/debug/", children: "Facebook Sharing Debugger" }), ". Skriv bara in din webbplats URL och klicka på \"Debug\". Om det finns några problem med metadatan, kommer debuggern att visa dig felen."] }), "\n", _jsxs(_components.p, { children: ["Här är ett exempel på vårt blogginlägg ", _jsx(_components.a, { href: "/when-should-i-use-jwts", children: "När ska jag använda JWTs?" }), " i 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: "ställa-in-twitter-cards-metadata", children: ["Ställa in Twitter Cards-metadata", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ställa-in-twitter-cards-metadata", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Twitter Cards liknar Open Graph-metadata, men de har ", _jsx(_components.a, { href: "https://developer.x.com/en/docs/x-for-websites/cards/overview/", children: "sina egna konventioner" }), ". Det finns fyra typer av Twitter Cards:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Summary Card: Ett kort med en titel, beskrivning och miniatyrbild." }), "\n", _jsx(_components.li, { children: "Summary Card with Large Image: Ett kort med en titel, beskrivning och stor bild." }), "\n", _jsx(_components.li, { children: "App Card: Ett kort för att främja mobilappar." }), "\n", _jsx(_components.li, { children: "Player Card: Ett kort för video- och ljudinnehåll." }), "\n"] }), "\n", _jsx(_components.p, { children: "För vårt blogginlägg kommer vi att använda Summary Card with Large Image. Twitter Cards-metadata för blogginlägget ser ut så här:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsx(_components.p, { children: "De två huvudsakliga skillnaderna från Open Graph-metadata är:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "twitter:card" }), "-taggen är obligatorisk och anger typen av kort."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "twitter:site" }), "-taggen anger webbplatsens Twitter-handle."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Det fanns en ", _jsx(_components.a, { href: "https://cards-dev.twitter.com/validator", children: "Twitter Card Validator" }), " tillgänglig, men förhandsgranskningsfunktionen har flyttats till Tweet Composer (bättre än inget, i alla fall)."] }), "\n", _jsxs(_components.h2, { id: "avslutande-anteckningar", children: ["Avslutande anteckningar", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#avslutande-anteckningar", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Att ställa in Open Graph och Twitter Cards-metadata för din webbplats är enkelt men användbart. Människor älskar bilder, och ett vackert förhandsgranskningskort kan få mer uppmärksamhet till din webbplats. Önskar dig lycka till med din webbplats och glad delning!" })] }); } 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 };