Open Graph-bilder: dimensioner, tips och kodexempel
Open Graph-bilder styr vad som visas när någon delar din sida på Facebook, Twitter eller LinkedIn. Fel bild eller ingen bild alls minskar klickfrekvensen innan besökare ens når din sida.
Denna guide täcker optimala storlekar, designprinciper, HTML-implementering och testverktyg — allt du behöver för att få sociala förhandsvisningar rätt på alla plattformar.
Innehållsförteckning
Vad är Open Graph-bilder och varför de är viktiga
Open Graph är ett protokoll från Facebook som låter dig styra hur dina webbsidor visas när de delas i sociala nätverk. Meta-taggen og:image talar om för plattformarna vilken bild som ska användas som förhandsvisning.
När någon delar en länk på Facebook, Twitter eller LinkedIn hämtar plattformen Open Graph-metadata och skapar ett förhandsvisningskort. Kortet — med bild, titel och beskrivning — är ofta det enda man ser innan man klickar.
En välgjord Open Graph-bild kan avsevärt öka klickfrekvensen. En saknad eller felaktigt stor bild ger en trasig förhandsvisning, beskuren miniatyr eller en generisk platshållare som ser oprofessionell ut.
Klickfrekvens
Sidor med korrekt storlek och högkontrastbild för Open Graph presterar konsekvent bättre än de utan bild eller med lågkvalitativ ersättningsbild.
Fler klick från varje delning
Varumärkesigenkänning
En konsekvent visuell identitet i varje delad länk skapar igenkänning och förtroende hos din publik innan de kommer till sidan.
Konsekvent över nätverk
SEO-signal
Socialt engagemang som drivs av attraktiva förhandsvisningar genererar backlinks och trafiksignaler som stärker organiska sökrankningar över tid.
Indirekt rankingfördel
Plattformsanpassade bildkrav
Varje social plattform har egna rekommenderade dimensioner, bildförhållanden och filstorleksgränser. Rätt inställningar förhindrar beskärning, förvrängning och ersättningsbilder.
| Plattform | Rekommenderad storlek | Bildförhållande | Max filstorlek | Format |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
Universell säker storlek: 1200 × 630 pixlar
En bild på 1200 × 630 px med 1,91:1-förhållande fungerar på Facebook, LinkedIn, WhatsApp, Slack och de flesta andra plattformar. På Twitter visas bilden bra trots beskärning till 16:9 — håll viktig information centrerad för att undvika beskärning.
Designprinciper för effektiva Open Graph-bilder
Bilden visas i små storlekar i sociala flöden. Designa för miniatyren först, inte fullstorleken.
Håll det viktigaste visuella elementet — din logotyp, en stark rubrik eller en nyckelillustration — inom de centrala 80 % av bilden. Plattformar beskär ofta kanterna. Allt nära kanten riskerar att kapas på vissa skärmar.
Hög kontrast
Använd stark kontrast mellan text, förgrund och bakgrund. Bilder med låg kontrast försvinner i röriga sociala flöden bredvid färgstarka konkurrentinlägg.
Läsbar i alla storlekar
Tydlig typografi
Om din bild innehåller text, använd stora, fetstilta typsnitt — minst motsvarande 36 px — och undvik mer än två rader. Mindre text blir oläslig i miniatyrformat.
Håll det läsbart i litet format
Varumärkeskonsekvens
Inkludera din logotyp eller varumärkesfärg i varje Open Graph-bild. Varje delat inlägg är ett varumärkeselement även om personen aldrig klickar vidare.
Varje delning = varumärkeskontakt
Välja rätt bildformat
Använd JPEG för fotografiska Open Graph-bilder och PNG för grafik med text, logotyper eller transparens. WebP får ökad stöd men är ännu inte universellt bland sociala crawlers.
| Format | Bäst för | Socialt stöd | Typisk filstorlek | Rekommendation |
|---|---|---|---|---|
| JPEG | Fotografier, gradienter | Universell | 60 – 150 KB | Standard för foton |
| PNG | Text, logotyper, transparens | Universell | 100 – 300 KB | Standard för grafik |
| WebP | Båda, mindre filer | Twitter, Slack (inte alla) | 40 – 120 KB | Endast tillägg |
Sikta på 100–200 KB för din Open Graph-bild. Mindre är alltid bättre, men komprimera inte så mycket att bilden blir pixlig i sociala flöden. WhatsApp har en strikt gräns på 300 KB — om WhatsApp-delning är viktigt, håll alla OG-bilder under den gränsen.
För mer om bildformat och kompromisser generellt, se guiden för webbplatsoptimering av bilder . För konvertering av befintliga bilder, JPG till WebP-guide täcker den dagliga arbetsflödet.
HTML-implementering och meta-taggar
Placera Open Graph-meta-taggar i <head>-elementet i din HTML. Taggen og:image måste använda en absolut URL — relativa sökvägar stöds inte av sociala crawlers.
Minimikraven är taggarna og:title, og:description, og:image och og:url. Taggen twitter:card aktiverar Twitters stora bildkortformat.
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">Ange alltid og:image:width och og:image:height. Utan dessa måste plattformar hämta och inspektera bilden innan förhandsvisning, vilket fördröjer visningen och ökar risken för ersättningsbild.
Om du använder Blazor, Blazor SEO metadata-komponent hanterar alla Open Graph-taggar automatiskt med kulturmedvetna URL:er.
Testa och felsök Open Graph-bilder
Sociala plattformar cachar Open Graph-metadata aggressivt. Efter uppdatering av taggar eller bild, använd officiella felsökningsverktyg för att tvinga en ny genomsökning och kontrollera att förhandsvisningen ser korrekt ut innan delning.
Facebook Sharing Debugger
Ange din URL på developers.facebook.com/tools/debug för att hämta färsk metadata, se vilken bild Facebook valde och felsöka eventuella varningar eller fel.
Tvinga cacheuppdatering
Twitter Card Validator
Använd cards-dev.twitter.com/validator för att förhandsgranska exakt hur ditt Twitter-kort visas. Klicka på 'Preview card' för att se miniatyr, titel och beskrivning i kortformatet.
Förhandsgranska innan publicering
LinkedIn Post Inspector
LinkedIns postinspektör på linkedin.com/post-inspector uppdaterar LinkedIns cache för din URL och visar hur din förhandsvisning ser ut med aktuell metadata.
Uppdatera LinkedIn-cache
Vanliga misstag och hur du åtgärdar dem
De flesta problem med Open Graph-bilder beror på några vanliga misstag. Att veta vad du ska leta efter sparar tid vid felsökning.
- Relativa URL:er. Sociala crawlers kan inte hantera relativa sökvägar. Värdet för og:image måste vara en fullständig absolut URL inklusive protokoll och domän (https://dindomän.se/sökväg/bild.jpg).
- Saknade bredd- och höjdtaggar. Utan og:image:width och og:image:height måste plattformar ladda ner och inspektera bilden innan förhandsvisning skapas. Lägg till båda för att undvika detta extra steg.
- Bilder bakom autentisering. Crawlers kan inte nå bilder som kräver inloggning eller blockeras av robots.txt. OG-bilden måste vara offentligt tillgänglig utan autentiseringskrav.
- Fel bildförhållande. En bild som avviker mycket från 1,91:1 beskärs eller visas med störande svarta kanter. Testa alltid i rätt förhållande innan publicering.
- Föråldrad plattforms-cache. Att uppdatera bildfilen utan att ändra filnamn eller lägga till en frågesträng gör att plattformar visar den gamla cachade versionen. Uppdatera filnamnet eller använd plattformsdebuggern för att tvinga en uppdatering.
Automatisering av Open Graph-bildgenerering
För små webbplatser och bloggar är en statisk OG-bild per sida det enklaste och mest pålitliga. För större publikationer eller appar där varje sida behöver en unik social förhandsvisning blir dynamisk generering praktiskt.
Dynamisk OG-bildgenerering skapar en unik bild vid förfrågan eller vid byggtid baserat på sidans titel, beskrivning eller annat innehåll. Resultatet är en unik, varumärkesanpassad förhandsvisning för varje sida utan manuell bildskapning.
När automatisera
Automatisera när du har många sidor som behöver unika bilder, när innehållet ändras ofta eller när manuell bildskapning inte räcker till för din publiceringsvolym.
Stort eller dynamiskt innehåll
När använda statiska bilder
För de flesta sidor — landningssidor, guider och tidlösa artiklar — ger en noggrant utformad statisk bild bättre kvalitet och varumärkeskonsekvens än en genererad.
Kvalitetsfokuserad strategi
Populära verktyg för dynamisk generering inkluderar Cloudinary (transformering via URL-parametrar), Vercel OG (renderar React/HTML till bild i kanten) och Puppeteer eller Playwright-baserade skärmdumpspipelines för alla tekniker.