Softonic

Metataggsgenerator

Steg 1 / 3
Grundläggande SEO
0/60
0/160
Robots
Nästa

Fyll i ett formulär, sidtitel, beskrivning, canonical-URL, social bild, författare, webbplatsnamn, Twitter-handle, så genererar generatorn ett färdigt block av metataggar att klistra in, som täcker SEO-grunderna, Open Graph (för Facebook, LinkedIn, Discord, Slack), Twitter Card, favicon/Apple touch-ikon, och valfritt Schema.org JSON-LD för Article eller Product. Praktiskt när du kopplar ihop en statisk webbplats för hand eller lägger till metadata i ett CMS som bara erbjuder en rå <head>-editor.

Så bygger du head-snippeten

  1. 1

    Ange sidmetadata

    Titel, beskrivning, canonical-URL, författare, webbplatsnamn.

  2. 2

    Lägg till URL till social bild

    Används för både `og:image` och `twitter:image`. 1200×630 är idealiskt.

  3. 3

    Välj alternativ

    Twitter-korttyp, robots-direktiv, temafärg, Schema.org-typ.

  4. 4

    Kopiera utdatan

    Ett block med HTML-`<meta>`-taggar redo att klistra in mellan `<head>...</head>`.

Vad generatorn producerar

<!-- Primary Meta -->
<title>Page title, Site name</title>
<meta name="description" content="A 150-character summary of the page content.">
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Page title">
<meta property="og:description" content="Same description or a social-optimized one">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Site name">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@siteaccount">
<meta name="twitter:creator" content="@authoraccount">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

<!-- Icons -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#0b5ed7">

Vägledning fält för fält

  • Titel: 50–60 tecken. Inkludera det primära nyckelordet. Sätt varumärket sist: Sidtitel, Varumärke.
  • Beskrivning: 140–160 tecken. Läses bra fristående. Undvik standardtext som upprepas över sidor.
  • Canonical: absolut URL, inklusive https://. Matchar og:url.
  • OG-bild: minst 1200×630 px (det Facebook-föredragna förhållandet 1.91:1). JPG eller PNG. Under 8 MB.
  • Twitter-kort: summary_large_image om du har en bra bild; summary för liten miniatyr.
  • Robots: index, follow för offentliga sidor; noindex, nofollow för staging eller tunt innehåll.

Valfria extrafält

  • JSON-LD för Article eller Product låter Google visa rika resultat (författare, publiceringsdatum, pris, recensionsstjärnor).
  • theme-color färgar webbläsarens chrome på Android Chrome och iOS Safari.
  • og:locale för flerspråkiga webbplatser (t.ex. en_US, es_ES).
  • og:type=article-extrafält: article:published_time, article:author, article:section, article:tag.

Vanliga misstag som den här generatorn förhindrar

  • Att glömma viewport-taggen. Din sida visas i skrivbordsbredd på mobilen, zoomnivå 0.3.
  • Olika titlar i <title>, og:title och twitter:title. Inkonsekventa delningskort.
  • Relativa bild-URL:er i og:image. Facebook kan inte lösa upp dem; kortet renderas inte.
  • Saknad og:type. Standardvärden fungerar, men Facebook är gladare med ett uttryckligt värde.

Vanliga frågor

Tekniskt sett faller Twitter tillbaka på Open Graph om dess egna taggar saknas, så om du bara anger OG renderar Twitter ändå ett kort. Att lägga till Twitter-specifika taggar låter dig anpassa upplevelsen (t.ex. ett annat bildförhållande).

1200×630 px (1.91:1). Facebook och LinkedIn visar detta i full storlek; Twitter beskär det för summary-kortet. Lägg inte kritiskt innehåll i kanterna, de mittersta 60 % är den säkra zonen.

Nej. Sidor rankas bra utan det. JSON-LD aktiverar funktioner för rika resultat (receptkort, FAQ-dragspel, produktlistor) när innehållstypen matchar ett Schema.org-schema. Lägg till det där det passar.

Mellan <head> och </head> i din HTML, före eventuella externa stilmallar eller skript som kan fördröja parsern från att nå dem.

Nej. Allt genereras lokalt i din webbläsare.

Relaterade verktyg

Webpack-konfigurationsgenerator

Skapa en webpack.config.js för webpack 5 med vanlig JavaScript, React eller Vue: TypeScript, Babel, CSS eller Sass, bilder, HtmlWebpackPlugin, en utvecklingsserver och raden för npm install.

CSS-laddningsgenerator

Skapa en cirkulär spinnare i ren CSS: ställ in diameter, kanttjocklek, accentfärg och rotationshastighet, förhandsvisa direkt och kopiera den färdiga CSS-koden. Ingen SVG, ingen JavaScript.

OpenAPI-validerare

Klistra in ett OpenAPI- eller Swagger-dokument i JSON eller YAML och kontrollera dess kärnstruktur: versionsfält, info-objekt och paths, med tydliga fel och varningar.

PHP-formaterare

Lägg till radbrytningar och indrag med 2 eller 4 blanksteg i ett enkelt PHP-kodstycke. Granska resultatet: detta är varken en PHP-parser eller en PSR-12-korrigerare.

Protocol Buffers-avkodare

Avkoda Protobuf-byte lokalt från hex, Base64, Base64URL, text eller fil, granska fälttolkningar och exportera en privat rapport.

XSD-validerare

Validera ett XML-dokument mot ett XSD-schema och rapportera element- och typavvikelser med exakta radnummer.

Verktyget finns på andra språk