Metatag-Generator.com

SERP Vorschau

example.com

Das ist ein Beispieltitel.

Das ist eine Beispielbeschreibung.

Metadaten

-1 / 580px

0 / 70

-1 / 920px

0 / 160

Ausgabe

Die Metatags müssen in den<head>...</head>rein kopiert werden.

<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> <meta name="title" content=""> <meta name="description" content=""> <meta property="og:type" content="website"> <meta property="og:title" content=""> <meta property="og:description" content=""> <meta property="og:url" content=""> <meta property="og:image" content=""> <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:title" content=""> <meta property="twitter:description" content=""> <meta property="twitter:url" content=""> <meta property="twitter:image" content="">

Was sind die wichtigsten Meta Tags?


Inhalt

Erst mal. Was sind überhaupt Meta Tags?

HTMLMeta Tags sind versteckte für den User und befinden sich im<head>...</head>Tag einer Webseite. Meta Tags sind dafür da, den Inhalt einer Webseite zu beschreiben, sodass Suchmaschinen ihn in den Suchergebnissen präsentieren können.

Hier sind diewichtigsten Meta Tagsnach Priorität fürSuchmaschinenoptimierung(SEO) sortiert beschrieben:

1. Title Tag

<title>Hier kommt dein Titel rein.</title>

Der Titel Tag ist das Erste, was ein User in den Suchergebnissen von ihrer Webseite sieht, deswegen ist er der wichtigste Tag für Suchmaschinenoptimierung (SEO).

So sieht der optimale Titel Tag aus:

  • • Sollte nicht länger als70 Zeichensein.
  • • Maximal580 pixelsonst wird der Titel auf Desktops abgeschnitten.
  • • Primärkeyword muss am Anfang stehen.
  • • Füg Zahlen hinzu z.B. "Die5wichtigsten Keywörter fürSEOin 2021."
  • • Benutze nicht zu viele Keywörter. (Keyword stuffing)
  • • Jede Seite sollte ein einzigartigen Titel haben.

2. Meta Description

<meta name="description" content="Hier kommt deine Meta Beschreibung rein." />

Die Beschreibung wird von Suchmaschinen wie Google zwar nicht mehr fürSuchmaschinenoptimierung (SEO)verwendet, ist aber dennoch wichtig für die Webpräsenz. Der Inhalt voncontent="..."wird in den Suchergebnissen direkt unter dem Titel angezeigt.

So sieht die optimale Meta Beschreibung aus:

  • • Sollte nicht länger als160 Zeichensein.
  • • Maximal920 pixelbreit für Desktops und680 pixelfür Smartphones, sonst wird der Text abgeschnitten.
  • • Keywörter von dem Titel müssen enthalten sein.
  • • Genau Beschreiben, was man von der Webseite zu erwarten hat.
  • KeineAufforderung wie: "Kaufen sie jetzt!". (Call-to-action)

3. Alt Text für Bilder

<img src="..." alt="Hier kommt die Bildbeschreibung rein." />

Das Alt-Tag ist für alle Bilder wichtig, da Suchmaschinen nicht alle Bilder lesen können. Daher muss jeder<img />Tag ein Alt-Text haben, damit die Suchmaschine das Bild lesen kann.

So sieht die optimale Bildbeschreibung aus:

  • • Maximal50 Zeichenlang.
  • • Kurzer und beschreibener Text, das man direkt verstehen kann, um was es sich auf dem Bild handelt.
  • • Die Datei Größe von Bildern sollte so klein wie möglich sein.

4. Open Graph Tags und Twitter Cards

Wenn jemand deine Webseite auf Facebook, Twitter und co. verlinkt, geben die Plattformen eine Möglichkeit, den Link "schön" darzustellen.

Open Graph Tags:

<meta property="og:type" content="website" />
<meta property="og:title" content="Der Titel von deiner Webseite" />
<meta property="og:description" content="Die Beschreibung von deiner Webseite" />
<meta property="og:image" content="Ein Vorschau Bild als Url" />
<meta property="og:url" content="Die Url deiner Webseite" />

Twitter Cards:

<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Der Titel von deiner Webseite" />
<meta property="twitter:description" content="Die Beschreibung von deiner Webseite" />
<meta property="twitter:image" content="Ein Vorschau Bild als Url" />
<meta property="twitter:url" content="Die Url deiner Webseite" />

5. Meta-Charset

<meta charset="UTF-8" />

Der Meta-Charset-Tag setzt die Codierung für eine Webseite fest. Er beschreibt, wie der Browser die Webseite anzeigen soll, damit zum Beispiel Umlaute richtig dargestellt werden.

6. Meta-Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Der Meta-Viewport beschreibt, wie der sichtbare Bereich einer Webseite dargestellt werden soll. Er wird dafür genutzt, um dem Browser zu mitzuteilen, wie eine Seite für verschiedene Bildschirmgrößen aussehen soll.