← Blog

Vad är Open Graph? En komplett nybörjarguide

Du delar en länk på sociala medier. Förhandsvisningen ser hemsk ut. Här är varför – och hur Open Graph-taggar fixar det.

Vill du se hur dina länkar faktiskt ser ut?

Kontrollera dina Open Graph-taggar gratis med Proovd — klistra in en URL och se förhandsvisningen på X, LinkedIn, Slack, Discord, WhatsApp och Reddit innan du delar.

Snabbt svar

  • Open Graph är en uppsättning HTML-metataggar som styr hur länkar ser ut på sociala medier
  • Kärntaggar: og:title, og:description, og:image, ⟧10⟧
  • Utan OG-taggar gissar plattformar - och de gissar dåligt
  • Ställ in OG-taggar + Twitter Card-taggar för full täckning

Vad Open Graph egentligen är

Open Graph är ett protokoll som uppfanns av Facebook 2010. Före Open Graph, när någon delade en länk på Facebook, var förhandsvisningen oförutsägbar. Facebook skulle skrapa sidan och leta efter bilder och text, och resultatet var ofta slumpmässigt - ibland en liten favoritikon, ibland ett slumpmässigt foto från sidan, ibland ingenting alls.

Facebook sa: "Låt oss ge webbansvariga ett standardsätt att berätta för oss vad de ska visa." De introducerade en uppsättning metataggar som vilken webbplats som helst kunde lägga till i sin HTML. Andra plattformar – X, LinkedIn, Slack, Discord, WhatsApp, Reddit – antog samma standard. Idag är Open Graph det universella språket för länkförhandsvisningar på internet.

Det är inte en teknik du installerar. Det är bara HTML-metataggar i din sidas -sektion. Det är allt.

The Core Open Graph-taggar

Varje sida som delas på sociala medier bör ha minst dessa fyra taggar:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling one-sentence summary." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />

Så här gör var och en:

Det finns ytterligare valfria taggar som og:type (vanligtvis "webbplats" eller "artikel"), og:site_name (ditt varumärke) och og:locale (språk). Men de fyra ovan är de som betyder mest för länkförhandsvisningar.

Hur Open Graph fungerar — steg för steg

Så här händer när någon delar en länk:

  1. Någon klistrar in en URL i X, LinkedIn, Slack, Discord eller var som helst.
  2. Plattformens bot hämtar URL:en och läser HTML uppifrån och ned.
  3. Det letar efter og: taggar i avsnittet .
  4. Det bygger ett förhandsgranskningskort med värdena og:title, og:description och og:image.
  5. Kortet visas för alla som ser den delade länken.

