Softonic

Meta-Tag-Generator

Schritt 1 / 3
Basis-SEO
0/60
0/160
Robots
Weiter

Füllen Sie ein Formular aus, Seitentitel, Beschreibung, kanonische URL, Social Image, Autor, Seitenname, Twitter-Handle, und der Generator gibt einen bereit zum Einfügen Block von Meta-Tags aus, die die SEO-Grundlagen, Open Graph (für Facebook, LinkedIn, Discord, Slack), Twitter Card, Favicon/Apple Touch Icon und optionales Schema.org JSON-LD für Artikel oder Produkt abdecken. Praktisch, wenn Sie eine statische Seite von Hand erstellen oder Metadaten zu einem CMS hinzufügen, das nur einen Roh-<head>-Editor bereitstellt.

So erstellen Sie den Head-Snippet

  1. 1

    Geben Sie die Seitenmetadaten ein

    Titel, Beschreibung, kanonische URL, Autor, Seitenname.

  2. 2

    Fügen Sie die URL des Social Images hinzu

    Verwendet für sowohl `og:image` als auch `twitter:image`. 1200×630 ist ideal.

  3. 3

    Wählen Sie Optionen aus

    Twitter Card-Typ, Robots-Direktiven, Farbthema, Schema.org-Typ.

  4. 4

    Kopieren Sie die Ausgabe

    Ein Block von HTML-`<meta>`-Tags, bereit zum Einfügen zwischen `<head>...</head>`.

Was der Generator produziert

<!-- Primäre Meta -->
<title>Seitentitel, Seitenname</title>
<meta name="description" content="Eine 150-Zeichen-Zusammenfassung des Seiteninhalts.">
<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="Seitentitel">
<meta property="og:description" content="Gleiche Beschreibung oder eine sozial optimierte">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Seitenname">

<!-- 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="Seitentitel">
<meta name="twitter:description" content="Beschreibung">
<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">

Feld-für-Feld-Anleitung

  • Titel: 50–60 Zeichen. Einschließlich des Hauptkeywords. Setzen Sie die Marke ans Ende: Seitentitel, Marke.
  • Beschreibung: 140–160 Zeichen. Lässt sich gut isoliert lesen. Vermeiden Sie Standardtexte, die sich über Seiten wiederholen.
  • Kanonisch: absolute URL, einschließlich https://. Entspricht og:url.
  • OG-Bild: mindestens 1200×630 px (das von Facebook bevorzugte Verhältnis 1.91:1). JPG oder PNG. Unter 8 MB.
  • Twitter Card: summary_large_image, wenn Sie ein gutes Bild haben; summary für kleines Thumbnail.
  • Robots: index, follow für öffentliche Seiten; noindex, nofollow für Staging oder dünne Inhalte.

Optionale Extras

  • JSON-LD für Artikel oder Produkt ermöglicht es Google, reichhaltige Ergebnisse anzuzeigen (Autor, Veröffentlichungsdatum, Preis, Bewertungssterne).
  • theme-color färbt den Browser-Chrome in Android Chrome und iOS Safari.
  • og:locale für mehrsprachige Seiten (z. B. en_US, es_ES).
  • og:type=article Extras: article:published_time, article:author, article:section, article:tag.

Häufige Fehler, die dieser Generator verhindert

  • Viewport-Tag vergessen. Ihre Seite wird in Desktop-Breite auf Mobilgeräten angezeigt, Zoomstufe 0.3.
  • Unterschiedliche Titel in <title>, og:title und twitter:title. Inkonsistente Share-Karten.
  • Relative Bild-URLs in og:image. Facebook kann sie nicht auflösen; Karte wird nicht gerendert.
  • Fehlendes og:type. Standardwerte funktionieren, aber Facebook ist mit einem expliziten Wert zufriedener.

Häufig gestellte Fragen

Technisch gesehen fällt Twitter auf Open Graph zurück, wenn seine eigenen Tags fehlen. Wenn Sie also nur OG festlegen, wird Twitter dennoch eine Karte rendern. Das Hinzufügen von Twitter-spezifischen Tags ermöglicht es Ihnen, das Erlebnis anzupassen (z. B. unterschiedliche Bildseitenverhältnisse).

1200×630 px (1.91:1). Facebook und LinkedIn zeigen dies in voller Größe an; Twitter schneidet es für die Zusammenfassungs-Karte zu. Platzieren Sie keine kritischen Inhalte an den Rändern, die mittleren 60 % sind die sichere Zone.

Nein. Seiten ranken auch ohne es gut. JSON-LD ermöglicht Funktionen für reichhaltige Ergebnisse (Rezeptkarten, FAQ-Akkordeons, Produktlisten), wenn der Inhaltstyp mit einem Schema.org-Schema übereinstimmt. Fügen Sie es dort hinzu, wo es passt.

Zwischen <head> und </head> in Ihrem HTML, vor externen Stylesheets oder Skripten, die den Parser daran hindern könnten, sie zu erreichen.

Nein. Alles wird lokal in Ihrem Browser generiert.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Farbrad-Explorer

Erforschen Sie das Farbrad interaktiv. Rotieren Sie Harmonien, vergleichen Sie HSL mit RYB, erkennen Sie komplementäre und triadische Paare in Echtzeit.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

CSS-Scrollbar-Generator

Passen Sie das Erscheinungsbild der Bildlaufleiste per CSS an. Modernes scrollbar-color / scrollbar-width und das ältere ::-webkit-scrollbar für breite Browser-Unterstützung.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Tool in anderen Sprachen verfügbar