Meta Tag Generator

Über GeekFormat

Eingabeparameter

Seitentitel30 Zeichen

Meta-Beschreibung87 Zeichen

Schlüsselwörter

Autor

Kanonische URL

Seitenname (og:site_name)

OG-Bild-URL

OG-Typ

Robots

Twitter-Card-Typ

Twitter-@-Handle

Designfarbe

Generierte Tags

<!-- Primary Meta Tags -->
<title>GeekFormat - Developer Toolbox</title>
<meta name="title" content="GeekFormat - Developer Toolbox">
<meta name="description" content="One page, one utility. Fast and privacy-friendly tools for developers and growth teams.">
<meta name="keywords" content="online tools,developer tools,pdf tools,network tools">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://geekformat.com/tools">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://geekformat.com/tools">
<meta property="og:title" content="GeekFormat - Developer Toolbox">
<meta property="og:description" content="One page, one utility. Fast and privacy-friendly tools for developers and growth teams.">
<meta property="og:image" content="https://geekformat.com/og-cover.png">
<meta property="og:site_name" content="GeekFormat">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="GeekFormat - Developer Toolbox">
<meta name="twitter:description" content="One page, one utility. Fast and privacy-friendly tools for developers and growth teams.">
<meta name="twitter:image" content="https://geekformat.com/og-cover.png">

Browser-basiertes Meta-Tag-Generierungstool zur Erstellung von title, description, keywords, canonical, Open Graph, Twitter Card, robots und anderen Tags, automatisches HTML-Entity-Escaping, Echtzeit-Zeichenlängenhinweise mit Farbanzeige, Ein-Klick-Kopieren und Download.

Anwendungsfälle

Vor dem Launch einer neuen Website Massenerstellung vollständiger Meta-Tags für Startseite, Listenseiten, Detailseiten, schnelle Durchführung der grundlegenden SEO-Konfiguration
Vor der Veröffentlichung von Blog-Artikeln Konfiguration von Open Graph-Tags vom Typ article und Twitter Cards vom Typ summary_large_image zur Verbesserung des Sharing-Effekts auf sozialen Plattformen
E-Commerce-Produktseiten konfigurieren og:type product, setzen strukturierte Informationen wie og:image, og:price:amount, optimieren die Produktanzeige auf sozialen Plattformen
Nach einem Website-Relaunch oder Domainwechsel Neuerstellung des canonical-Tags, einheitliche Standardisierung von URLs um Gewichtsverteilung durch doppelten Inhalt zu vermeiden
Konfiguration der theme-color für mobile Webseiten, damit die Adressleiste von Chrome, Safari auf Mobilgeräten mit der Markenfarbe übereinstimmt
Bei der Entwicklung mit SSR/SSG-Frameworks wie Next.js, Nuxt.js, Gatsby schnelle Generierung des vollständigen Meta-Tag-Codes für die head-Konfiguration
In CMS-Systemen wie WordPress, Shopify manuelle Konfiguration von Meta-Tags für benutzerdefinierte Seitenvorlagen ohne Abhängigkeit von SEO-Plugins
Bei der Fehlerbehebung von Website-Indexierungsproblemen schnelle Generierung korrekter robots meta-Tag-Kombinationen (z.B. noindex,nofollow für Testumgebungen)
Social-Media-Manager konfigurieren Share-Cards für Kampagnen-Landingpages, stellen sicher dass die Vorschau beim Teilen auf Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, Discord korrekt ist
Frontend-Entwickler beim Erstellen von HTML-Seitenvorlagen automatisches Entity-Escaping von Meta-Tags, vermeiden HTML-Syntaxfehler durch Sonderzeichen

Anleitung

Füllen Sie im Bereich「Basis-SEO-Tags」den Seitentitel title (empfohlen 50-60 Zeichen), meta description (Beschreibung, empfohlen 120-160 Zeichen), keywords (Schlüsselwörter, kommagetrennt), canonical URL (kanonischer Link), author (Autor) aus
Wählen Sie im Bereich「robots-Crawler-Anweisungen」die passenden Indexierungs- und Verfolgungsregeln: index/noindex (ob indexiert wird), follow/nofollow (ob Links verfolgt werden), zusätzlich können noarchive, nosnippet und weitere Optionen angehakt werden
Geben Sie im Bereich「Themenfarbe-Einstellung」den hexadezimalen Farbwert für theme-color ein oder wählen Sie ihn aus, der zum Einfärben der Adressleiste des mobilen Browsers verwendet wird
Wechseln Sie zum Bereich「Open Graph-Tags」, wählen Sie og:type (eine von vier Optionen: website/article/product/profile), füllen Sie og:title, og:description, og:image (Share-Bild-URL, empfohlen 1200×630 Pixel), og:url, og:site_name, og:locale aus
Wechseln Sie zum Bereich「Twitter Card-Tags」, wählen Sie den twitter:card-Typ (eine von vier Optionen: summary/summary_large_image/app/player), füllen Sie twitter:site @-Account, twitter:title, twitter:description, twitter:image aus
Beobachten Sie während der gesamten Eingabe den rechten Echtzeit-Vorschaubereich und die Farbanzeige der Zeichenzählung: Grün bedeutet optimale Länge, Orange bedeutet nahe am Grenzwert, Grau bedeutet zu kurz oder zu lang und muss angepasst werden
Nach Bestätigung der Korrektheit der Tags klicken Sie auf die Schaltfläche「In Zwischenablage kopieren」um den gesamten Code in einem Schritt zu kopieren und in den HTML-head-Bereich einzufügen, oder klicken Sie auf「HTML-Datei herunterladen」um als meta-tags.html zur späteren Verwendung zu speichern

