Open Graph meta tag-generator

Open Graph-tags er de små stykker HTML, der bestemmer, hvordan din side ser ud, når nogen deler den på Facebook, LinkedIn, Slack, Discord eller X (Twitter). Udfyld en titel, beskrivelse, URL, billede og et par valgmuligheder nedenfor, se forhåndsvisningen af delekortet opdatere sig med det samme, og kopiér de genererede <meta>-tags direkte ind i din sides <head>. Alt sker i din browser — der sendes intet til en server.

Hvad er dette værktøj?

Open Graph er en protokol, oprindeligt skabt af Facebook, der lader enhver webside beskrive sig selv med et lille sæt <meta property="og:...">-tags placeret i HTML'ens <head>. Når nogen indsætter dit link i en social app, chatklient eller messenger, læser den app disse tags for at opbygge forhåndsvisningskortet — titel, beskrivelse og miniaturebillede — i stedet for at gætte ud fra sidens indhold.

Twitter (X) bruger et beslægtet, men separat sæt tags, <meta name="twitter:...">, til specifikt at styre, hvordan et link ser ud i forhåndsvisning på platformen. De fleste sider sætter begge dele: Open Graph-tags for bred kompatibilitet og Twitter Card-tags for at finjustere forhåndsvisningen på X (for eksempel ved at vælge et stort billedkort frem for et lille resumékort).

Uden disse tags viser et delt link enten slet ingen forhåndsvisning, eller også forsøger platformen at gætte en titel og et billede ud fra sidens rå indhold — og vælger ofte den forkerte overskrift, et tilfældigt indlejret billede eller intet. Ved eksplicit at angive og:title, og:description og og:image får du fuld kontrol over, hvordan dit indhold præsenteres, før nogen klikker.

Hvorfor bruge det?

Live forhåndsvisning — se præcis, hvordan delekortet vil se ud, mens du skriver, før du udgiver noget.
Genererer både Open Graph-tags (og:title, og:description, og:image, og:url, og:type, og:site_name) og Twitter Card-tags i én omgang.
Dækker de felter, platformene rent faktisk læser: titel, beskrivelse, kanonisk URL, billede, sidenavn, indholdstype og Twitter Card-stil.
Kører udelukkende i din browser — din titel, beskrivelse og URL'er forlader aldrig din browser.
Gratis, ingen login, ingen begrænsning — kopiér resultatet og indsæt det i din HTML.

Sådan bruger du det

