Skip to main content

En personlig och erfaren Wordpress och Joomla-byrå.       031-38 60 600     info@webbproffs.se

en dator mus
Open Graph och hur man använder det effektivt på sin hemsida

Open Graph och hur man använder det effektivt på sin hemsida

Varje gång någon delar en länk till din webbplats på Facebook, LinkedIn, Slack, WhatsApp eller Discord skapas ett förhandsgranskningskort – en liten visuell sammanfattning med bild, rubrik och beskrivning. Hur det kortet ser ut avgör ofta om folk klickar eller scrollar vidare. Open Graph är det protokoll som ger dig kontrollen över den presentationen, och det är ett av de enklaste och mest underskattade sätten att öka synligheten och klickfrekvensen för ditt innehåll.

Innehåll

Vad är Open Graph?

Open Graph (OG) är ett metadataprotokoll som skapades av Facebook 2010 för att standardisera hur webbsidor presenteras när de delas på sociala plattformar. Innan Open Graph fanns var plattformarna tvungna att gissa sig till vilken bild, titel och beskrivning som skulle visas – ofta med dåliga resultat.

Genom att lägga till ett antal <meta>-taggar i <head>-sektionen av din HTML talar du om exakt vilken rubrik, beskrivning, bild och URL som ska visas i förhandsgranskningskortet. Det handlar om några rader kod, men effekten på hur ditt innehåll uppfattas kan vara dramatisk.

Så här ser det ut i praktiken:

<meta property="og:title" content="Din sidtitel här" />
<meta property="og:description" content="En kort, övertygande beskrivning" />
<meta property="og:image" content="https://example.com/bild.jpg" />
<meta property="og:url" content="https://example.com/sidan" />
<meta property="og:type" content="article" />

Varför det spelar roll

Tänk på Open Graph som ditt innehålls "skyltfönster" i sociala medier. Utan optimerade OG-taggar får du en ful, generisk länkförhandsgranskning – ofta med fel bild eller ingen bild alls, en avkapad rubrik och en intetsägande beskrivning. Med genomtänkta OG-taggar får du ett professionellt, visuellt tilltalande kort som sticker ut i flödet.

Siffrorna talar för sig själva. Inlägg med bilder genererar avsevärt högre engagemang än de utan – studier visar på 100–150 % högre interaktion och upp till 114 % fler visningar. Ett väloptimerat förhandsgranskningskort kan öka klickfrekvensen (CTR) med 2–5 gånger jämfört med en ren URL utan förhandsgranskning.

Det handlar alltså inte bara om estetik, utan om direkt mätbar trafik till din webbplats.

Vilka plattformar använder Open Graph?

Open Graph skapades av Facebook, men har sedan länge blivit en de facto-standard som läses av i princip alla plattformar som visar länkförhandsgranskningar. Det inkluderar Facebook, Instagram (för artikellänkar), LinkedIn, Pinterest, Discord, Slack, WhatsApp, Telegram, iMessage och X (tidigare Twitter) – som i första hand använder sitt eget Twitter Cards-system men faller tillbaka på OG-taggar om Twitter-specifika taggar saknas.

Det betyder att samma uppsättning OG-taggar ger dig kontroll över hur dina länkar visas på i praktiken alla relevanta plattformar. Det är en investering som betalar sig på många ställen samtidigt.

De viktigaste OG-taggarna

Det finns ett antal OG-taggar att välja bland, men i praktiken är det fyra som är obligatoriska och ett par till som är starkt rekommenderade:

og:title – Rubriken som visas i förhandsgranskningskortet. Den bör vara kort och slagkraftig, helst under 60–75 tecken. Det behöver inte vara identiskt med sidans HTML-titel – du kan anpassa den för att fungera bättre i sociala medier.

og:description – En kort beskrivning av sidans innehåll. Håll den under 200 tecken för att undvika att den kapas. Skriv den som en pitch – den ska locka till klick.

og:image – Den bild som visas i förhandsgranskningskortet. Det här är den enskilt viktigaste taggen. Utan en bild ser din länk anonym och oprofessionell ut. Använd alltid en absolut URL (alltså https://example.com/bild.jpg, inte /bild.jpg) – annars kan plattformarna inte hitta bilden.

og:url – Sidans kanoniska URL. Den talar om för plattformen vilken URL som är den "riktiga", vilket förhindrar att delningar sprids på flera URL-varianter.

og:type – Typ av innehåll. Vanliga värden är website för startsidor och article för blogginlägg och artiklar.

Utöver dessa är det bra att inkludera og:locale (exempelvis sv_SE) för att ange språk, og:site_name för webbplatsens namn, samt og:image:width och og:image:height för att plattformarna ska kunna rendera bilden snabbare utan att behöva ladda ner den först.

Twitter Cards – X:s eget system

X (tidigare Twitter) har sitt eget metadatasystem som kallas Twitter Cards. Det fungerar i grunden likadant som Open Graph, men med egna taggar som börjar med twitter: istället för og:.

Den viktigaste skillnaden är att du måste ange twitter:card explicit – utan den visas din länk som ren text på X, oavsett om du har OG-taggar. De två vanligaste korttyperna är summary (liten fyrkantsbild) och summary_large_image (stor bild i full bredd, det du vill ha för de flesta artiklar och sidor).

I praktiken lägger du till ett par rader utöver dina OG-taggar:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Din sidtitel här" />
<meta name="twitter:description" content="En kort beskrivning" />
<meta name="twitter:image" content="https://example.com/bild.jpg" />

Om du inte anger specifika twitter:title, twitter:description och twitter:image faller X tillbaka på motsvarande OG-taggar. Men twitter:card behöver alltid finnas med.

Bildstorlekar och format

Bilden är det som fångar ögat i flödet, och det är värt att lägga tid på att få den rätt. Här är de rekommenderade specifikationerna:

PlattformRekommenderad storlekBildförhållande
Facebook 1200 × 630 px 1.91:1
LinkedIn 1200 × 627 px 1.91:1
X (Twitter) – stort kort 1200 × 675 px 16:9
Discord / Slack 1200 × 630 px 1.91:1
WhatsApp 1200 × 630 px 1.91:1

I praktiken fungerar 1200 × 630 pixlar bra som universell storlek – den täcker de flesta plattformarna. Använd JPEG för fotografier och PNG för bilder med text eller skarpa kanter. Håll filstorleken under 1 MB (LinkedIn har en gräns på 5 MB, men mindre filer ger snabbare rendering). Placera eventuell text i bildens mitt – vissa plattformar kan beskära kanterna.

Så implementerar du Open Graph

Manuellt. Om du har full kontroll över din HTML lägger du OG-taggarna direkt i <head>-sektionen. Det här är det mest direkta sättet och fungerar oavsett CMS eller ramverk.

Med plugin i ditt CMS. De flesta moderna CMS-plattformar har tillägg som hanterar OG-taggar automatiskt. För Joomla rekommenderar vi 4SEO av Weeblr – det skapar OG-taggar och Schema Markup för alla sidor automatiskt. YOOtheme Pro har också inbyggt stöd för OG-taggar i sina element. För WordPress är Yoast SEO och Rank Math de mest populära alternativen.

Unikt per sida. Det är viktigt att varje sida har sina egna, unika OG-taggar. Titel och beskrivning ska spegla just den specifika sidans innehåll, och bilden bör vara relevant för sidan – inte en generisk logotyp som används överallt. Om du publicerar en artikel om webbprestanda bör OG-bilden vara en illustration eller ett foto som relaterar till ämnet, inte företagets standardbanner.

Testa och felsök

Det räcker inte att implementera OG-taggar – du behöver också kontrollera att de fungerar korrekt. Plattformarna cachar förhandsgranskningar aggressivt, vilket innebär att ändringar i dina taggar inte alltid syns direkt.

Här är de verktyg du behöver:

OpenGraph.xyz – Ett utmärkt allround-verktyg som visar hur din länk ser ut på alla större plattformar i en enda vy. Bra som första steg.

Facebook Sharing Debugger – Facebooks officiella verktyg. Här kan du testa din URL och klicka "Scrape Again" för att tvinga Facebook att hämta uppdaterade taggar. Kräver Facebook-inloggning.

LinkedIn Post Inspector – LinkedIns motsvarighet. Observera att LinkedIn har en särskilt envis cache som kan ta upp till sju dagar att uppdateras.

OpenGraph.to – Ett nyare verktyg som ger ett OG-poäng och visar förhandsgranskningar för Google, Facebook, X, LinkedIn, Discord, WhatsApp, Slack och Telegram.

Gör det till en vana att testa OG-taggar på nya sidor innan du delar dem. Det tar trettio sekunder och kan vara skillnaden mellan en professionell och en amatörmässig presentation.

Vanliga misstag att undvika

Relativa bild-URL:er. Det vanligaste felet. Om du skriver /bilder/preview.jpg istället för https://example.com/bilder/preview.jpg kan plattformarna inte hitta bilden. Använd alltid fullständiga, absoluta URL:er med HTTPS.

Samma OG-data på alla sidor. Om varje sida på din webbplats har identisk OG-titel, beskrivning och bild tappar du hela poängen med protokollet. Varje sida ska ha unika taggar som speglar just det innehållet.

Att glömma twitter:card. Även om du har perfekta OG-taggar visas din länk som ren text på X om du inte anger twitter:card. Lägg alltid till den.

Cacheproblematik. Plattformarna cachar OG-data. Om du uppdaterar en bild eller titel men inte rensar cachen via respektive debugger-verktyg visas den gamla versionen. Det leder ofta till förvirring – "jag har ju ändrat, varför syns det inte?"

Bilder som är för små eller i fel format. Om bilden understiger minimistorleken (200 × 200 px för Facebook, 120 × 120 px för X) visas antingen ingen bild alls eller en förvrängd version. Håll dig till 1200 × 630 px som standard.

Open Graph och SEO

En vanlig fråga är om OG-taggar direkt påverkar sökmotorrankingen. Svaret är nej – Google använder inte OG-taggar som en rankingfaktor. Men det betyder inte att de saknar SEO-värde.

Open Graph påverkar SEO indirekt genom att öka synligheten och klickfrekvensen i sociala medier. Fler klick och delningar leder till mer trafik, fler potentiella bakåtlänkar och starkare varumärkeskännedom – allt saker som i förlängningen kan förbättra din position i sökresultaten. Dessutom hjälper välstrukturerad metadata sökmotorer att bättre förstå kontexten för ditt innehåll.

Det finns också en växande koppling mellan OG-taggar och AI-synlighet. AI-system som crawlar webben för att generera svar – exempelvis Google AI Overviews och ChatGPT:s webbsökning – har nytta av tydlig, strukturerad metadata för att förstå och citera ditt innehåll korrekt. Att ha väldefinierade OG-taggar, i kombination med Schema Markup, är en del av att göra ditt innehåll "AI-redo".

Sammanfattning

Open Graph är en liten teknisk insats med stor effekt. Genom att lägga till ett fåtal metataggar i din HTML kontrollerar du hur ditt innehåll presenteras på Facebook, LinkedIn, X, Slack, WhatsApp, Discord och en rad andra plattformar. Resultatet är professionella, visuellt tilltalande länkförhandsgranskningar som ökar klickfrekvensen och driver trafik till din webbplats.

De viktigaste stegen: definiera unik titel, beskrivning och bild för varje sida, använd 1200 × 630 pixlar som standardbildstorlek, glöm inte twitter:card för X, och testa alltid med ett debugger-verktyg innan du delar.

Vanliga frågor om Open Graph

Vilka plattformar stöder Open Graph?
I princip alla: Facebook, Instagram, LinkedIn, Pinterest, Discord, Slack, WhatsApp, Telegram, iMessage och fler. X (Twitter) har sitt eget system (Twitter Cards) men faller tillbaka på OG-taggar om egna taggar saknas.

Behöver jag ändra min webbplatskod?
Du behöver lägga till metataggar i <head>-sektionen. Med ett CMS-plugin som 4SEO (Joomla) eller Yoast (WordPress) sker detta automatiskt utan att du behöver redigera kod manuellt.

Vilken bildstorlek ska jag använda?
1200 × 630 pixlar (bildförhållande 1.91:1) fungerar som universell standard för de flesta plattformar. Använd JPEG för foton och PNG för bilder med text. Håll filstorleken under 1 MB.

Påverkar Open Graph min ranking i Google?
Inte direkt. Men OG-taggar ökar klickfrekvensen och delbarheten i sociala medier, vilket indirekt kan leda till mer trafik och bakåtlänkar – faktorer som påverkar SEO positivt.

Varför syns inte mina ändringar när jag delar en länk?
Plattformarna cachar OG-data aggressivt. Använd Facebooks Sharing Debugger, LinkedIns Post Inspector eller ett verktyg som OpenGraph.xyz för att tvinga plattformen att hämta uppdaterade taggar.

Måste jag ha olika taggar för varje sida?
Ja. Varje sida bör ha unika OG-taggar som speglar just den sidans innehåll. Generiska taggar som återanvänds på alla sidor minskar relevansen och effekten av förhandsgranskningen.

Hur kan vi på Webbproffs hjälpa er med Open Graph?

Vi ser till att er webbplats har korrekt konfigurerade Open Graph-taggar och Twitter Cards på alla sidor – antingen via plugin-lösningar som 4SEO och YOOtheme eller genom manuell implementation. Vi kan också hjälpa er att skapa anpassade OG-bilder som representerar ert varumärke på bästa sätt och verifiera att allt fungerar korrekt på samtliga plattformar. Hör av er så berättar vi mer!