Kortversjonen
- Open Graph-tagger er metatagger i sidens head som forteller sosiale plattformer og meldingsapper hvilken tittel, beskrivelse og hvilket bilde de skal vise når lenken deles.
- Open Graph-protokollen angir og:title, og:type, og:image og og:url som nødvendige grunntagger, og anbefaler sterkt og:description og og:site_name.
- Et og:image på 1200×630 piksler med en absolutt https-adresse fungerer godt på Facebook, LinkedIn, X, Slack, iMessage og de fleste andre apper.
- X leser twitter:card for å velge oppsett og bruker Open Graph-tagger til tittel, beskrivelse og bilde når egne tagger mangler.
- Plattformer mellomlagrer forhåndsvisninger. Når du endrer tagger, må du derfor hente nettadressen på nytt i et feilsøkingsverktøy som Facebook Sharing Debugger eller LinkedIn Post Inspector.
På denne siden
Open Graph-tagger er <meta>-tagger i sidens <head> som bestemmer hvordan den ser ut ved deling: tittel, kort beskrivelse, bilde og lenke. Facebook laget protokollen, og i dag leser LinkedIn, X, Slack, Discord, WhatsApp, iMessage og de fleste andre apper den. Fire tagger utgjør kjernen, og:title, og:type, og:image og og:url. Med beskrivelse, bildestørrelse og en Twitter-korttagg dekker du nesten alle plattformer.
Open Graph-taggene alle sider trenger
Lim dette inn i sidens head og bytt verdiene. Hver tagg bruker property, ikke name, og alle nettadresser er absolutte.
<head>
<title>Spring menu at Harbour Kitchen</title>
<meta name="description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://harbourkitchen.example/spring" />
<meta property="og:title" content="Spring menu at Harbour Kitchen" />
<meta property="og:description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />
<meta property="og:site_name" content="Harbour Kitchen" />
<meta property="og:locale" content="en_GB" />
<meta property="og:image" content="https://harbourkitchen.example/og/spring.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The spring menu title over a soft green gradient" />
<!-- X (Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@harbourkitchen" />
</head>og:titleHva den gjør
Tips
og:descriptionHva den gjør
Tips
og:imageHva den gjør
Tips
og:urlSidens kanoniske adresseTips
og:typeHva den gjør
Tips
website for de fleste sider, article for innleggog:site_nameHva den gjør
Tips
og:image:altHva den gjør
Tips
og:image: størrelse og format
Bildet er det folk faktisk legger merke til. Bruk 1200×630 piksler, et forhold på omtrent 1,91:1, som er størrelsen plattformene forventer til store forhåndsvisninger, og den som står i Open Graph-bildestørrelse. Hold viktige ord og logo unna kantene, siden noen apper beskjærer til kvadrat eller runder hjørnene.
Open Graph 1200×630
1200 × 630
LinkedIn-lenkebilde 1200×627
1200 × 627
Kvadratisk beskjæring 1200×1200
1200 × 1200
Lagre som PNG når bildet hovedsakelig er tekst og gradient, eller JPEG med høy kvalitet til fotografier. Hold filen liten, helst noen hundre kilobyte, siden plattformene setter egne grenser og store filer laster sakte i feeder. PNG eller JPG forklarer valget, og optimalisere bilder for nettet dekker komprimering.
Et delingsbilde laget for forhåndsvisningen: korte ord, sentrert og stort nok til å leses i størrelsen feeden viser.
Twitter-korttagger til X
X bruker egne twitter:-tagger, skrevet med name fremfor property. Den viktige er twitter:card. Når twitter:title, twitter:description eller twitter:image mangler, bruker X tilsvarende Open Graph-tagger, så du trenger sjelden å duplisere dem.
twitter:cardVerdier
summary_large_image eller summaryMerknader
twitter:siteVerdier
@yourbrandMerknader
twitter:creatorVerdier
@authorMerknader
twitter:image:altVerdier
Merknader
Open Graph-tagger til artikler
Blogginnlegg og nyhetssider kan fortelle mer om seg selv med og:type satt til article og noen ekstra egenskaper. Noen apper viser dato eller forfatter, og taggene hjelper plattformene å forstå siden.
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-10-01T09:00:00Z" />
<meta property="article:modified_time" content="2026-10-03T14:30:00Z" />
<meta property="article:author" content="https://harbourkitchen.example/about/ana" />
<meta property="article:section" content="Menus" />Angi Open Graph-tagger i et rammeverk
De fleste rammeverk lager disse taggene fra data. I Next.js eksporterer du et metadataobjekt fra siden eller layouten, og rammeverket skriver taggene. Angi metadataBase én gang, slik at relative bildestier blir absolutte.
export const metadata = {
metadataBase: new URL('https://harbourkitchen.example'),
title: 'Spring menu at Harbour Kitchen',
description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
openGraph: {
type: 'website',
url: '/spring',
title: 'Spring menu at Harbour Kitchen',
description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
siteName: 'Harbour Kitchen',
images: [{ url: '/og/spring.png', width: 1200, height: 630, alt: 'The spring menu title over a soft green gradient' }],
},
twitter: { card: 'summary_large_image', site: '@harbourkitchen' },
}Teste og rette lenkeforhåndsvisninger
- 1
Se kildekoden
Åpne sidens kildekode fremfor inspeksjonsverktøyet, og bekreft at taggene finnes i serverens HTML. Mange roboter kjører ikke JavaScript.
- 2
Sjekk bildeadressen
Lim og:image-adressen inn i et privat vindu. Den skal laste uten innlogging.
- 3
Hent på nytt
Kjør nettadressen gjennom Facebook Sharing Debugger og LinkedIn Post Inspector for å tømme mellomlagrene deres.
- 4
Gi bildet en ny versjon
Henger et gammelt bilde igjen, endre filnavnet eller legg til en spørringsstreng som
?v=2, og hent på nytt. - 5
Del privat
Send lenken til deg selv i Slack eller en meldingsapp for å se en faktisk forhåndsvisning.
Tom eller feil forhåndsvisning
- Tagger lagt inn av JavaScript på klientsiden
- Relativ og:image-sti
- og:url peker på en annen side
- Lite bilde eller uvanlig form
- Taggene er endret, forhåndsvisningen er lik
Løsning
- Rendre taggene på serveren
- Bruk en full https-adresse
- La og:url samsvare med den kanoniske adressen
- Eksporter i 1200×630
- Hent på nytt, eller gi bildet nytt navn
Taggene er den enkle delen; bildet er designjobben og må være leselig som miniatyrbilde. I Gradiently er lenkeforhåndsvisning en innebygd størrelse på 1200×630. Marken holder sitt roligste område bak ordene, og Designer kan lage delingsbildet til en side fra én setning, og deretter matchende innlegg til hver plattform.
Spørsmål folk stiller
Hva er Open Graph-tagger?
Metatagger i sidens head, som og:title og og:image, som forteller sosiale plattformer og meldingsapper hva de skal vise når lenken deles.
Hvilke Open Graph-tagger er nødvendige?
Protokollen lister og:title, og:type, og:image og og:url som grunntagger. Legg til og:description og og:site_name for en komplett forhåndsvisning.
Hvilken størrelse bør og:image ha?
1200×630 piksler fungerer på Facebook, LinkedIn, X og de fleste chatteapper. Bruk en absolutt https-adresse og hold viktig innhold sentrert.
Trenger jeg Twitter-korttagger hvis jeg har Open Graph?
Legg til twitter:card, vanligvis satt til summary_large_image. X bruker Open Graph til tittel, beskrivelse og bilde.
Hvorfor oppdateres ikke lenkeforhåndsvisningen?
Plattformene mellomlagrer forhåndsvisninger. Hent nettadressen på nytt i Facebook Sharing Debugger eller LinkedIn Post Inspector, eller gi bildefilen et nytt navn.
Bør jeg bruke property eller name til OG-tagger?
Open Graph-tagger bruker property, og Twitter-tagger bruker name. De fleste parsere godtar begge, men å følge konvensjonen hindrer overraskelser.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår