Open Graph metatag-generator

Open Graph-tagger er de små HTML-bitene som bestemmer hvordan siden din ser ut når noen deler den på Facebook, LinkedIn, Slack, Discord eller X (Twitter). Fyll inn en tittel, beskrivelse, URL, bilde og noen alternativer nedenfor, se forhåndsvisningen av delekortet oppdateres umiddelbart, og kopier de genererte <meta>-taggene rett inn i <head> på siden din. Alt skjer i nettleseren din — ingenting sendes til en server.

Hva er dette verktøyet?

Open Graph er en protokoll, opprinnelig laget av Facebook, som lar enhver nettside beskrive seg selv med et lite sett med <meta property="og:...">-tagger plassert i HTML-ens <head>. Når noen limer inn lenken din i en sosial app, chat-klient eller meldingsverktøy, leser den appen disse taggene for å bygge forhåndsvisningskortet — tittel, beskrivelse og miniatyrbilde — i stedet for å gjette ut fra innholdet på siden.

Twitter (X) bruker et beslektet, men separat sett med tagger, <meta name="twitter:...">, for å styre spesifikt hvordan en lenkeforhåndsvisning ser ut på deres plattform. De fleste nettsteder setter begge deler: Open Graph-tagger for bred kompatibilitet, og Twitter Card-tagger for å finjustere forhåndsvisningen på X (for eksempel ved å velge et kort med stort bilde fremfor et lite sammendragskort).

Uten disse taggene viser en delt lenke enten ingen forhåndsvisning i det hele tatt, eller plattformen prøver å gjette en tittel og et bilde ut fra sidens rå innhold — og velger ofte feil overskrift, et tilfeldig innebygd bilde, eller ingenting. Å angi og:title, og:description og og:image eksplisitt gir deg full kontroll over hvordan innholdet ditt presenteres før noen klikker.

Hvorfor bruke det?

Live forhåndsvisning — se nøyaktig hvordan delekortet vil se ut mens du skriver, før du publiserer noe.
Genererer både Open Graph-tagger (og:title, og:description, og:image, og:url, og:type, og:site_name) og Twitter Card-tagger i én omgang.
Dekker feltene som plattformene faktisk leser: tittel, beskrivelse, kanonisk URL, bilde, sidenavn, innholdstype og Twitter Card-stil.
Kjører helt på klientsiden — tittelen, beskrivelsen og URL-ene dine forlater aldri nettleseren din.
Gratis, ingen innlogging, ingen begrensning — kopier resultatet og lim det inn i HTML-en din.

Slik bruker du det