Indtast din sides titel og en kort beskrivelse (sigt efter under ~60 tegn til titlen og ~155-160 til beskrivelsen).
Indtast sidens kanoniske URL og den absolutte URL til forhåndsvisningsbilledet (billed-URL'er skal være fuldt kvalificerede, f.eks. https://example.com/image.jpg, ikke en relativ sti).
Angiv eventuelt sidenavnet, vælg en og:type (website, article, product, profile, video, music), og vælg en Twitter Card-type (summary eller summary_large_image).
Tjek det live forhåndsvisningskort for at bekræfte, at titel, beskrivelse og billede passer godt sammen.
Klik på "Kopiér", og indsæt de genererede <meta>-tags i din sides <head>, lige før det afsluttende </head>-tag.

Eksempel

Input

Titel: "10 gratis udviklerværktøjer, du faktisk vil bruge"
Beskrivelse: "En udvalgt liste over browserbaserede værktøjer til JSON, regex, UUID'er og mere — ingen installation nødvendig."
URL: https://example.com/blog/dev-tools
Billede: https://example.com/images/dev-tools-cover.jpg

Output

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

Kun de felter, du udfylder, medtages, så hvis du lader sidenavnet stå tomt, udelades og:site_name simpelthen fra resultatet.

Almindelige fejl, du bør undgå

Manglende og:image helt og aldeles — uden det viser de fleste platforme enten intet forhåndsvisningsbillede eller falder tilbage til et tilfældigt billede hentet fra siden, hvilket som regel ser ødelagt eller uprofessionelt ud.
At bruge en relativ billedsti som /images/cover.jpg i stedet for en fuld URL som https://example.com/images/cover.jpg — sociale crawlere kan generelt ikke følge relative stier.
Forkert billedformat — et kvadratisk eller stående billede bliver beskåret akavet, når platformene tvinger det ind i 1,91:1-liggende format; design altid dit delebillede tæt på 1200×630.
Titler eller beskrivelser, der bliver afkortet — hold og:title under ~60 tegn og og:description under ~155-160 tegn, så de ikke bliver klippet af med tre prikker på de fleste platforme.
At glemme at opdatere cachede forhåndsvisninger — efter du har ændret og-tags på en live side, kan den gamle forhåndsvisning blive hængende i Facebooks eller LinkedIns cache, indtil du manuelt tvinger en ny scanning igennem med deres fejlfindingsværktøjer.

Hvor hvert tag bruges

og:title, og:description og og:image er de tre tags, som stort set alle platforme læser for at bygge en forhåndsvisning. og:url fortæller crawlere, hvilket kanonisk link forhåndsvisningen skal knyttes til, hvilket betyder noget, hvis det samme indhold kan tilgås via flere URL'er. og:site_name viser en lille label (som udgivelsens eller mærkets navn) over titlen på nogle platforme, f.eks. Facebook.

og:type ændrer, hvilken slags objekt siden repræsenterer over for crawlere, der understøtter Open Graphs rigere objektmodel — for eksempel aktiverer article tags som og:article:published_time og og:article:author på platforme, der læser dem, selvom de fleste sociale forhåndsvisninger ignorerer disse ekstra felter og kun bruger den grundlæggende trio af titel/beskrivelse/billede.

twitter:card styrer layoutet specifikt på X: summary viser en lille kvadratisk miniature ved siden af teksten, mens summary_large_image viser et billede i fuld bredde over teksten — sidstnævnte er næsten altid det bedste valg til indhold med et meningsfuldt coverbillede.

Ofte stillede spørgsmål

Hvilken størrelse skal mit og:image have?

1200×630px er den anbefalede størrelse — den er stor nok til skærme med høj pixeltæthed og matcher det billedformat på ca. 1,91:1, som Facebook, LinkedIn og X beskærer til. Hold filen under 5-8 MB, brug JPG eller PNG, og sørg for, at billed-URL'en er en fuld, absolut URL og ikke en relativ sti — de fleste crawlere kan ikke korrekt følge relative billedstier.

Hvorfor vises min forhåndsvisning ikke, når jeg deler linket?

De mest almindelige årsager er: manglende og:image, en relativ i stedet for absolut billed-URL, at crawleren blokeres af robots.txt, eller at platformen viser en cachet version af en gammel forhåndsvisning. Både Facebook og LinkedIn cacher scannede forhåndsvisninger aggressivt — brug Facebooks Sharing Debugger eller LinkedIns Post Inspector til at tvinge en ny scanning igennem, efter du har opdateret dine tags.

Hvad er forskellen mellem og:-tags og twitter:-tags?

og:-tags (og:title, og:description, og:image osv.) er Open Graph-standarden, som læses af Facebook, LinkedIn, Slack, Discord, WhatsApp og de fleste andre platforme. twitter:-tags er Twitter/X's eget format. Hvis twitter:title eller twitter:image mangler, falder X automatisk tilbage til det tilsvarende og:-tag — men ved eksplicit at angive begge dele får du mere kontrol, herunder muligheden for at vælge summary_large_image til et stort forhåndsvisningsbillede.

Hvilken og:type skal jeg bruge?

"website" er det sikre standardvalg for de fleste sider, herunder forsider og generelt indhold. Brug "article" til blogindlæg og nyhedsartikler (det åbner for ekstra artikelspecifikke tags som udgivelsestidspunkt), "product" til e-handelssider og "profile" til personlige eller brugerprofilsider. Typen påvirker primært, hvilke ekstra Open Graph-egenskaber der er gyldige, ikke hvordan selve forhåndsvisningskortet ser ud.

Gemmer eller sender dette værktøj mine data nogen steder?

Nej. Al generering foregår lokalt i din browser med almindelig JavaScript. Intet af det, du skriver, bliver sendt, logget eller gemt — lukker du fanen, ryddes alt.