Hoppa till huvudinnehåll
LibraTool logoLibraTool

Gratis Meta-tagg- och Open Graph-generator

Generera SEO-metatagg, Open Graph och Twitter Card-uppmärkning med en live Google- och sociala medier-delningsförhandsvisning. Kopiera direkt till ditt siduvud.

Fungerar offline när den väl lästs in
0 · 0/580px
0 · 0/920px

Bäst: 1200×630 px, under 5 MB, en absolut https://-länk.

Ta även med
Titel 0/580px (sträva efter 30–60)Beskrivning 0/920px (sträva efter 70–160)

Förhandsvisning i Google-sökning

example.com
Din sidtitel visas här
Din metabeskrivning visas här. Gör den lockande för att förbättra klickfrekvensen från sökresultat.

Bredderna är en uppskattning: Google kortar av efter pixlar, inte tecken.

Förhandsvisning av socialt kort

og:image-förhandsvisning
example.com
Sidtitel
Sidbeskrivning
Klistra in i din <head>

Fyll i minst ett fält ovan för att generera meta-taggar.

Vanliga användningar

  • Metataggar för blogginläggGenerera titel, beskrivning och sociala taggar så att dina artiklar ser bra ut när de delas.
  • Metataggar för produktsidorGör produktsidor vackra att dela och lätta att läsa i sökresultat.
  • Metataggar för landningssidorKontrollera exakt hur dina kampanjlandningssidor visas när de delas och söks.
  • Generera metataggar för valfri webbappSkapa snabbt en fullständig uppsättning head-metataggar för en ny sida eller webbplats.
  • Åtgärda fula länkförhandenLåt inte dina länkar visas som bara URL:er — lägg till taggar som skapar rika förhandsgranskningskort.

Så här fungerar det

All taggsammansättning och head-tolkning sker direkt i din webbläsare — ingen server inblandad. Verktyget använder Reacts useMemo för att reaktivt bygga HTML-strängar och webbläsarens inbyggda DOMParser-API för att läsa befintlig sidkod för import-/granskningsfunktionen.

  1. 1
    Formulärindata driver levande sammansättning
    Medan du skriver bygger en useMemo-hook omedelbart om hela taggblocket — titel, meta description, Open Graph-egenskaper och Twitter Card-attribut — och escapar specialtecken (&, <, >, ") så att utdatan är säker att klistra in direkt i HTML.
  2. 2
    URL-validering via webbläsarens URL-konstruktor
    Varje URL-fält (sid-URL, social bild) valideras med webbläsarens inbyggda URL-konstruktor. Bara välformade http://- eller https://-adresser med punktade värdnamn godkänns; ogiltiga värden blockerar kopieringsknappen och visar ett infogat fel.
  3. 3
    Import: DOMParser läser befintlig head-kod
    Om du klistrar in befintlig <head>-HTML för att granska den kör verktyget den genom DOMParser i inert läge — inga skript körs och inga nätverksförfrågningar görs. Det söker sedan i det tolkade dokumentet efter kända meta-selektorer (og:title, twitter:description, canonical-länk, osv.) och förifyller formulärfälten med det den hittar.
  4. 4
    Levande förhandsvisningar av Google och sociala kort
    Verktyget renderar ett stiliserat Google-sökresultat och en Open Graph-kortförhandsvisning i realtid med samma formulärstate, så att du kan se exakt hur titeln och beskrivningen kommer att trunkeras innan du kopierar utdatan.

Relaterade verktyg

📐

Storleksändrare för bilder till sociala medier

Ändra storlek på och beskär bilder till exakt 2026-storlekar för Instagram, YouTube, TikTok, X, Facebook, LinkedIn och Pinterest — med säkerhetszonguidare och batch-ZIP. 100 % i din webbläsare, ingen uppladdning.

Prova detFiler stannar lokalt
🎼

Ljudtaggredigerare (ID3)

Redigera MP3 ID3-taggar – titel, artist, album, år, genre och omslagsbild – till 100 % i din webbläsare. Ingen uppladdning, och ljudet kodas inte om. Gratis och privat.

Prova detFiler stannar lokalt
🔗

Slug-generator

Konvertera valfri titel eller text till en URL-vänlig slug. Perfekt för blogginlägg, CMS-sidor och SEO-optimerade URL:er.

Prova det

Vanliga frågor