Open Graph-taggar: Den kompletta guiden till SEO i sociala medier

När någon delar en länk på Facebook, LinkedIn, Twitter, Slack, Discord eller iMessage renderar plattformen ett förhandsvisningskort. Det kortet visar vanligtvis en titel, en beskrivning och en bild. Huruvida dessa element är övertygande och korrekta, eller saknas och är trasiga, beror helt på Open Graph-taggarna i din HTML.

Open Graph är ett protokoll skapat av Facebook 2010 för att ge webbsidor strukturerad metadata som sociala plattformar kan konsumera. Idén var enkel: låt sidförfattare styra hur deras innehåll visas i sociala flöden istället för att lämna det till varje plattforms egna skrapningsheuristik. Protokollet lyckades så väl att det nu är den de facto-standard för länkförhandsvisningar på praktiskt taget varje stor plattform och meddelandeapp.

Att få Open Graph rätt är inte valfritt för sidor du förväntar dig ska delas. Sidor utan korrekta OG-taggar genererar intetsägande, textbaserade förhandsvisningar som scrollas förbi. Sidor med trasiga OG-bilder ser oprofessionella ut. Och sidor med välgjorda OG-metadata får konsekvent fler klick, mer engagemang och mer trafik från sociala kanaler.

De grundläggande Open Graph-taggarna

Varje sida bör innehålla dessa grundläggande OG-taggar som minimum. De placeras i <head>-sektionen av din HTML.

<head>
  <meta property="og:title" content="Open Graph-taggar: Den kompletta guiden" />
  <meta property="og:description" content="Lär dig hur du styr hur dina sidor visas vid delning i sociala medier." />
  <meta property="og:image" content="https://example.com/images/og-guide.jpg" />
  <meta property="og:url" content="https://example.com/blog/open-graph-guide" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Exempelbloggen" />
  <meta property="og:locale" content="sv_SE" />
</head>

og:title

Titeln som visas i delningskortet. Den behöver inte matcha din <title>-tagg. Faktum är att den ofta inte bör det. Din HTML-titel kan innehålla ett varumärkessuffix eller vara optimerad för sökresultat, medan din OG-titel bör vara optimerad för sociala flöden där du tävlar om uppmärksamhet i scrollningen.

Håll OG-titlar under 60 tecken. Facebook trunkerar runt 65-70 tecken, och LinkedIn är ännu mer aggressiv.

og:description

En kort sammanfattning som visas under titeln i delningskortet. Inte alla plattformar visar den -- Twitters sammanfattningskort visar den, men kort med stor bild gör det kanske inte. Håll den under 155 tecken och se till att den tillför kontext som titeln ensam inte ger.

og:image

Den viktigaste OG-taggen ur ett klickperspektiv. Studier har konsekvent visat att inlägg med bilder får betydligt mer engagemang än rena textdelningar -- sociala plattformar är visuella till sin natur, och OG-bilder säkerställer att ditt innehåll drar nytta av detta.

Bildens URL måste vara absolut (inte relativ) och måste använda HTTPS på sidor som serveras över HTTPS. En relativ sökväg som /images/og.jpg fungerar inte. Använd den fullständiga URL:en: https://example.com/images/og.jpg.

og:url

Den kanoniska URL:en för innehållet. Den talar om för plattformar vilken URL som ska associeras med det delade innehållet, vilket är viktigt för att aggregera delningsantal och undvika dubbletter. Om du har samma innehåll tillgängligt på flera URL:er bör alla peka mot en enda kanonisk og:url.

og:type

Definierar typen av innehåll. De vanligaste värdena är website (för startsidor och generella sidor) och article (för blogginlägg, nyhetsartiklar och liknande innehåll). Typen du väljer avgör vilka ytterligare egenskaper som är tillgängliga.

og:site_name

Namnet på din övergripande webbplats, visat separat från titeln. Facebook visar detta ovanför titeln i mindre text.

og:locale

Språket och territoriet för innehållet i formatet språk_TERRITORIUM, som en_US, sv_SE eller fr_FR. Standardvärdet är en_US om det utelämnas. Om ditt innehåll finns på flera språk kan du också lägga till og:locale:alternate-taggar för varje ytterligare språk.

Bildspecifikationer

Att få din OG-bild rätt är värt extra uppmärksamhet eftersom en trasig eller klumpigt beskuren bild ofta är sämre än ingen bild alls.

Rekommenderade dimensioner: 1200 x 630 pixlar. Det ger dig ett bildförhållande på 1,91:1, som är standarden på Facebook, LinkedIn och Twitters kort med stor bild.

Minsta dimensioner: Facebook kräver minst 200 x 200 pixlar, men bilder under 600 x 315 renderas som små miniatyrbilder istället för stora förhandsvisningskort. Sikta alltid på 1200 x 630.