Om plattformen inte hittar og:-taggar, faller den tillbaka till sin egen heuristik — att välja slumpmässiga bilder, använda </code>-taggen, etc. Detta reservbeteende är anledningen till att så många delade länkar ser hemska ut.</p> <h2 data-i18n="b.what-is-open-graph.31">Open Graph mot Twitter Cards</h2> <p data-i18n="b.what-is-open-graph.32" data-i18n-html>Twitter skapade sitt eget taggsystem som heter "Twitter Cards" innan Open Graph fanns. Twitter Cards använd <code>twitter:card</code>, <code>twitter:title</code>, <code>twitter:description</code> och <code>twitter:image istället för <code>twitter:image <code>og:</code> prefix.</p> <p data-i18n="b.what-is-open-graph.33" data-i18n-html>Idag stöder de flesta plattformar båda. Men X/Twitter föredrar fortfarande <code>twitter:card</code>-taggar framför OG-taggar. Det är därför den bästa praxisen är att ställa in <strong>båda</strong>:</p> <pre><code><!-- Open Graph (works on LinkedIn, Discord, Slack, WhatsApp, Reddit) --> <meta property="og:title" content="Your Title" /> <meta property="og:image" content="https://yoursite.com/image.jpg" /> <!-- Twitter/X (works on X/Twitter) --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Your Title" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" /></code></pre> <h2 data-i18n="b.what-is-open-graph.34">Varför detta är viktigt för din webbplats</h2> <p data-i18n="b.what-is-open-graph.35">Om du delar ditt innehåll var som helst på sociala medier – vilket du förmodligen gör om du har en webbplats – är dina länkförhandsgranskningar ditt första intryck. En välarbetad förhandsvisning med en tydlig titel, övertygande beskrivning och en bra bild ökar klickfrekvensen dramatiskt.</p> <p data-i18n="b.what-is-open-graph.36">En trasig förhandsvisning – saknad bild, trunkerad titel eller förvrängd beskrivning – får ditt innehåll att se oprofessionellt ut. Folk scrollar förbi det.</p> <p data-i18n="b.what-is-open-graph.37">Open Graph-taggar är skillnaden mellan de två. De tar 5 minuter att installera och har en oproportionerlig inverkan på hur ditt innehåll presterar på sociala medier.</p> <h2 data-i18n="b.what-is-open-graph.38">Snabb checklista</h2> <div class="checklist"> <ol> <li data-i18n="b.what-is-open-graph.39" data-i18n-html>Lägg till <code>og:title</code>, <code>og:description</code>, <code>og:image</code> och <code>og:url</code> på varje sida</li> <li data-i18n="b.what-is-open-graph.40" data-i18n-html>Lägg till <code>twitter:card</code> och <code>twitter:image</code> för X/Twitter-kompatibilitet</li> <li data-i18n="b.what-is-open-graph.41">Ställ in bildstorleken till 1200×630 pixlar</li> <li data-i18n="b.what-is-open-graph.42">Använd absoluta webbadresser (https://...) för alla bildsökvägar</li> <li data-i18n="b.what-is-open-graph.43" data-i18n-html>Testa med <a href="https://proovd.in/sv/">Proovd</a> för att se hur din sida ser ut på alla plattformar</li> </ol> </div> <h2 data-i18n="b.what-is-open-graph.44">Vanliga frågor</h2> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.45">Behöver jag Open Graph-taggar om jag inte delar på sociala medier?</h3> <p data-i18n="b.what-is-open-graph.46">Om du inte delar länkar någonstans behöver du dem inte. Men om du har en webbplats och delar den ens en gång på sociala medier är OG-taggar viktiga.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.47">Påverkar Open Graph-taggar Googles ranking?</h3> <p data-i18n="b.what-is-open-graph.48">Inte direkt. Google använder inte OG-taggar som en rankningsfaktor. Men de kan påverka klickfrekvenser från sökresultat och sociala delningar, vilket indirekt påverkar trafik och synlighet.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.49">Kan jag ställa in olika OG-taggar för olika sidor?</h3> <p data-i18n="b.what-is-open-graph.50">Ja. Varje sida bör ha sina egna OG-taggar som matchar dess innehåll. Ett blogginlägg om hundar bör ha olika og:title och og:image än en sida om katter.</p> </div> <div class="internal-links"> <h3 data-i18n="b.what-is-open-graph.51">Relaterade artiklar</h3> <ul style="margin:0; padding-left: 1.25rem;"><li data-i18n="b.what-is-open-graph.52" data-i18n-html><a href="/sv/blog/discord-link-preview-not-working">Discord Förhandsgranskning av länken fungerar inte? 7 korrigeringar att prova (2026)</a></li> <li data-i18n="b.what-is-open-graph.53" data-i18n-html><a href="/sv/blog/how-to-add-open-graph-tags">Hur man lägger till Open Graph-taggar på vilken webbplats som helst</a></li> <li data-i18n="b.what-is-open-graph.54" data-i18n-html><a href="/sv/blog/open-graph-vs-twitter-card">Open Graph vs Twitter Card: Vad är skillnaden?</a></li> <li data-i18n="b.what-is-open-graph.55" data-i18n-html><a href="/sv/blog/og-image-size-guide">Open Graph Bildstorlek: The Complete 2026 Guide</a></li> </ul> </div> <div class="cta"> <p style="margin:0 0 0.5rem;" data-i18n="b.what-is-open-graph.56" data-i18n-html><strong>Kontrollera dina Open Graph-taggar på några sekunder</strong></p> <p style="margin:0;" data-i18n="b.what-is-open-graph.57" data-i18n-html>Kontrollera dina Open Graph-taggar gratis med <a href="https://proovd.in/sv/">Proovd</a> — klistra in en URL och se förhandsvisningen på X, LinkedIn, Slack, Discord, WhatsApp och Reddit.</p> </div> </article> </div> <script src="/i18n/apply.js" defer></script> </body> </html>