Open Graph och delningsbilder — så ser din sajt bra ut på sociala medier | Siteflow
Klistra in en länk till din hemsida i en LinkedIn-post. Vad händer? Om du har otur dyker det upp en grå platshållare, en titel som lyder "Hem — Startsida" och en beskrivning som börjar med "Meny Om oss Tjänster Kontakt". Det är så ungefär 90 procent av svenska småföretagssajter ser ut när de delas på sociala medier, och det är en av de billigaste sakerna att rätta till — om man bara vet vad man tittar efter.
Det här är en praktisk guide till Open Graph-protokollet: vilka meta-taggar som krävs, hur Facebook, LinkedIn, X, iMessage och WhatsApp tolkar dem olika, och vilka fel som gör att din delning ser pixlig eller tom ut.
Vad Open Graph är — och varför alla använder det
Open Graph är ett protokoll som Facebook lanserade 2010 för att hemsidor skulle kunna berätta för sociala medier hur länken ska se ut när någon delar den. Tanken var enkel: lägg några extra meta-taggar i <head> och bestäm själv vilken titel, beskrivning och bild som visas i flödet — istället för att Facebook ska gissa.
Det fungerade så bra att alla andra plattformar adopterade samma standard. LinkedIn, Pinterest, Slack, WhatsApp, iMessage, Discord och Microsoft Teams läser alla Open Graph-taggar. Det enda större undantaget är X (tidigare Twitter), som har en egen variant kallad Twitter Cards — men även där fungerar OG-taggarna som fallback.
Resultatet är att en handfull rader HTML i <head> styr hur din sajt presenteras varje gång någon klistrar in en länk någonstans på nätet. Det är en av de få platser där liten teknisk insats ger stor synlig effekt.
Meta-taggarna du faktiskt behöver
Det finns dussintals OG-taggar i specifikationen, men i praktiken är det fem som spelar roll. Resten är "nice to have".
og:title — rubriken som visas i förhandsvisningen. Max 65 tecken innan den klipps. Bör vara skarpare än din <title>-tag — sociala medier är ett mer aggressivt format än Google.
og:description — beskrivningen under titeln. 155–200 tecken är optimum. Glöms ofta bort, och då plockar plattformarna första 200 tecknen från sidans synliga text — vilket nästan alltid blir din meny.
og:image — bilden. Här ligger 80 procent av det visuella intrycket. 1200×630 pixlar är standardstorleken som fungerar överallt. Max 5 MB, format JPG eller PNG. Måste serveras över HTTPS, annars vägrar de flesta plattformar att ladda den.
og:url — den kanoniska URL:en till sidan. Hjälper plattformarna att slå ihop delningsstatistik och undvika duplikatproblem.
og:type — vilken typ av innehåll det är. website för startsidor, article för blogginlägg, product för produktsidor. Påverkar hur LinkedIn och Facebook kategoriserar länken.
Konkret ser det ut så här i HTML:
<meta property="og:title" content="Hemsida till fast pris — Siteflow" />
<meta property="og:description" content="Vi bygger din hemsida på 7 dagar..." />
<meta property="og:image" content="https://siteflow.se/og/start.png" />
<meta property="og:url" content="https://siteflow.se" />
<meta property="og:type" content="website" />Lägg det i <head> på varje sida. Och ja — varje sida. Inte bara startsidan.
Twitter Cards — den lilla men viktiga skillnaden
X läser OG-taggar, men för att få stor bild istället för en liten miniatyr i sidan måste du lägga till en extra rad:
<meta name="twitter:card" content="summary_large_image" />Utan den hamnar du med ett litet kvadratiskt thumbnail och text bredvid — vilket ser ut som en länk från 2014. Med den får du en bred bild i fullbredd över texten, vilket är formatet som faktiskt får klick.
Det finns även twitter:title, twitter:description och twitter:image, men de behövs bara om du vill ha annan text på X än på Facebook/LinkedIn. För 95 procent av sajter räcker det med summary_large_image plus dina vanliga OG-taggar.
Varför du måste testa på flera plattformar
Plattformarna tolkar samma taggar olika.
Facebook är striktast. Den vill ha exakt 1200×630 px och cachear bilden hårt — om du byter bild måste du rensa cachen manuellt via deras Sharing Debugger, annars visar Facebook den gamla bilden i veckor.
LinkedIn beskär annorlunda — bilden visas i 1.91:1-format men ibland croppas den till kvadrat i feeden. Text längst ner i bilden riskerar att försvinna.
X (Twitter) kräver minst 300×157 px för summary_large_image, men under 5 MB. Stora PNG-filer kan tyst falla tillbaka till liten thumbnail.
iMessage läser OG men kräver att bilden laddar inom några sekunder — annars visar den bara en grå box. Långsam CDN = trasig delning i iMessage.
WhatsApp är mest förlåtande och visar nästan alltid något, men kräver att bilden är max 600 KB för att inkluderas i förhandsvisningen.
Det är därför du måste testa hur länken ser ut, inte bara titta på taggarna i koden. Du kan ha helt korrekt HTML och ändå se trasig ut på Facebook för att deras cache är gammal.
De fem vanligaste felen
1. För liten bild. En bild på 600×315 ser bra ut i Photoshop men visas pixlig på en retina-skärm. Använd 1200×630 px minst. Helst med skarp grafik och stora textelement — det här är inte en plats för fingradiga typografi-detaljer.
2. Bilden ligger inte på HTTPS. Om din sajt är på HTTPS men OG-bilden serveras från http:// — Facebook och LinkedIn vägrar ladda den. Detta är vanligt på äldre WordPress-sajter där og:image-URL:en hardkodats innan certifikat installerades.
3. Tom description. Utan og:description plockar plattformarna första 200 tecknen från synlig sidtext. På de flesta sajter är det första man läser meny-länkar: "Hem Om oss Tjänster Kontakt Boka möte...". Det är så delning av en hemsida börjar med ordet "Hem".
4. Glömd uppdatering vid logotyp- eller profilbyte. Du byter företagslogga, uppdaterar sajten — men og:image pekar fortfarande på den gamla loggan eftersom den ligger som hardkodad sökväg i en mall. Tre månader senare delar någon en länk och din gamla logga dyker upp.
5. Cache. Facebook och LinkedIn cachear OG-data per URL i ungefär 7 dagar (Facebook) respektive 30 dagar (LinkedIn). Om du uppdaterar din bild idag och delar imorgon — du ser fortfarande den gamla. Du måste manuellt rensa cachen i Facebooks Sharing Debugger och LinkedIns Post Inspector innan delningen visar den nya versionen.
Hur du testar — på 30 sekunder
Innan du klistrar in en länk på LinkedIn för en kampanj du jobbat på i tre veckor: testa hur den ser ut.
Vi har byggt ett gratis verktyg som visar exakt hur din URL kommer att se ut på Facebook, LinkedIn, X och iMessage — sida vid sida. Den läser dina OG-taggar live, varnar för saknade fält och visar om bilden är rätt storlek.
Testa din sajt på Siteflow Social Preview. Det tar 30 sekunder och kräver inget konto.
För att rensa cache hos plattformarna själva finns två officiella verktyg: Facebook Sharing Debugger (sök på "facebook sharing debugger") och LinkedIn Post Inspector. Båda låter dig klistra in en URL och tvinga fram en ny scrape. Använd dem varje gång du uppdaterar OG-bild eller titel på en viktig sida.
Och om du vill se en sida med både snyggt OG och tydlig kontroll innan publicering — kör vårt verktyg först, fixa det som saknas, sen delar du.
Det här är inte något man bör göra manuellt per sida
Om du har 20 sidor på sajten — startsida, om oss, tjänstesidor, blogginlägg, kontaktsida — borde varje sida ha sin egen OG-bild, titel och beskrivning. Annars ser alla delningar likadana ut, oavsett vad du faktiskt länkar till.
Det är ett av problemen vi löste på Siteflow: varje sida vi bygger får en automatiskt genererad OG-bild som matchar sidans innehåll, med rätt typografi, färger och logotyp. Du behöver inte tänka på det — det bara funkar. Varje delning ser proffsig ut, oavsett om det är startsidan eller en specifik tjänstesida.
Om du vill se hur det ser ut i praktiken, titta på våra paket. Och om du redan har en sajt — börja med att testa hur den ser ut idag. Du kommer förmodligen att bli förvånad.
Relaterade artiklar
- Cookies och GDPR 2026 — vad cookies är, när du måste ha en banner och vad det kostar att göra fel.
- Social Preview-verktyg — testa hur din sajt ser ut på Facebook, LinkedIn, X och iMessage.
- Siteflow-paket — hemsidor med automatiska OG-bilder per sida.