Filstorlek: Håll bilder under 8 MB. Facebooks dokumentation anger att deras crawler tar timeout på bilder som tar för lång tid att hämta, och stora filstorlekar saktar ner det. I praktiken är under 1 MB ett bra mål.

Format: JPG, PNG och WebP stöds alla. JPG är det mest pålitliga formatet på alla plattformar. PNG fungerar bra för grafik med text. WebP stöds av Facebook och Twitter men kanske inte renderas korrekt på äldre klienter.

HTTPS: Om din sida serveras över HTTPS (vilket den bör), måste bildens URL också vara HTTPS. Blandat innehåll gör att bilden inte laddas på många plattformar.

<meta property="og:image" content="https://example.com/images/og-guide.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="En visuell guide till Open Graph-taggar" />

Att inkludera og:image:width och og:image:height är en liten detalj som hjälper plattformar att rendera förhandsvisningen korrekt vid den första delningen, innan de har laddat ner och mätt bilden.

Artikelspecifika taggar

När du sätter og:type till article blir flera ytterligare egenskaper tillgängliga. Dessa är särskilt användbara för nyhetssajter, bloggar och innehållstunga webbplatser.

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-03-28T09:00:00Z" />
<meta property="article:modified_time" content="2026-03-28T14:30:00Z" />
<meta property="article:author" content="https://example.com/authors/jane-doe" />
<meta property="article:section" content="Tutorials" />
<meta property="article:tag" content="SEO" />
<meta property="article:tag" content="Sociala medier" />

article:published_time och article:modified_time använder ISO 8601-format. Dessa datum kan visas på delningskortet och används av plattformar för att bedöma innehållets aktualitet. article:section representerar den övergripande kategorin, medan article:tag kan upprepas för flera taggar.

Andra og:type-värden inkluderar product (användbart för e-handel), profile (för författar- eller användarsidor), samt book, music.song, video.movie med flera. Typen website är det säkra standardvalet för alla sidor som inte passar en mer specifik kategori.

Twitter Cards

Twitter har sitt eget kortsystem som fungerar parallellt med Open Graph. Twitters crawler letar först efter twitter:-metataggar och faller sedan tillbaka till motsvarande og:-taggar. Det innebär att du ofta kan förlita dig enbart på dina OG-taggar, men att lägga till Twitter-specifika taggar ger dig mer kontroll över hur ditt innehåll visas specifikt på Twitter.

Korttyper

summary -- Ett litet kort med en kvadratisk miniatyrbild, titel och beskrivning. Bra för artiklar och generellt innehåll.

summary_large_image -- Ett stort kort där bilden spänner över hela bredden ovanför titel och beskrivning. Det här är det vanligaste valet för blogginlägg och landningssidor eftersom den stora bilden fångar mycket mer uppmärksamhet i tidslinjen.

player -- För inbäddat video- eller ljudinnehåll. Kräver ytterligare taggar för spelarens URL, dimensioner och ström-URL.

app -- För att marknadsföra mobilapplikationer, med direktlänkar till appbutiker.

<!-- Twitter Card-taggar -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@dittvarumarke" />
<meta name="twitter:creator" content="@forfattarhandle" />
<meta name="twitter:title" content="Open Graph-taggar: Den kompletta guiden" />
<meta name="twitter:description" content="Lär dig hur du styr förhandsvisningar vid social delning." />
<meta name="twitter:image" content="https://example.com/images/og-guide.jpg" />
<meta name="twitter:image:alt" content="En visuell guide till Open Graph-taggar" />

Observera att Twitter-metataggar använder name istället för property. Taggen twitter:site bör vara Twitter-handtaget för webbplatsen eller varumärket, medan twitter:creator är handtaget för den enskilda författaren. Båda är valfria men rekommenderas.

Twitters fallback-beteende

Om ingen twitter:title finns använder Twitter og:title. Om ingen og:title finns använder Twitter <title>. Samma kaskad gäller för beskrivning och bild. Det innebär att en minimal implementation kan hoppa över twitter:-taggarna helt och förlita sig på OG-taggar. Dock är det viktigt att explicit sätta twitter:card eftersom Twitter utan den väljer ett grundläggande summary-kort oavsett din bildstorlek.

Plattformsspecifikt beteende

Olika plattformar tolkar och renderar OG-taggar med märkbara skillnader.

Facebook renderar hela triaden: bild, titel och beskrivning. Bilder visas med bildförhållandet 1,91:1. Titeltrunkering sker runt 65-70 tecken. Facebook cachar skrapad data aggressivt, ibland i veckor.

LinkedIn visar också bild, titel och beskrivning, men LinkedIns crawler är långsammare och mer känslig för sidladdningstider. LinkedIn trunkerar titlar runt 50-60 tecken. Bildrendering liknar Facebooks.

