Was sind HTML-Meta-Tags?

HTML-Meta-Tags sind Elemente im -Bereich, die Metadaten über die Seite bereitstellen. Sie werden von Suchmaschinen, Social-Media-Plattformen und Browsern gelesen.

Open Graph (OG) ist ein von Facebook entwickeltes Protokoll, das Webseiten zu reichen Objekten macht, wenn sie in sozialen Medien geteilt werden.

Was sind Twitter Cards?

Twitter Cards ermöglichen es, reiche Medienerfahrungen an Tweets anzuhängen. Der Typ summary_large_image ist am beliebtesten.

Was ist eine kanonische URL?

Eine kanonische URL gibt die bevorzugte Version einer Seite an, wenn mehrere URLs auf denselben Inhalt verweisen.

Wie lang sollten mein Meta-Titel und meine Beschreibung sein?

Der Meta-Titel sollte unter 60 Zeichen bleiben. Die Meta-Beschreibung sollte 120-155 Zeichen lang sein.

Meta-Tags-Generator

Erzeugt HTML-Meta-Tags für SEO, Open Graph und Twitter Cards.

Titel

18/60

Autor

Beschreibung

50/155

Schlüsselwörter

Robots

Canonical-URL

OG-Bild-URL

Twitter-Kartentyp

Social-Media-Vorschau

OG Image: https://example.com/og-image.png

https://example.com/page

My Awesome Website

A short description of this page for SEO purposes.

Erzeugtes HTML

<!-- Primary Meta Tags -->
<title>My Awesome Website</title>
<meta name="title" content="My Awesome Website" />
<meta name="description" content="A short description of this page for SEO purposes." />
<meta name="keywords" content="web, tools, free" />
<meta name="author" content="Author Name" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="My Awesome Website" />
<meta property="og:description" content="A short description of this page for SEO purposes." />
<meta property="og:image" content="https://example.com/og-image.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://example.com/page" />
<meta property="twitter:title" content="My Awesome Website" />
<meta property="twitter:description" content="A short description of this page for SEO purposes." />
<meta property="twitter:image" content="https://example.com/og-image.png" />

Über dieses Tool

Meta-Tags sind unsichtbare Anweisungen, die Sie zum HTML Ihrer Website hinzufügen, um Suchmaschinen, Social-Media-Plattformen und Browsern mitzuteilen, worum es auf Ihrer Seite geht. Sie kontrollieren, wie Ihre Website in Google-Suchergebnissen erscheint und wie sie aussieht, wenn jemand Ihren Link auf Facebook, Twitter oder LinkedIn teilt. Ohne geeignete Meta-Tags können Suchmaschinen Ihren Inhalt missverstehen, und Ihre Links sehen bei der Freigabe in sozialen Medien unscheinbar aus.

Dieser Meta-Tags-Generator ermöglicht es Ihnen, schnell alle wichtigen Meta-Tags zu erstellen, die Ihre Website benötigt: Titel, Beschreibung, Schlüsselwörter, Autor, Robot-Anweisungen und kanonische URLs. Er generiert auch Open-Graph-Tags zur Kontrolle der Darstellung Ihrer Seite in sozialen Medien und Twitter Cards zur Verbesserung von Tweets. Füllen Sie einfach Ihre Seiteninformationen ein, kopieren Sie den generierten HTML-Code und fügen Sie ihn in den <head>-Bereich Ihrer Seite ein. Die Live-Vorschau zeigt genau, wie Ihre Seite aussieht, wenn sie auf sozialen Plattformen geteilt wird.

Webentwickler, Content-Ersteller und SEO-Spezialisten nutzen dieses Tool, um ihren Arbeitsablauf zu optimieren und Syntaxfehler zu vermeiden. Ob Sie einen neuen Blog starten, eine E-Commerce-Produktseite optimieren oder sicherstellen, dass doppelte Inhalte Ihr Ranking nicht beeinträchtigen, dieser Generator spart Zeit und gewährleistet Konsistenz auf Ihrer gesamten Website.

Häufig gestellte Fragen

Code-Implementierung

def generate_meta_tags(
    title: str,
    description: str,
    url: str,
    image: str = "",
    site_name: str = "",
    twitter_handle: str = "",
    locale: str = "en_US",
) -> str:
    lines = []
    lines.append(f'<title>{title}</title>')
    lines.append(f'<meta name="description" content="{description}">')
    # Open Graph
    lines.append(f'<meta property="og:title" content="{title}">')
    lines.append(f'<meta property="og:description" content="{description}">')
    lines.append(f'<meta property="og:url" content="{url}">')
    lines.append(f'<meta property="og:type" content="website">')
    lines.append(f'<meta property="og:locale" content="{locale}">')
    if site_name:
        lines.append(f'<meta property="og:site_name" content="{site_name}">')
    if image:
        lines.append(f'<meta property="og:image" content="{image}">')
        lines.append(f'<meta property="og:image:width" content="1200">')
        lines.append(f'<meta property="og:image:height" content="630">')
    # Twitter Card
    card = "summary_large_image" if image else "summary"
    lines.append(f'<meta name="twitter:card" content="{card}">')
    lines.append(f'<meta name="twitter:title" content="{title}">')
    lines.append(f'<meta name="twitter:description" content="{description}">')
    if twitter_handle:
        lines.append(f'<meta name="twitter:site" content="{twitter_handle}">')
    if image:
        lines.append(f'<meta name="twitter:image" content="{image}">')
    return "\n".join(lines)

print(generate_meta_tags(
    title="My Page",
    description="A great page.",
    url="https://example.com",
    image="https://example.com/og.png",
    site_name="Example",
    twitter_handle="@example",
))

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.