← Blog

Hva er Open Graph? En komplett nybegynnerveiledning

Du deler en lenke på sosiale medier. Forhåndsvisningen ser forferdelig ut. Her er hvorfor – og hvordan Open Graph-tagger fikser det.

Vil du se hvordan koblingene dine faktisk ser ut?

Sjekk Open Graph-taggene dine gratis med Proovd — lim inn en URL og se forhåndsvisningen på X, LinkedIn, Slack, Discord, WhatsApp og Reddit før du deler.

Rask svar

  • Open Graph er et sett med HTML-metakoder som kontrollerer hvordan lenker ser ut på sosiale medier
  • Kjernetagger: og:title, og:description, og:image, ⟧10⟧
  • Uten OG-tagger gjetter plattformer - og de gjetter dårlig
  • Sett OG-tagger + Twitter Card-tagger for full dekning

Hva Open Graph egentlig er

Open Graph er en protokoll oppfunnet av Facebook i 2010. Før Open Graph, da noen delte en lenke på Facebook, var forhåndsvisningen uforutsigbar. Facebook ville skrape siden på jakt etter bilder og tekst, og resultatet var ofte tilfeldig - noen ganger et lite favorittikon, noen ganger et tilfeldig bilde fra siden, noen ganger ingenting i det hele tatt.

Facebook sa: "La oss gi webansvarlige en standard måte å fortelle oss hva de skal vise." De introduserte et sett med metakoder som ethvert nettsted kunne legge til HTML-en deres. Andre plattformer – X, LinkedIn, Slack, Discord, WhatsApp, Reddit – tok i bruk samme standard. I dag er Open Graph det universelle språket for forhåndsvisning av koblinger på internett.

Det er ikke en teknologi du installerer. Det er bare HTML-metakoder i sidens -seksjon. Det er det.

The Core Open Graph-taggene

Hver side som deles på sosiale medier bør ha minst disse fire taggene:

<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" />

Her er hva hver enkelt gjør:

Det er flere valgfrie tagger som og:type (vanligvis "nettsted" eller "artikkel"), og:site_name (merkenavnet ditt) og og:locale (språk). Men de fire ovenfor er de som betyr mest for forhåndsvisninger av koblinger.

Hvordan Open Graph fungerer — trinn for trinn

Her er hva som skjer når noen deler en lenke:

  1. Noen limer inn en URL i X, LinkedIn, Slack, Discord eller hvor som helst.
  2. Plattformens bot henter URL-en og leser HTML-en fra topp til bunn.
  3. Det ser etter og: tags i -delen.
  4. Den bygger et forhåndsvisningskort ved å bruke verdiene og:title, og:description og og:image.
  5. Kortet vises til alle som ser den delte lenken.

