Open Graph-metataggsgenerator

Open Graph-taggar är de små HTML-bitarna som avgör hur din sida ser ut när någon delar den på Facebook, LinkedIn, Slack, Discord eller X (Twitter). Fyll i en titel, beskrivning, URL, bild och några alternativ nedan, se hur förhandsvisningen av delningskortet uppdateras direkt, och kopiera sedan de genererade <meta>-taggarna rakt in i din sidas <head>. Allt sker i din webbläsare — inget skickas till en server.

Vad är detta verktyg?

Open Graph är ett protokoll, ursprungligen skapat av Facebook, som gör att vilken webbsida som helst kan beskriva sig själv med en liten uppsättning <meta property="og:...">-taggar placerade i HTML:ens <head>. När någon klistrar in din länk i en social app, chattklient eller meddelandeverktyg läser den appen dessa taggar för att bygga förhandsvisningskortet — titel, beskrivning och miniatyrbild — istället för att gissa utifrån sidans innehåll.

Twitter (X) använder en besläktad men separat uppsättning taggar, <meta name="twitter:...">, för att specifikt styra hur en länkförhandsvisning ser ut på deras plattform. De flesta webbplatser sätter båda: Open Graph-taggar för bred kompatibilitet och Twitter Card-taggar för att finjustera förhandsvisningen på X (till exempel genom att välja ett kort med stor bild istället för ett litet sammanfattningskort).

Utan dessa taggar visar en delad länk antingen ingen förhandsvisning alls, eller så försöker plattformen gissa en titel och bild från sidans råa innehåll — och väljer ofta fel rubrik, en slumpmässig infogad bild eller ingenting. Att uttryckligen ange og:title, og:description och og:image ger dig full kontroll över hur ditt innehåll presenteras innan någon klickar.

Varför använda det?

Live-förhandsvisning — se exakt hur delningskortet kommer att se ut medan du skriver, innan du publicerar något.
Genererar både Open Graph-taggar (og:title, og:description, og:image, og:url, og:type, og:site_name) och Twitter Card-taggar på en gång.
Täcker de fält som plattformarna faktiskt läser: titel, beskrivning, kanonisk URL, bild, webbplatsnamn, innehållstyp och Twitter Card-stil.
Körs helt i din webbläsare — din titel, beskrivning och dina URL:er lämnar aldrig din webbläsare.
Gratis, inget inloggningskrav, ingen begränsning — kopiera resultatet och klistra in det i din HTML.

Så använder du det