Funktionen

Automatisches HTML-Entity-Escaping: Sicheres Escaping der fünf Sonderzeichen &, <, >, ", ', um Syntaxfehler in generierten Tags im HTML zu vermeiden
Intelligente Hinweise zur title-Länge: Im Bereich von 50-60 Zeichen wird grün angezeigt (optimal), bei Über- oder Unterschreitung orange/graue Statusanzeige, Echtzeit-Zeichenzählung
Intelligente Hinweise zur meta description-Länge: Im Bereich von 120-160 Zeichen wird grün angezeigt (optimaler Anzeigebereich), bei Über- oder Unterschreitung ändert sich die Farbanzeige in Echtzeit
Unterstützt 4 og:type-Optionen: website (allgemeine Website), article (Artikel/Blog), product (Produktseite), profile (Profilseite), passend zu verschiedenen Seitentypen
Unterstützt 4 twitter:card-Typen: summary (Kleines Bild Zusammenfassung), summary_large_image (Großes Bild Zusammenfassung), app (App-Karte), player (Video/Player-Karte)
Robots-Anweisungen-Kombinationskonfiguration: Unterstützt freie Kombination verschiedener Crawler-Anweisungen wie index/noindex, follow/nofollow, noarchive, nosnippet, noimageindex
Autor-Meta-Tag author: Unterstützt die Konfiguration von Autorennamen-Tags wie content-author, article:author, geeignet für Blogs und Nachrichtenseiten
Theme-Farbkonfiguration theme-color: Unterstützt das Festlegen der Browser-Adressleisten-Farbe für mobile Endgeräte, bietet Farbwähler und Farbwerteingabe
og:site_name Seitenname-Konfiguration: Spezielles Festlegen des Seitennamen-Feldes im Open Graph-Protokoll, korrekte Anzeige des Websitenamens beim Social Sharing
twitter:site @-Account-Konfiguration: Unterstützt das Ausfüllen des offiziellen @handle-Accounts auf der Twitter/X-Plattform, Verknüpfung von Share-Cards mit dem offiziellen Account
Strukturierte Ausgabe in drei Bereichen: Zeigt generierte Ergebnisse in drei übersichtlichen Bereichen an: Primary SEO, Open Graph, Twitter Card, Struktur auf einen Blick
Ein-Klick-Kopieren in die Zwischenablage: Generierter Code kann mit einem Klick kopiert werden, keine manuelle Auswahl erforderlich, kompatibel mit verschiedenen Browserumgebungen
Download als meta-tags.html: Generierte Tags können vollständig als eigenständige HTML-Datei heruntergeladen werden, bequem zum Speichern oder direkten Import in Projekte
Echtzeit-Generierung und -Vorschau: Bei Eingabe werden sofort Tag-Code generiert, gleichzeitig Vorschau des SERP-Suchergebnisanzeige-Effekts und des Social-Share-Card-Stils

Häufig gestellte Fragen

Kann der vom Meta Tag Generator generierte Code direkt in die Website kopiert werden? Muss er geändert werden?

Kann direkt kopiert und verwendet werden. Der von diesem Tool generierte Code sind standardformatige HTML Meta-Tags, HTML-Entity-Escaping wurde automatisch durchgeführt, direkt zwischen <head> und </head> Ihrer Webseite einfügen. Sie müssen nur sicherstellen dass die ausgefüllten URLs (canonical, og:image, og:url, twitter:image) echte Online-Adressen Ihrer Website sind, keine Beispiel-Platzhalter. Wenn Sie Head-Management-Lösungen von Frameworks wie Next.js, Nuxt.js, React Helmet, Vue Meta verwenden, sind möglicherweise geringfügige Anpassungen gemäß der JSX/Vue-Template-Syntax des Frameworks erforderlich, aber Tag-Attribute und -Werte können vollständig wiederverwendet werden.

Warum muss das og:image-Bild ausgefüllt werden? Was passiert ohne Bild?

og:image beeinflusst direkt den visuellen Effekt und die Klickrate von Social-Share-Karten. Wenn Links ohne og:image auf Plattformen wie Facebook, Twitter, LinkedIn, WeChat geteilt werden, wird entweder ein nackter Textlink ohne Bildvorschau angezeigt, oder die Plattform wählt zufällig ein kleines Bild von der Seite aus (kann Logo, Avatar, Werbebild oder sogar ein irrelevantes Bild sein), der Anzeigeeffekt ist extrem schlecht, die Klickrate ist normalerweise um über 50% niedriger als bei Shares mit korrektem Vorschaubild. Empfohlene Größe für og:image ist 1200×630 Pixel (1.91:1-Verhältnis), muss eine öffentlich zugängliche absolute URL sein, Dateigröße nicht über 5MB.