Angi tittelen på siden din og en kort beskrivelse (sikt mot under ~60 tegn for tittelen, ~155–160 for beskrivelsen).
Angi den kanoniske URL-en til siden og den absolutte URL-en til forhåndsvisningsbildet (bilde-URL-er må være fullstendig kvalifisert, f.eks. https://example.com/image.jpg, ikke en relativ sti).
Angi eventuelt sidenavnet, velg en og:type (website, article, product, profile, video, music), og velg en Twitter Card-type (summary eller summary_large_image).
Sjekk det live forhåndsvisningskortet for å bekrefte at tittel, beskrivelse og bilde ser bra ut sammen.
Klikk "Kopier" og lim de genererte <meta>-taggene inn i <head> på siden din, rett før den avsluttende </head>-taggen.

Eksempel

Inndata

Tittel: "10 gratis utviklerverktøy du faktisk vil bruke"
Beskrivelse: "En kuratert liste over nettleserbaserte verktøy for JSON, regex, UUID-er og mer — ingen installasjon nødvendig."
URL: https://example.com/blog/dev-tools
Bilde: https://example.com/images/dev-tools-cover.jpg

Resultat

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Bare feltene du fyller ut, tas med, så hvis du lar sidenavnet stå tomt, blir og:site_name rett og slett utelatt fra resultatet.

Vanlige feil du bør unngå

Helt manglende og:image — uten det viser de fleste plattformer enten ikke noe forhåndsvisningsbilde, eller faller tilbake på et tilfeldig bilde hentet fra siden, noe som vanligvis ser ødelagt og uprofesjonelt ut.
Å bruke en relativ bildesti som /images/cover.jpg i stedet for en fullstendig URL som https://example.com/images/cover.jpg — sosiale crawlere kan generelt ikke løse relative stier.
Feil bildeformat — et kvadratisk eller stående bilde beskjæres klossete når plattformer tvinger det inn i det liggende 1,91:1-formatet; design alltid delebildet ditt nær 1200×630.
Titler eller beskrivelser som blir avkuttet — hold og:title under ~60 tegn og og:description under ~155–160 tegn, slik at de ikke kuttes med tre prikker på de fleste plattformer.
Å glemme å oppdatere bufrede forhåndsvisninger — etter at du har endret og-tagger på en live side, kan den gamle forhåndsvisningen henge igjen i Facebooks eller LinkedIns buffer helt til du manuelt tvinger frem en ny skanning med feilsøkingsverktøyene deres.

Hvor hver tagg brukes

og:title, og:description og og:image er de tre taggene som nesten alle plattformer leser for å bygge en forhåndsvisning. og:url forteller crawlere hvilken kanonisk lenke forhåndsvisningen skal knyttes til, noe som har betydning hvis det samme innholdet er tilgjengelig via flere URL-er. og:site_name viser en liten etikett (som navnet på publikasjonen eller merkevaren) over tittelen på enkelte plattformer, som Facebook.

og:type endrer hva slags objekt siden representerer for crawlere som støtter Open Graphs rikere objektmodell — for eksempel åpner article for og:article:published_time og og:article:author på plattformer som leser dem, selv om de fleste sosiale forhåndsvisninger ignorerer disse ekstra feltene og bare bruker den grunnleggende trioen tittel/beskrivelse/bilde.

twitter:card styrer layouten spesifikt på X: summary viser en liten kvadratisk miniatyr ved siden av teksten, mens summary_large_image viser et bilde i full bredde over teksten — sistnevnte er nesten alltid det bedre valget for innhold med et meningsfullt omslagsbilde.

Ofte stilte spørsmål

Hvilken størrelse bør og:image være?

1200×630px er anbefalt størrelse — den er stor nok for skjermer med høy pikseltetthet og passer med bildeformatet på omtrent 1,91:1 som Facebook, LinkedIn og X beskjærer bildet til. Hold filen under 5–8MB, bruk JPG eller PNG, og sørg for at bilde-URL-en er en fullstendig, absolutt adresse, ikke en relativ sti — de fleste crawlere klarer ikke å løse relative bildestier korrekt.

Hvorfor vises ikke forhåndsvisningen min når jeg deler lenken?

De vanligste årsakene er: manglende og:image, en relativ i stedet for absolutt bilde-URL, at crawleren blokkeres av robots.txt, eller at plattformen viser en bufret versjon av en gammel forhåndsvisning. Både Facebook og LinkedIn bufrer skannede forhåndsvisninger aggressivt — bruk Facebooks Sharing Debugger eller LinkedIns Post Inspector for å tvinge frem en ny skanning etter at du har oppdatert taggene dine.

Hva er forskjellen mellom og:-tagger og twitter:-tagger?

og:-tagger (og:title, og:description, og:image osv.) er Open Graph-standarden, som leses av Facebook, LinkedIn, Slack, Discord, WhatsApp og de fleste andre plattformer. twitter:-tagger er Twitters/X sitt eget format. Hvis twitter:title eller twitter:image mangler, faller X automatisk tilbake til den tilsvarende og:-taggen — men å angi begge eksplisitt gir deg mer kontroll, inkludert muligheten til å velge summary_large_image for et stort forhåndsvisningsbilde.

Hvilken og:type bør jeg bruke?

"website" er det trygge standardvalget for de fleste sider, inkludert hjemmesider og generelt innhold. Bruk "article" for blogginnlegg og nyhetsartikler (det låser opp ekstra artikkelspesifikke tagger som publiseringstidspunkt), "product" for netthandelssider, og "profile" for personlige sider eller brukerprofilsider. Typen påvirker først og fremst hvilke ekstra Open Graph-egenskaper som er gyldige, ikke hvordan selve forhåndsvisningskortet ser ut.

Lagrer eller sender dette verktøyet dataene mine noe sted?

Nei. All generering skjer lokalt i nettleseren din med vanlig JavaScript. Ingenting du skriver blir overført, logget eller lagret — å lukke fanen tømmer alt.