Ange din sidas titel och en kort beskrivning (sikta på under ~60 tecken för titeln, ~155–160 för beskrivningen).
Ange sidans kanoniska URL och den absoluta URL:en till förhandsvisningsbilden (bild-URL:er måste vara fullständigt kvalificerade, t.ex. https://example.com/image.jpg, inte en relativ sökväg).
Ange valfritt webbplatsnamnet, välj en og:type (website, article, product, profile, video, music) och välj en Twitter Card-typ (summary eller summary_large_image).
Kontrollera det live förhandsvisningskortet för att bekräfta att titel, beskrivning och bild ser bra ut tillsammans.
Klicka på "Kopiera" och klistra in de genererade <meta>-taggarna i din sidas <head>, före den avslutande </head>-taggen.

Exempel

Inmatning

Titel: "10 gratis utvecklarverktyg du faktiskt kommer att använda"
Beskrivning: "En utvald lista med webbläsarbaserade verktyg för JSON, reguljära uttryck, UUID:er med mera — ingen installation krävs."
URL: https://example.com/blog/dev-tools
Bild: 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" />

Endast de fält du fyller i inkluderas, så att lämna webbplatsnamnet tomt utelämnar helt enkelt og:site_name från resultatet.

Vanliga misstag att undvika

Helt saknad og:image — utan den visar de flesta plattformar antingen ingen förhandsvisningsbild alls eller faller tillbaka på en slumpmässig bild hämtad från sidan, vilket vanligtvis ser trasigt och oprofessionellt ut.
Att använda en relativ bildsökväg som /images/cover.jpg istället för en fullständig URL som https://example.com/images/cover.jpg — sociala crawlers kan generellt inte lösa relativa sökvägar.
Fel bildförhållande — en kvadratisk eller stående bild beskärs klumpigt när plattformar tvingar in den i det liggande 1,91:1-formatet; designa alltid din delningsbild nära 1200×630.
Titlar eller beskrivningar som klipps av — håll og:title under ~60 tecken och og:description under ~155–160 tecken så att de inte klipps av med tre punkter på de flesta plattformar.
Att glömma uppdatera cachade förhandsvisningar — efter att du ändrat og-taggar på en live-sida kan den gamla förhandsvisningen finnas kvar i Facebooks eller LinkedIns cache tills du manuellt tvingar fram en ny skanning med deras felsökningsverktyg.

Var varje tagg används

og:title, og:description och og:image är de tre taggarna som nästan alla plattformar läser för att bygga en förhandsvisning. og:url talar om för crawlers vilken kanonisk länk förhandsvisningen ska kopplas till, vilket spelar roll om samma innehåll är nåbart via flera URL:er. og:site_name visar en liten etikett (som namnet på publikationen eller varumärket) ovanför titeln på vissa plattformar, som Facebook.

og:type ändrar vilken typ av objekt sidan representerar för crawlers som stöder Open Graphs rikare objektmodell — till exempel låser article upp og:article:published_time och og:article:author på plattformar som läser dem, även om de flesta sociala förhandsvisningar ignorerar dessa extra fält och bara använder grundtrion titel/beskrivning/bild.

twitter:card styr layouten specifikt på X: summary visar en liten kvadratisk miniatyr bredvid texten, medan summary_large_image visar en bild i full bredd ovanför texten — det senare är nästan alltid det bättre valet för innehåll med en meningsfull omslagsbild.

Vanliga frågor

Vilken storlek ska min og:image ha?

1200×630px är den rekommenderade storleken — den är tillräckligt stor för skärmar med hög pixeldensitet och matchar bildförhållandet på ungefär 1,91:1 som Facebook, LinkedIn och X beskär bilden till. Håll filen under 5–8MB, använd JPG eller PNG och se till att bildens URL är en fullständig, absolut adress och inte en relativ sökväg — de flesta crawlers löser inte relativa bildsökvägar korrekt.

Varför visas inte min förhandsvisning när jag delar länken?

De vanligaste orsakerna är: saknad og:image, en relativ istället för absolut bild-URL, att crawlern blockeras av robots.txt, eller att plattformen visar en cachad version av en gammal förhandsvisning. Både Facebook och LinkedIn cachar skannade förhandsvisningar aggressivt — använd Facebooks Sharing Debugger eller LinkedIns Post Inspector för att tvinga fram en ny skanning efter att du uppdaterat dina taggar.

Vad är skillnaden mellan og:-taggar och twitter:-taggar?

og:-taggar (og:title, og:description, og:image, osv.) är Open Graph-standarden, som läses av Facebook, LinkedIn, Slack, Discord, WhatsApp och de flesta andra plattformar. twitter:-taggar är Twitters/X:s eget format. Om twitter:title eller twitter:image saknas faller X automatiskt tillbaka på motsvarande og:-tagg — men att ange båda explicit ger dig mer kontroll, inklusive möjligheten att välja summary_large_image för en stor förhandsvisningsbild.

Vilken og:type ska jag använda?

"website" är det säkra standardvalet för de flesta sidor, inklusive startsidor och allmänt innehåll. Använd "article" för blogginlägg och nyhetsartiklar (det låser upp ytterligare, artikelspecifika taggar som publiceringstid), "product" för e-handelssidor och "profile" för personliga sidor eller användarprofilsidor. Typen påverkar främst vilka ytterligare Open Graph-egenskaper som är giltiga, inte hur det grundläggande förhandsvisningskortet ser ut.

Lagrar eller skickar detta verktyg mina data någonstans?

Nej. All generering sker lokalt i din webbläsare med vanlig JavaScript. Inget av det du skriver överförs, loggas eller lagras — att stänga fliken rensar allt.