Twitter/X beteende beror på korttyp. Med summary_large_image visas bilden ovanför titeln och beskrivningen. Med summary är bilden en liten fyrkant till vänster. Twitter tar bort beskrivningen från summary_large_image-kort i vissa vyer, vilket gör bilden och titeln till de enda synliga elementen.

Slack renderar en rik förhandsvisning som vanligtvis inkluderar webbplatsnamnet (från og:site_name), titeln, beskrivningen och bilden. Slack är generellt trogen OG-taggarna och renderar dem väl, men det cachar aggressivt.

Discord renderar förhandsvisningar liknande Slack. Det respekterar og:site_name, titel, beskrivning och bild. Discord använder en färgad sidopanel baserad på tema-färg-metataggen om en sådan finns.

iMessage/Meddelanden visar en länkförhandsvisning med bilden och titeln. Det är en av de mer minimalistiska rendererarna och visar inte alltid beskrivningen.

Felsökning av OG-taggar

Du kan inte förlita dig på att bara dela en länk och hoppas att förhandsvisningen ser bra ut. Varje stor plattform tillhandahåller felsökningsverktyg.

Facebook Sharing Debugger låter dig ange en URL och se exakt vad Facebooks crawler ser. Den visar alla upptäckta OG-taggar, eventuella varningar eller fel, och en förhandsvisning av hur delningskortet kommer att se ut. Viktigast av allt låter den dig tvinga Facebook att skrapa om sidan.

Twitter/X-korttestning

Twitter/X har tagit bort sin fristående Card Validator. För att testa Twitter Cards, posta URL:en i en tweet (eller använd tweetkompositorns förhandsvisning) eller använd tredjepartsverktyg som opengraph.xyz som kan förhandsvisa hur din sida renderas på flera plattformar inklusive Twitter/X.

LinkedIn Post Inspector

LinkedIn Post Inspector fungerar på liknande sätt. Ange en URL, se förhandsvisningen och tvinga en omskrapning.

Manuell inspektion med curl

Plattformar skickar specifika user agents vid skrapning. Du kan simulera detta för att se vad de ser:

# Simulera Facebooks crawler
curl -A "facebookexternalhit/1.1" -L https://example.com/page

# Simulera Twitters crawler
curl -A "Twitterbot/1.0" -L https://example.com/page

# Simulera LinkedIns crawler
curl -A "LinkedInBot/1.0" -L https://example.com/page

Detta är användbart för att upptäcka problem där din sida returnerar olika innehåll till bottar jämfört med webbläsare, eller när JavaScript på klientsidan renderar OG-taggar som crawlern inte kan se.

Cache-invalidering

En av de mest frustrerande aspekterna av Open Graph är plattformscaching. När du uppdaterar dina OG-taggar kvarstår ofta den gamla förhandsvisningen i sociala flöden eftersom plattformar cachar den skrapade datan.

Facebook cachar aggressivt. Använd Sharing Debugger och klicka "Scrape Again" för att tvinga en uppdatering. För programmatisk cacherensning erbjuder Facebook en API-endpoint: POST https://graph.facebook.com/?id={url}&scrape=true.

Twitter cachar kort i cirka sju dagar. Eftersom den fristående Card Validator har tagits bort kan du tvinga en omskrapning genom att posta URL:en i en tweet eller använda tredjepartsverktyg. Det finns inget publikt API för programmatisk cachebusting.

LinkedIn cachar också i cirka sju dagar. Post Inspector tvingar en omskrapning när du inspekterar en URL.

Slack cachar länkförhandsvisningar per arbetsyta. Det finns inget officiellt sätt att rensa cachen annat än att vänta eller låta en arbetsyteadmin rensa den.

Om du regelbundet uppdaterar OG-taggar och behöver ändringar att spridas snabbt, överväg att lägga till cache-busting-frågeparametrar till din og:image-URL (t.ex. ?v=2) när du uppdaterar bilden. Det tvingar plattformar att behandla den som en ny resurs.

Vanliga misstag

Saknad og:image. Det här är det enskilt mest påverkande misstaget. En delning utan bild är lätt att scrolla förbi. Tillhandahåll alltid en bild, även om det är en generisk varumärkesbaserad reservbild.

Fel bilddimensioner. Att använda en kvadratisk bild för en 1,91:1-plats resulterar i klumpig beskärning eller letterboxing. Att använda en mycket hög bild innebär att det viktigaste innehållet beskärs från sidorna. Testa alltid med 1200 x 630.

Relativa URL:er. Både og:image och og:url kräver absoluta URL:er inklusive protokoll och domän. /images/og.jpg fungerar inte. Använd https://example.com/images/og.jpg.

HTTP-bilder på HTTPS-sidor. Blandat innehåll gör att bilder inte laddas på de flesta plattformar. Se till att dina bild-URL:er använder HTTPS.

