Erzeuge SEO-Meta-Tags, Open-Graph-Eigenschaften und Twitter-Card-Markup aus einem Formular. Beinhaltet canonical-Link und live Längenprüfung für Titel und Beschreibung.
Erzeuge SEO-, Open-Graph- und Twitter-Card-Tags aus einem Formular. Fülle die Felder einmal aus und erhalte den vollständigen <head>-Block. Titel- und Beschreibungslänge werden live gegen die Grenzen geprüft, die Suchmaschinen vor dem Kürzen verwenden.
Die meisten Meta-Tags, die du in alten Tutorials findest, werden ignoriert. Diejenigen, die noch beeinflussen, was Nutzer sehen, sind wenige:
<title> — das wichtigste On-Page-Element überhaupt. Es wird die klickbare Überschrift in Suchergebnissen und das Browser-Tab-Label.<meta name="description"> — kein Ranking-Faktor, aber es wird meist zum Schnipsel unter dem Titel, beeinflusst also direkt die Klickrate.<link rel="canonical"> — sagt Suchmaschinen, welche URL die maßgebliche Version ist, wenn derselbe Inhalt über mehrere Adressen erreichbar ist.Bemerkenswert abwesend ist <meta name="keywords">. Google bestätigte, dass es den Tag nach Jahren des Missbrauchs 2009 für das Ranking nicht mehr verwendet. Er ist hier nur enthalten, weil noch einige interne Suchsysteme ihn lesen.
Suchmaschinen kürzen Titel und Beschreibungen, um eine feste Pixelbreite zu füllen, sodass ein Titel aus schmalen Zeichen mehr Text fasst als einer voller Großbuchstaben. Zeichenzählungen sind eine praktische Näherung: etwa 60 Zeichen für einen Titel und 160 für eine Beschreibung halten dich meist innerhalb des Desktop-Limits. Mobile Ergebnisse sind noch schmaler.
Über dem Limit zu liegen ist kein Fehler. Die Beschreibung ist ein Schnipsel, kein Vertrag, und Suchmaschinen schreiben sie ohnehin routinemäßig um, wenn eine andere Passage besser zur Abfrage passt. Stelle die wichtigen Wörter voran, damit die Bedeutung das Kürzen überlebt.
Open Graph stammt von Facebook, ist aber jetzt der de-facto-Standard, den LinkedIn, Slack, Discord, WhatsApp, iMessage und die meisten anderen Plattformen lesen. Vier Eigenschaften erledigen fast die ganze Arbeit: og:title, og:description, og:url und og:image.
Twitters Parser fällt auf Open Graph zurück, wenn seine eigenen Tags fehlen, sodass ein vollständiger Satz twitter:*-Eigenschaften nur nötig ist, wenn du auf dieser einen Plattform einen anderen Titel, eine andere Beschreibung oder ein anderes Bild willst. Der Tag, der explizit gesetzt werden sollte, ist twitter:card, der zwischen dem großen Hero-Bild-Layout und der kompakten Miniatur wählt.
Hier scheitern die meisten Implementierungen. Verwende eine absolute URL — relative Pfade brechen bei jedem Crawler. Strebe 1200 mal 630 Pixel an, das 1,91:1-Verhältnis, das die große Karte ohne Zuschnitt füllt. Halte die Datei unter etwa 1 MB, verwende JPEG oder PNG, und stelle sicher, dass die URL öffentlich ohne Authentifizierung, Cookies oder eine Redirect-Kette erreichbar ist. Text auf dem Bild sollte groß sein, da die Karte oft in einem Bruchteil ihrer natürlichen Größe angezeigt wird.
Jede große Plattform cached die Vorschau aggressiv, oft über Tage. Nach dem Aktualisieren deiner Tags wird die alte Karte weiter erscheinen, bis der Cache abläuft oder du über das Debugging-Werkzeug der Plattform ein Refresh erzwingst. Facebook, LinkedIn und Twitter bieten jeweils eines an. Wenn die Vorschau nach einem Refresh noch falsch aussieht, prüfe, ob der Crawler die Seite überhaupt erreichen kann: eine Login-Wand, ein robots.txt-Block oder geografisch beschränkter Inhalt erzeugen alle eine leere Karte.