Müssen sowohl Open Graph als auch Twitter Card-Tags konfiguriert werden? Reicht es nur OG zu konfigurieren?

Die Twitter/X-Plattform liest tatsächlich Open Graph-Tags als Fallback – wenn Sie keine Tags mit twitter:-Präfix konfigurieren, versucht Twitter og:title, og:description, og:image zur Generierung der Karte zu verwenden. Aber die spezielle Konfiguration von Twitter Card hat mehrere Vorteile: ①Sie können den am besten geeigneten twitter:card-Typ wählen (insbesondere den großen Bildtyp summary_large_image, mit OG wird möglicherweise nicht standardmäßig der Großbildstil verwendet); ②Sie können twitter:site setzen um Ihren offiziellen Twitter-Account zu verknüpfen und die Follower-Conversion zu erhöhen; ③Sie können Titel und Beschreibungslänge separat für Twitter optimieren und von OG unterscheiden. Es wird empfohlen beide zu konfigurieren, dieses Tool unterstützt die gleichzeitige Generierung, der Arbeitsaufwand ist fast gleich.

Welche Folgen hat es wenn die Länge von title und meta description den empfohlenen Bereich überschreitet? Wird das bestraft?

Überschreitung der Länge wird nicht von Suchmaschinen bestraft, aber wird abgeschnitten. In Google-Suchergebnissen wird der Teil von title der über ca. 600 Pixel Breite (ca. 50-60 chinesische Zeichen) überschreitet durch Auslassungszeichen abgeschnitten, Benutzer können den vollständigen Titel nicht sehen; meta description die über ca. 920 Pixel Breite (ca. 120-160 chinesische Zeichen) überschreitet wird ebenfalls abgeschnitten. Das Problem bei zu kurzer Länge ist dass wertvoller Anzeigeraum verschwendet wird und der Seitenwert nicht vollständig vermittelt und Klicks angelockt werden können. Beachten Sie dass dies keine genaue Zeichenbegrenzung ist, sondern eine Pixelbreitenbegrenzung – Vollbreitzeichen, große englische Buchstaben, breite Buchstaben wie W/M, Emoji beanspruchen mehr Breite, die tatsächliche Anzeige kann früher abgeschnitten werden als es die Zeichenanzahl vermuten lässt. Die Farbanzeige dieses Tools ist eine Best-Practice-Referenz basierend auf der Zeichenanzahl.

Was bedeutet HTML-Entity-Escaping? Warum macht das Tool das automatisch?

In HTML haben bestimmte Zeichen besondere syntaktische Bedeutungen, wenn sie direkt in Attributwerten geschrieben werden zerstören sie die HTML-Struktur: Doppelte Anführungszeichen " sind das Ende von Attributwerten, direktes Schreiben führt zum vorzeitigen Schließen von Tags; & ist das Startzeichen für Entity-Escaping; < und > sind Tag-Anfang und -Ende. Diese Zeichen müssen in Entity-Form geschrieben werden um korrekt angezeigt zu werden: & → &, < → <, > → >, " → ", ' → '. Wenn Ihr title oder Ihre Sonderzeichen wie &, Anführungszeichen, spitze Klammern enthält und ohne Escaping direkt geschrieben wird, führt dies zu HTML-Syntaxfehlern, wodurch alle nachfolgenden Tags möglicherweise ungültig werden. Dieses Tool verarbeitet dieses Escaping automatisch, Sie geben einfach Originaltext ein, kein manuelles Escaping erforderlich.

Warum können Facebook/Twitter-Crawler die Meta-Tags meiner mit React/Vue geschriebenen Seite nicht erfassen?

Weil moderne Frontend-Frameworks wie React, Vue, Angular standardmäßig Client-Rendering (CSR) sind – der HTML-Quelltext ist leer oder hat nur einen Container-div, Meta-Tags werden dynamisch in das DOM eingefügt nachdem der Browser JavaScript ausgeführt hat. Aber die Crawler der meisten sozialen Plattformen wie Facebooks Crawler facebookexternalhit, Twitterbot, LinkedInBot, WeChat-Crawler führen kein JavaScript aus (oder haben sehr begrenzte Ausführungsfähigkeit), im ursprünglichen HTML das sie erfassen sind keine Meta-Tags, natürlich können sie keine Share-Karten generieren. Lösungen: ①Verwenden Sie SSR (Server-Side Rendering) oder SSG (Static Site Generation), wie Frameworks wie Next.js, Nuxt.js, Gatsby, Astro, die vollständige Meta-Tags serverseitig in den HTML-Quelltext rendern; ②Verwenden Sie Prerendering-Dienste wie prerender.io, Rendertron um Crawlern statisches HTML zurückzugeben; ③Verwenden Sie spezielle OG-Bildgenerierungsdienste um Tags dynamisch zu generieren.