Duplicerade taggar. Att ha flera og:title eller og:description-taggar förvirrar crawlers. De flesta använder den första förekomsten och ignorerar resten, men beteendet är inte garanterat. Se till att varje tagg förekommer exakt en gång per sida.

Använda sidinnehåll som reserv. När OG-taggar saknas faller plattformar tillbaka till att skrapa sidtiteln och första stycket av synlig text. Denna reservlösning är sällan korrekt eller övertygande. Förlita dig inte på den.

Taggar renderade på klientsidan. Facebooks, Twitters och LinkedIns crawlers har begränsad JavaScript-exekveringskapacitet. Om dina OG-taggar renderas av JavaScript på klientsidan istället för att finnas i det initiala HTML-svaret, kommer de flesta crawlers inte att se dem. Rendera alltid dina metataggar på serversidan.

Dynamiska OG-bilder

För webbplatser med hundratals eller tusentals sidor är det opraktiskt att skapa en unik OG-bild per sida för hand. Dynamisk OG-bildgenerering löser detta genom att skapa bilder programmatiskt baserat på siddata.

Tillvägagångssätt

Serversidig bildgenerering -- De flesta moderna ramverk erbjuder inbyggd eller biblioteksstödd OG-bildgenerering. Du definierar en mall som accepterar siddata (titel, kategori, varumärkesfärger) som parametrar och renderar en 1200x630 PNG på servern. Detta är det mest flexibla tillvägagångssättet och producerar unika bilder för varje sida utan manuellt designarbete.

CDN-baserad bildtransformation -- Tjänster som Cloudinary och Imgix erbjuder URL-baserade transformations-API:er som lägger text ovanpå en basmallsbild. OG-bildens URL innehåller själv texten som en parameter, så ingen serversidesrendering behövs. Detta är enklare att konfigurera men mindre flexibelt i designen.

Headless browser-rendering -- För maximal designkontroll renderar en headless browser-tjänst (Puppeteer, Playwright) en HTML-mall till en skärmdump. Det ger fullt CSS-stöd men lägger till infrastrukturkomplexitet.

När dynamiska OG-bilder är värda besväret

Dynamiska OG-bilder är värda ansträngningen när du har ett stort antal sidor som ofta delas och där den generiska standardbilden inte korrekt representerar det specifika innehållet. E-handelsproduktsidor, blogginlägg och profilsidor är starka kandidater. Interna verktyg och sällan delade sidor är det inte.

Hantera OG-taggar i stor skala

På en webbplats med tusentals sidor behöver du ett systematiskt tillvägagångssätt för OG-taggar istället för att ställa in dem individuellt.

Mallbaserade OG-taggar

Definiera OG-taggmallar per innehållstyp. För en blogg kan du ha:

og:title    = "{inlaggs_titel}"
og:description = "{inlaggs_utdrag}"
og:image    = "https://example.com/api/og?title={inlaggs_titel}&category={kategori}"
og:type     = "article"

För produktsidor:

og:title    = "{produktnamn} - {pris}"
og:description = "{kort_beskrivning} | Fri frakt vid beställningar över 500 kr"
og:image    = "{produkt_bild_url}"
og:type     = "product"

Detta mallbaserade tillvägagångssätt säkerställer att varje sida har korrekta OG-taggar utan att kräva manuell inmatning. När du vill uppdatera formatet för alla produkt-OG-titlar ändrar du mallen en gång.

Testning i stor skala

Efter att ha implementerat mallbaserade OG-taggar, validera dem programmatiskt. Crawla din webbplats och kontrollera att varje sida har de obligatoriska OG-taggarna, att alla bild-URL:er är nåbara och returnerar rätt content type, att inga titlar överskrider de rekommenderade teckengränserna och att inga duplicerade taggar finns.

Verktyg som Screaming Frog, Sitebulb eller en egen crawler kan extrahera och granska OG-taggar över hela din webbplats. Dynamic SEO:s URL-first-tillvägagångssätt låter dig hantera och granska metadata-mallar i stor skala och fånga problem innan de påverkar dina delningsförhandsvisningar i sociala medier.

Slutsats

Open Graph-taggar är en liten mängd HTML som har en oproportionerligt stor effekt på hur ditt innehåll presterar i sociala kanaler. Grundimplementationen är okomplicerad: lägg till de grundläggande taggarna på varje sida, använd rätt bilddimensioner och testa med plattformarnas felsökningsverktyg.

Sätt og:title och og:description oberoende av din SEO-titel och meta description — delning i sociala medier och sökresultat tjänar olika syften. Använd 1200x630-bilder, testa med Facebooks Sharing Debugger innan kampanjer lanseras, och malla dina OG-taggar i skala istället för att redigera per sida.