Hvis plattformen ikke finner og:-tagger, faller den tilbake til sin egen heuristikk – å plukke tilfeldige bilder, bruke </code>-taggen, osv. Denne reserveadferden er grunnen til at så mange delte lenker ser forferdelig ut.</p> <h2 data-i18n="b.what-is-open-graph.31">Open Graph vs. Twitter Cards</h2> <p data-i18n="b.what-is-open-graph.32" data-i18n-html>Twitter opprettet sitt eget merkesystem kalt "Twitter Cards" før Open Graph eksisterte. Twitter Cards bruk <code>twitter:card</code>, <code>twitter:title</code>, <code>twitter:description</code> og <code>⟦1011 attributter i stedet for <code>⟦10 <code>og:</code> prefikser.</p> <p data-i18n="b.what-is-open-graph.33" data-i18n-html>I dag støtter de fleste plattformer begge deler. Men X/Twitter foretrekker fortsatt <code>twitter:card</code>-tagger fremfor OG-tagger. Det er derfor den beste praksisen er å angi <strong>begge</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">Hvorfor dette er viktig for nettstedet ditt</h2> <p data-i18n="b.what-is-open-graph.35">Hvis du deler innholdet ditt hvor som helst på sosiale medier – noe du sannsynligvis gjør hvis du har et nettsted – er forhåndsvisningene av koblingene ditt førsteinntrykk. En godt utformet forhåndsvisning med en klar tittel, overbevisende beskrivelse og et godt bilde øker klikkfrekvensen dramatisk.</p> <p data-i18n="b.what-is-open-graph.36">En ødelagt forhåndsvisning – manglende bilde, avkortet tittel eller forvansket beskrivelse – får innholdet ditt til å se uprofesjonelt ut. Folk ruller forbi den.</p> <p data-i18n="b.what-is-open-graph.37">Open Graph-taggene er forskjellen mellom de to. De tar 5 minutter å sette opp og har en uforholdsmessig innvirkning på hvordan innholdet ditt presterer på sosiale medier.</p> <h2 data-i18n="b.what-is-open-graph.38">Rask sjekkliste</h2> <div class="checklist"> <ol> <li data-i18n="b.what-is-open-graph.39" data-i18n-html>Legg til <code>og:title</code>, <code>og:description</code>, <code>og:image</code> og <code>og:url</code> på hver side</li> <li data-i18n="b.what-is-open-graph.40" data-i18n-html>Legg til <code>twitter:card</code> og <code>twitter:image</code> for X/Twitter-kompatibilitet</li> <li data-i18n="b.what-is-open-graph.41">Sett bildestørrelsen til 1200×630 piksler</li> <li data-i18n="b.what-is-open-graph.42">Bruk absolutte URL-er (https://...) for alle bildebaner</li> <li data-i18n="b.what-is-open-graph.43" data-i18n-html>Test med <a href="https://proovd.in/no/">Proovd</a> for å se hvordan siden din ser ut på alle plattformer</li> </ol> </div> <h2 data-i18n="b.what-is-open-graph.44">Ofte stilte spørsmål</h2> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.45">Trenger jeg Open Graph-tagger hvis jeg ikke deler på sosiale medier?</h3> <p data-i18n="b.what-is-open-graph.46">Hvis du ikke deler lenker noe sted, trenger du dem ikke. Men hvis du har et nettsted og deler det én gang på sosiale medier, er OG-tagger avgjørende.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.47">Påvirker Open Graph-tagger Google-rangeringer?</h3> <p data-i18n="b.what-is-open-graph.48">Ikke direkte. Google bruker ikke OG-tagger som en rangeringsfaktor. Men de kan påvirke klikkfrekvenser fra søkeresultater og sosiale delinger, noe som indirekte påvirker trafikk og synlighet.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.49">Kan jeg angi forskjellige OG-tagger for forskjellige sider?</h3> <p data-i18n="b.what-is-open-graph.50">Ja. Hver side bør ha sine egne OG-tagger som samsvarer med innholdet. Et blogginnlegg om hunder bør ha andre og:title og og:image enn en side om katter.</p> </div> <div class="internal-links"> <h3 data-i18n="b.what-is-open-graph.51">Relaterte artikler</h3> <ul style="margin:0; padding-left: 1.25rem;"><li data-i18n="b.what-is-open-graph.52" data-i18n-html><a href="/no/blog/discord-link-preview-not-working">Discord Forhåndsvisning av kobling fungerer ikke? 7 rettelser å prøve (2026)</a></li> <li data-i18n="b.what-is-open-graph.53" data-i18n-html><a href="/no/blog/how-to-add-open-graph-tags">Hvordan legge til Open Graph-etiketter på et hvilket som helst nettsted</a></li> <li data-i18n="b.what-is-open-graph.54" data-i18n-html><a href="/no/blog/open-graph-vs-twitter-card">Open Graph vs Twitter Card: Hva er forskjellen?</a></li> <li data-i18n="b.what-is-open-graph.55" data-i18n-html><a href="/no/blog/og-image-size-guide">Open Graph Bildestørrelse: Den komplette 2026-veiledningen</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>Sjekk Open Graph-taggene dine på sekunder</strong></p> <p style="margin:0;" data-i18n="b.what-is-open-graph.57" data-i18n-html>Sjekk Open Graph-taggene dine gratis med <a href="https://proovd.in/no/">Proovd</a> — lim inn en URL og se forhåndsvisningen på X, LinkedIn, Slack, Discord, WhatsApp og Reddit.</p> </div> </article> </div> <script src="/i18n/apply.js" defer></script> </body> </html>