Sollten canonical und og:url derselben Seite gleich ausgefüllt werden?

Ja, sie sollten übereinstimmen. Der canonical-Tag ist für Suchmaschinen gedacht und teilt Suchmaschinen die bevorzugte URL mit; og:url ist für soziale Plattformen gedacht und teilt sozialen Plattformen die eindeutige URL dieses Inhalts zum Aggregieren von Likes, Kommentaren, Share-Zählungen mit. Dass beide auf dieselbe URL verweisen ist Best Practice und kann Gewichtsverteilung und soziale Zählungsfragmentierung vermeiden. Beachten Sie dass es sich um vollständige absolute URLs handeln muss (mit https://, Domain, vollständigem Pfad), keine relativen Pfade. Wenn URLs UTM-Parameter, Tracking-Parameter haben, sollten canonical und og:url beide auf die saubere URL ohne Parameter verweisen.

Werden Links auf noindex-Seiten noch von Crawlern gecrawlt? Wird Gewichtung weitergegeben?

noindex bedeutet「Diese Seite nicht indexieren」, nicht「Nicht crawlen」und auch nicht「Keine Links verfolgen」. Crawler crawlen noindex-Seiten trotzdem (nur so können sie das noindex-Tag sehen), wenn robots meta gleichzeitig follow gesetzt ist (standardmäßig ist follow), verfolgen Crawler weiterhin Links auf der Seite. Aber zur Gewichtungsweitergabe: Googles offizielle Aussage ist dass noindex-Seiten letztendlich aus dem Index entfernt werden und die Linkgewichtung auf der Seite auch nicht normal weitergegeben wird (da die Seite selbst nicht indexiert ist). Wenn Sie also möchten dass Crawler über eine bestimmte Seite zu anderen Seiten gelangen aber nicht möchten dass die Seite selbst indexiert wird, ist noindex,follow in Ordnung, aber erwarten Sie nicht dass noindex-Seiten Gewichtung wie normale Seiten weitergeben.

In welchen Browsern wirkt theme-color? Unterstützt iOS Safari es?

Aktuelle Unterstützung von theme-color: Chrome/Firefox/Edge/Brave und andere Chromium-basierte Browser auf Android unterstützen es schon sehr früh, der Effekt ist am deutlichsten; Safari unterstützt theme-color ab iOS 15 und macOS Monterey, aber Safaris Implementierung ist etwas anders – es passt sich automatisch an die Seitenhintergrundfarbe an und unterstützt auch die Verwendung des media-Attributs um separate Farben für Hell-/Dunkelmodus zu setzen. Desktop-Chrome wendet theme-color ab einer bestimmten Version auch an Stellen wie der Tableiste an. IE und alte Browser unterstützen es nicht, aber das macht nichts, es gibt nur keinen Themenfarbeeffekt und beeinträchtigt keine Funktionen. Es wird empfohlen die Themenfarbe auf die Farbe der Header/Navigationsleiste Ihrer Website einzustellen, dies ist visuell einheitlicher.

Warum zeigt Google in Suchergebnissen manchmal nicht die description an die ich geschrieben habe?

Google garantiert nicht 100% die von Ihnen geschriebene meta description zu verwenden. Wenn Google beurteilt dass Ihre geschriebene description nicht zur Suchanfrage des Benutzers passt, oder die Qualität der description nicht hoch ist (z.B. Schlüsselwort-Stuffing, für die gesamte Website gleich, nicht mit dem Inhalt übereinstimmend), extrahiert Google automatisch einen Textabschnitt aus dem Seiteninhalt den es für am relevantesten zum Suchbegriff hält als Beschreibung für das Suchergebnis. Dies ist normales Verhalten von Google, kein Bug. Um die Wahrscheinlichkeit zu erhöhen dass description verwendet wird: ①Schreiben Sie für jede Seite einzigartige, den Inhalt genau beschreibende description; ②description enthält auf natürliche Weise die Kernschlüsselwörter der Seite aber kein Stuffing; ③Länge in einem angemessenen Bereich halten nicht zu kurz; ④description-Inhalt ist tatsächlich im Hauptinhalt der Seite vorhanden. Auch wenn Google manchmal umschreibt, sollten Sie trotzdem description sorgfältig schreiben – dies ist Ihr Hauptmittel um den Anzeigeeffekt aktiv zu steuern.

Wie überprüfe ich nach der Konfiguration der Tags ob sie korrekt wirksam sind? Welche Prüfwerkzeuge gibt es?

Zur Überprüfung von Meta-Tags gibt es mehrere Schritte und Werkzeuge: ①Zuerst verwenden Sie im Browser「Webseitenquelltext anzeigen」, suchen Sie im ursprünglichen HTML-Quelltext nach Tags wie title, description, og: ob sie existieren und der Inhalt korrekt ist (beachten Sie Quelltext nicht das Elements-Panel, da Quelltext vom Server zurückgegeben wird, bei CSR ist im Quelltext nichts sichtbar); ②Verwenden Sie Facebook Sharing Debugger um OG-Tags zu überprüfen und den Cache zu aktualisieren; ③Verwenden Sie Twitter Card Validator um Twitter Card zu überprüfen; ④Verwenden Sie Google Rich Results Test um grundlegende Tags zu prüfen; ⑤Verwenden Sie das Tool「URL-Prüfung」in der Google Search Console um die von Google tatsächlich erfasste Seite und den Indexstatus anzuzeigen; ⑥Bei lokalen Tests können Sie mit User-Agent Switcher des Browsers Social-Media-Crawler simulieren, oder mit dem curl-Befehl mit Facebook-UA abrufen um zurückgegebenes HTML zu sehen.

Muss jede Seite separate Meta-Tags konfiguriert werden? Ist es in Ordnung für die gesamte Website einen Satz Tags zu verwenden?

Auf keinen Fall! Jede Seite muss einen eindeutigen title und eine eindeutige meta description haben. Wenn alle Seiten der gesamten Website denselben title und dieselbe description verwenden, können Suchmaschinen die Inhaltsthemen verschiedener Seiten nicht unterscheiden: ①Suchmaschinen wissen nicht worum es auf jeder Seite geht und können nicht korrekt ranken; ②In Suchergebnissen werden alle Seiten mit gleichem Titel und gleicher Beschreibung angezeigt, Benutzer können nicht unterscheiden auf welche sie klicken sollen, CTR ist extrem niedrig; ③Kann von Suchmaschinen als geringwertige Website eingestuft werden und die Gewichtung der gesamten Website beeinträchtigen. OG und Twitter Card-Tags sollten grundsätzlich auch pro Seite unterschiedlich sein. Nur Seitenebenen-Konfigurationen wie theme-color, og:site_name, twitter:site können für die gesamte Website einheitlich sein, andere Tags sollten separat nach Seiteninhalt konfiguriert werden.

Soll meta keywords heute noch geschrieben werden? Wie viele sind angemessen?

Große Suchmaschinen wie Google, Bing, Baidu verwenden meta keywords im Jahr 2026 alle nicht mehr als Rankingfaktor, ob Sie es schreiben, was Sie schreiben beeinflusst SEO grundsätzlich nicht. Wenn Ihr CMS oder Ihre Vorlage dieses Feld hat, nehmen Sie sich ein paar Sekunden Zeit um 3-5 Kernschlüsselwörter auszufüllen, nicht zu viel Zeit mit Schlüsselwortauswahl und -dichte verbringen. Wichtig ist: Nicht Dutzende Schlüsselwörter einfügen, nicht dasselbe Wort viele Male wiederholen, keine beliebten Wörter schreiben die nichts mit der Seite zu tun haben – obwohl keywords selbst nicht für das Ranking verwendet wird, kann zu extremes Stuffing von Suchmaschinen als Spam-Signal gewertet werden, was mehr schadet als nützt. Wenn Ihre Website kein keywords-Feld hat oder Sie zu faul zum Ausfüllen sind, ist es völlig in Ordnung es leer zu lassen, dies hat keine negativen Auswirkungen auf das Ranking.

Was ist der Unterschied zwischen robots meta-Tag und robots.txt? Welches hat höhere Priorität?

Beide haben unterschiedliche Wirkungsebenen und Mechanismen: ①robots.txt ist eine Textdatei im Website-Stammverzeichnis, die auf Website- oder Verzeichnisebene das Crawler-Verhalten steuert, z.B. teilt Disallow: /admin/ allen Crawlern mit das /admin/-Verzeichnis nicht zu crawlen; aber robots.txt ist eine「Gentleman's Agreement」, konforme Crawler werden es einhalten, und wenn auf Seiten deren Crawl verboten ist externe Links verweisen, können sie trotzdem indexiert werden nur ohne Beschreibung. ②robots meta ist ein seitenebener Tag, der im HTML-head jeder Seite platziert wird und das Verhalten einzelner Seiten wie index/noindex/follow/nofollow präzise steuern kann, hat höhere Priorität als robots.txt. ③X-Robots-Tag ist auf HTTP-Response-Header-Ebene, hat die gleiche Funktion wie robots meta wird aber über HTTP-Header zurückgegeben, kann zur Indexierungssteuerung von Nicht-HTML-Dateien (wie PDF, Bilder) verwendet werden. Um die Indexierung einer Seite vollständig zu verhindern muss noindex (meta oder X-Robots-Tag) verwendet werden, nur robots.txt Disallow kann die Indexierung nicht garantieren.

Muss nach der Generierung von Meta-Tags mit diesem Tool noch Schema.org strukturierte Daten (JSON-LD) konfiguriert werden?

Meta-Tags und Schema.org strukturierte Daten sind komplementär, kein Ersatz füreinander. Meta-Tags lösen hauptsächlich: Titelbeschreibung auf Suchmaschinen-Ergebnisseiten, Social-Plattform-Share-Karten, grundlegende Crawler-Steuerung. Schema.org strukturierte Daten (üblicherweise eingebettet als JSON-LD-Format auf der Seite) lösen: Rich-Suchergebnisse (Rich Snippets), wie Produktbewertungssterne, Preis und Lagerbestand, Breadcrumb-Navigation, Artikelveröffentlichungsdatum, FAQ-Faltblöcke, Veranstaltungszeit und -ort und andere erweiterte Anzeigen, diese können CTR weiter verbessern. Es wird empfohlen wichtige Seiten gleichzeitig zu konfigurieren: ①Grundlegende Meta-Tags (von diesem Tool generierter Inhalt); ②Schema.org strukturierte Daten passend zum Seitentyp. Beide stehen nicht im Konflikt und optimieren gemeinsam den Suchanzeigeeffekt.

Fehlerbehebung

Beim Teilen von Links auf Facebook/Twitter/LinkedIn wird kein Bild angezeigt, oder das angezeigte Bild ist nicht das eingestellte og:image

Die og:image-URL verwendet relative Pfade oder localhost/127.0.0.1/Intranet-IP, Social-Plattform-Crawler können keine öffentlichen Adressen zugreifen Das Bild wird durch robots.txt blockiert, oder Server/WAF/CDN/Firewall blockieren die Crawler-User-Agents von Facebook/Twitter (facebookexternalhit/Twitterbot/LinkedInBot) Die Bildgröße entspricht nicht den Anforderungen: og:image kleiner als 200×200 Pixel wird ignoriert, summary_large_image Bild kleiner als 300×157 wird herabgestuft Die Bilddatei ist zu groß (über 5MB-8MB) oder das Format wird nicht unterstützt (nur JPG/PNG/WebP/GIF unterstützt, SVG wird teilweise nicht unterstützt) Tags werden client-seitig dynamisch mit JavaScript gerendert, Social-Plattform-Crawler führen kein JS aus, nur SSR/SSG können erfasst werden Die og:image-URL gibt 404/403/5xx-Fehler zurück oder leitet zur Anmeldeseite/Fehlerseite weiter Die Plattform hat die alte Version ohne Bild zwischengespeichert, nach dem Ändern der Tags wurde nicht das offizielle Debugger-Tool verwendet um Scrape Again zum Cache-Update auszuführen

In Google-Suchergebnissen wird title abgeschnitten und nicht vollständig angezeigt, oder Google hat den Titel automatisch umgeschrieben

Die title-Länge überschreitet 50-60 chinesische Zeichen (oder ca. 600 Pixel Breite), der überschüssige Teil wird durch Auslassungszeichen abgeschnitten Vollbreite-Sonderzeichen, Emoji in title beanspruchen zusätzliche Breite und führen zu vorzeitigem Abschneiden, die tatsächlich angezeigte Länge ist kürzer als die Zeichenanzahl title enthält Schlüsselwort-Stuffing oder stimmt nicht mit dem Seiteninhalt überein, Google hält Ihren Titel für ungenau und extrahiert anderen Text aus dem Seiteninhalt oder Ankertext um den Titel umzuschreiben Der title jeder Seite ist wiederholt oder sehr ähnlich, Google kann die Seiten nicht unterscheiden und generiert automatisch unterschiedliche Titel title enthält nur den Markennamen ohne Seitenbeschreibung, oder der Markenname ist zu lang und nimmt zu viel Platz ein Es werden zu viele Trennzeichen wie |, -, _ verwendet, oder die Trennmethode ist nicht standardisiert, was Google zur Annahme von Trennzeichen-Stuffing führt Die Seite hat eine ungeordnete h1-h6-Überschriftenhierarchie oder mehrere h1-Tags, Google kann h1-Inhalt verwenden um title umzuschreiben

Nach der Konfiguration von Meta-Tags treten auf der Seite Zeichensalat, abnormale Anzeige von Sonderzeichen oder HTML-Syntaxfehler auf

Der canonical-Tag ist konfiguriert aber funktioniert nicht, doppelte URLs werden trotzdem indexiert, oder canonical wird von Suchmaschinen ignoriert

Die URL auf die canonical verweist gibt 404/403/5xx-Fehler zurück oder leitet zu anderen Seiten weiter, Suchmaschinen können die kanonische Version nicht zugreifen Seite A verweist canonical auf B, Seite B verweist wiederum canonical auf A (zyklisches canonical), oder A→B→C→D kettenartiges canonical verwirrt Suchmaschinen canonical verweist auf eine Seite mit stark unterschiedlichem Inhalt (nicht hochgradig doppelter/gleicher Inhalt), Suchmaschinen halten die canonical-Einstellung für falsch und ignorieren sie canonical verwendet relative Pfade (z.B. href="/page") statt vollständiger absoluter URL (href="https://example.com/page") Die Website hat mehrere Protokoll/Domain-Versionen (http/https, www/ohne www) die gegenseitig canonical setzen, aber 301-Weiterleitungen sind nicht korrekt konfiguriert Paginierte Seiten (z.B. ?page=2, ?page=3) verweisen alle canonical auf die erste Seite, was dazu führt dass nachfolgender Inhalt überhaupt nicht indexiert wird, Suchmaschinen ignorieren ein solches unvernünftiges canonical Dieselbe Seite deklariert im HTML gleichzeitig über link-Tag, HTTP-Response-Header Link: <...>; rel="canonical", Sitemap unterschiedliche canonical-URLs, Prioritätskonflikt

Nach dem Ändern von Meta-Tags wird beim erneuten Teilen trotzdem der alte Titel, die alte Beschreibung oder das alte Bild angezeigt, der aktualisierte Effekt ist nicht sichtbar

Soziale Plattformen (Facebook/Twitter/LinkedIn) cachen OG/Twitter Card-Informationen sehr lange (kann mehrere Tage bis Wochen dauern), sie crawlen nicht bei jedem Teilen neu Die offiziellen Debugging-Tools der entsprechenden Plattformen (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) wurden nicht verwendet um Scrape Again/Erneutes Crawlen zum zwangsweisen Cache-Update auszuführen CDN (Cloudflare, Alibaba Cloud CDN, Tencent Cloud CDN usw.) hat die alte HTML-Seite zwischengespeichert, Crawler erfassen die alte CDN-Cache-Version Server-seitiger, SSR-Cache, WordPress-Cache-Plugin, Redis-Seiten-Cache usw. wurden nicht gelöscht, ausgegeben wird immer noch altes HTML Die Ressourcen-URL wie og:image hat sich nicht geändert aber der Bildinhalt wurde aktualisiert, Browser und Plattformen cachen basierend auf URL, erst durch Hinzufügen von Versionsparametern wie ?v=2 kann ein Update erzwungen werden Nach dem Ändern der Tags wurde die Seite nicht korrekt bereitgestellt und online gestellt, die Datei wurde lokal geändert aber die Produktionsumgebung ist immer noch die alte Version Meta-Tags wurden im HTML-body-Bereich platziert oder mit JS dynamisch eingefügt, Crawler haben die neuen Tags überhaupt nicht gelesen, die gelesene Version ist immer noch die vorher zwischengespeicherte

Das versehentliche Setzen von noindex,nofollow führt dazu dass die gesamte Website oder wichtige Seiten nicht von Google indexiert werden und nicht auffindbar sind

Das noindex,nofollow-Tag der Entwicklungs-/Testumgebung wurde beim Start nicht entfernt, die gesamte Website wurde mit noindex veröffentlicht In CMS-Backends wie WordPress ist die Option「Suchmaschinen davon abhalten diese Site zu indexieren」angehakt, wodurch automatisch allen Seiten noindex hinzugefügt wird robots.txt hat gleichzeitig Disallow gesetzt, was dazu führt dass Crawler die Seite nicht einmal crawlen können um noindex zu sehen, aber wenn externe Links darauf verweisen kann trotzdem indexiert werden Der HTTP-Response-Header gibt X-Robots-Tag: noindex zurück (hat höhere Priorität als Meta-Tags, viele beachten Response-Header nicht), z.B. verursacht durch Nginx/Apache-Konfiguration, CDN-Einstellungen CDN/WAF/Sicherheitsplugins fügen der Seite automatisch einen noindex-Header hinzu (teilweise Fehlbedienung oder Standardeinstellung von Sicherheitsplugins) Falsche Kombinationsanweisungen wurden verwendet, z.B. noindex wurde als index geschrieben aber andere Parameter stehen im Konflikt, oder die gesamte Website-Vorlage enthält noindex das nur auf der Startseite entfernt wurde aber innere Seiten es noch haben Bei der Migration der Website von staging/Testumgebung zur Produktionsumgebung wurden base URL, canonical, robots-Konfiguration nicht aktualisiert, das noindex der Testumgebung verbleibt in der Produktionsumgebung

Glossar

Meta tag: HTML-Meta-Tag, wird im head-Bereich platziert, dient zur Beschreibung von Seitenmetadaten, übermittelt Browsern, Suchmaschinen, sozialen Plattformen Informationen wie Titel, Beschreibung, Autor der Seite, Crawler-Regeln.
title: HTML-Titel-Tag, definiert den Browsertab-Titel und den klickbaren Titel auf Suchmaschinen-Ergebnisseiten (SERP), ist der wichtigste SEO-Tag, empfohlene Länge 50-60 Zeichen.
meta description: Seitenbeschreibungs-Meta-Tag, wird als Beschreibungstext unter dem SERP-Titel angezeigt, beeinflusst das Ranking nicht direkt aber deutlich die Klickrate (CTR), empfohlene Länge 120-160 chinesische Zeichen.
meta keywords: Schlüsselwort-Meta-Tag, wurde von frühen Suchmaschinen zur Bestimmung des Seitenthemas verwendet, aufgrund Missbrauchs hat Google 2009 angekündigt es nicht mehr zu verwenden, hat heute grundsätzlich keinen SEO-Wert mehr.
canonical: Kanonischer Link-Tag (rel="canonical"), teilt Suchmaschinen mit welche von mehreren ähnlichen URLs die bevorzugte Version ist, dient zur Lösung von doppeltem Inhalt, Parameter-URLs, bevorzugten Domains usw.
Open Graph: Das von Facebook 2010 eingeführte Social-Sharing-Metadatenprotokoll verwendet Tags mit og:-Präfix um den Stil von Share-Karten für Links auf sozialen Plattformen zu steuern, wird von fast allen Plattformen wie Facebook, LinkedIn, WhatsApp, Slack unterstützt.
Twitter Card: Share-Card-Protokoll der Twitter/X-Plattform, verwendet Tags mit twitter:-Präfix, unterstützt vier Kartentypen summary, summary_large_image, app, player, wird von Twitter vor OG-Tags gelesen.
og:type: Open Graph Seitentyp-Tag, gibt den Inhaltstyp an, häufige Werte sind website (allgemeine Website), article (Artikel), product (Produkt), profile (Persönliches Profil), bestimmt wie soziale Plattformen Inhalte parsen.
og:image: Open Graph Share-Bild-Tag, gibt die Vorschaubild-URL der Social-Share-Karte an, empfohlene Größe 1200×630 Pixel (1.91:1-Verhältnis), muss eine öffentlich zugängliche absolute URL sein.
twitter:card: Twitter Card Typ-Tag, gibt den Share-Kartentyp an, Werte sind summary (Kleines Bild), summary_large_image (Großes Bild), app (App), player (Player), ist ein erforderliches Tag für Twitter Card.
robots meta: Crawler-Steuerungs-Meta-Tag, teilt Suchmaschinen auf Seitenebene mit ob indexiert wird (index/noindex), ob Links verfolgt werden (follow/nofollow), ob Snapshots angezeigt werden (noarchive) usw., hat höhere Priorität als robots.txt.
noindex: Eine der robots-Anweisungen, verbietet Suchmaschinen die Indexierung dieser Seite, die Seite erscheint nicht in Suchergebnissen; Crawler crawlen die Seite trotzdem um dieses Tag zu lesen, aber sie werden sie nicht indexieren. Häufig verwendet für Testseiten, interne Seiten, geringwertige Seiten.
nofollow: Eine der robots-Anweisungen, verbietet Suchmaschinen-Crawlern alle Links auf der Seite zu verfolgen (im Unterschied zu rel="nofollow" für einzelne Links), häufig verwendet für Seiten mit benutzergeneriertem Inhalt, Werbelinks, nicht vertrauenswürdigen externen Links.
theme-color: Browser-Themenfarbe-Meta-Tag, definiert die Farbe der Adressleiste/Symbolleiste des mobilen Browsers, wirkt in Browsern wie Android Chrome, Safari 15+ und bietet ein intensiveres Markenerlebnis.
author meta: Autor-Meta-Tag (name="author"), deklariert Erstellerinformationen des Seiteninhalts, wird in Blogs, Nachrichtenseiten in Kombination mit article:author verwendet um den Inhaltsautor zu identifizieren.
HTML entity: HTML-Entity-Escape-Zeichen, dient zur sicheren Anzeige von Sonderzeichen in HTML, z.B. & steht für &, < steht für <, > steht für >, " steht für ", ' steht für ', vermeidet Syntaxfehler und XSS-Probleme.
SERP: Search Engine Results Page, Suchmaschinen-Ergebnisseite, bezieht sich auf die Ergebnisseite die zurückgegeben wird wenn Benutzer Schlüsselwörter in Suchmaschinen wie Google/Baidu eingeben, enthält Elemente wie Titel, Beschreibung, URL, Rich-Media-Fragmente.
CTR: Click-Through Rate, Klickrate, bezieht sich auf den Anteil der Benutzer die klicken nachdem das Suchergebnis angezeigt wurde. CTR ist einer der wichtigsten SEO-Kennzahlen, wird direkt von der Attraktivität von title und meta description beeinflusst und ist auch ein Benutzersignal im Google-Ranking-Algorithmus.
crawl budget: Crawl-Budget, die Anzahl der Crawls und Seiten die Suchmaschinen Ihrer Website in einem bestimmten Zeitraum zuweisen. Die vernünftige Verwendung von robots meta, canonical, noindex kann vermeiden Crawl-Budget für geringwertige Seiten zu verschwenden, damit wichtige Seiten häufiger gecrawlt werden.
viewport: Viewport-Meta-Tag (name="viewport"), unverzichtbares Tag für moderne responsive Webseiten, steuert die Rendering-Breite und anfängliche Skalierung der Seite auf Mobilgeräten, Standardkonfiguration ist width=device-width, initial-scale=1.0.

Tabelle häufig verwendeter Meta-Tags und Attributerklärungen

Vergleichstabelle der og:type-Anwendungsszenarien

Vergleichstabelle der twitter:card-Typen