Meta Tag Generator
Browsergebaseerd Meta tag generatie hulpmiddel dat title, description, keywords, canonical, Open Graph, Twitter Card, robots en andere tag generatie ondersteunt, met automatische HTML entity escaping, real-time tekenlengte begeleiding met kleurstatus, één-knop kopiëren en downloaden.
Gerelateerde aanbevelingen
Toepassingsgevallen
- Batchgewijs volledige Meta tags genereren voor homepage, lijstpagina's en detailpagina's voor lancering van nieuwe website, snel voltooien van basis SEO instellingen
- Configureren van article-type Open Graph tags en summary_large_image Twitter Card voor publicatie van blogartikelen, om de prestaties van sociaal delen te verbeteren
- Configureren van product-type og:type voor e-commerce productpagina's, gestructureerde informatie zoals og:image, og:price:amount instellen om productweergave op sociale platforms te optimaliseren
- Opnieuw genereren van canonical tags na website redesign of domeinwijziging, om URL's te standaardiseren en gezichtsverlies door dubbele inhoud te voorkomen
- Configureren van theme-color voor mobiele webpagina's, zodat Chrome en Safari mobiele adresbalken overeenkomen met merkkleuren
- Bij ontwikkeling met SSR/SSG frameworks zoals Next.js, Nuxt.js, Gatsby, snel volledige Meta tag code genereren die nodig is voor head configuratie
- Handmatig Meta tags configureren voor aangepaste paginasjablonen in CMS systemen zoals WordPress en Shopify, zonder afhankelijk te zijn van SEO plugins
- Snel correcte robots meta tag combinaties genereren bij het oplossen van website indexeringsproblemen (bijv. noindex,nofollow voor testomgevingen)
- Social media beheerders configureren deelkaarten voor campagne landingspagina's, om correcte voorbeeldweergave te garanderen bij delen op Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, Discord
- Frontend ontwikkelaars die HTML paginasjablonen schrijven krijgen automatische entity escaping voor Meta tags, waardoor HTML syntaxfouten door speciale tekens worden voorkomen
Hoe te gebruiken
- Vul paginatitel (aanbevolen 50-60 tekens), meta description (aanbevolen 120-160 tekens), keywords (kommagescheiden), canonical URL en auteur in het gedeelte "Basis SEO Tags"
- Selecteer geschikte indexerings- en volgregels in het gedeelte "robots Crawler Directives": index/noindex (wel/niet indexeren), follow/nofollow (wel/niet links volgen), met extra opties voor noarchive, nosnippet enz.
- Voer een theme-color hex kleurwaarde in of selecteer deze in het gedeelte "Thema Kleur Instellingen", voor kleuring van de mobiele browser adresbalk
- Schakel naar het gedeelte "Open Graph Tags", selecteer og:type (één van website/article/product/profile), vul og:title, og:description, og:image (deel afbeelding URL, aanbevolen 1200×630 pixels), og:url, og:site_name, og:locale in
- Schakel naar het gedeelte "Twitter Card Tags", selecteer twitter:card type (één van summary/summary_large_image/app/player), vul twitter:site @handle, twitter:title, twitter:description, twitter:image in
- Let tijdens het invoeren op het real-time voorbeeldgebied rechts en de kleurindicatoren van de tekenteller: groen betekent optimale lengte, oranje betekent bijna grens, grijs betekent te kort of te lang en aanpassing nodig
- Na bevestiging dat tags correct zijn, klik op de "Kopiëren naar klembord" knop om alle code te kopiëren en in het HTML head gebied te plakken, of klik op "Download HTML Bestand" om op te slaan als meta-tags.html voor later gebruik
Functies
- Automatische HTML entity escaping: ontsnapt veilig vijf speciale tekens &, <, >, ", ' om syntaxfouten in gegenereerde HTML tags te voorkomen
- Slimme title lengte-indicator: groen (optimaal) binnen 50-60 tekens, oranje/grijs statusindicatoren bij overschrijding of tekort, real-time teken telling
- Slimme meta description lengte-indicator: groen (optimaal weergavebereik) binnen 120-160 tekens, real-time kleurstatus verandert bij overschrijding of te korte inhoud
- Ondersteunt 4 og:type opties: website (algemene site), article (blog/artikel), product (productpagina), profile (persoonlijke pagina), passend bij verschillende paginatypes
- Ondersteunt 4 twitter:card types: summary (kleine afbeelding), summary_large_image (grote afbeelding), app (app kaart), player (video/speler kaart)
- robots directive combinatie: ondersteunt vrij combineren van index/noindex, follow/nofollow, noarchive, nosnippet, noimageindex en andere crawler directives
- author meta tag: ondersteunt content-author, article:author en andere toeschrijving tags, geschikt voor blogs en nieuwssites
- theme-color configuratie: ondersteunt instellen van themakleur voor mobiele browser adresbalk, biedt kleurenkiezer en hex waarde invoer
- og:site_name configuratie: speciaal ingesteld veld voor sitenaam in het Open Graph protocol voor correcte weergave bij sociaal delen
- twitter:site @handle configuratie: ondersteunt invullen van officieel Twitter/X @handle account om deelkaarten te koppelen aan het officiële account
- Drie-sectie gestructureerde uitvoer: geeft gegenereerde resultaten weer in drie duidelijke secties: Primary SEO, Open Graph en Twitter Card, met overzichtelijke structuur in één oogopslag
- Eén-knop kopiëren naar klembord: gegenereerde code kan met één klik worden gekopieerd zonder handmatige selectie, compatibel met verschillende browseromgevingen
- Downloaden als meta-tags.html: gegenereerde tags kunnen volledig worden gedownload als standalone HTML bestand voor eenvoudig opslaan of direct importeren in projecten
- Real-time generatie en voorbeeld: invoer van inhoud genereert direct tag code, met gesynchroniseerde voorbeeldweergave van SERP zoekresultaten en sociale deelkaart stijlen
Veelgestelde vragen
Kan de code gegenereerd door de Meta Tag Generator direct naar een website worden gekopieerd voor gebruik? Moet het worden gewijzigd?
Het kan direct worden gekopieerd voor gebruik. De code gegenereerd door dit hulpmiddel zijn standaardformaat HTML Meta tags met automatische HTML entity escaping; plak gewoon direct tussen de <head> en </head> van je pagina. Je hoeft alleen te zorgen dat de URL's die je invult (canonical, og:image, og:url, twitter:image) de echte online adressen van je website zijn, geen voorbeeld plaatsaanduidingen. Als je head beheeroplossingen gebruikt van frameworks zoals Next.js, Nuxt.js, React Helmet, Vue Meta, moet je mogelijk kleine aanpassingen doen volgens de JSX/Vue sjabloon syntax van het framework, maar tag attributen en waarden kunnen direct worden hergebruikt.
Waarom moet ik een og:image invullen? Wat gebeurt er zonder afbeelding?
og:image beïnvloedt direct het visuele effect en de klikfrequentie van sociale deelkaarten. Links zonder og:image die worden gedeeld op Facebook, Twitter, LinkedIn, WeChat en andere platforms tonen ofwel kale tekstlinks zonder enige afbeeldingsvoorbeeld, of het platform haalt willekeurig een kleine afbeelding van de pagina (wat logo, avatar, reclameafbeelding of zelfs niet-gerelateerde afbeelding kan zijn), resulterend in extreem slechte weergave, met klikfrequenties die doorgaans 50%+ lager zijn dan delen met correcte voorbeeldafbeeldingen. Aanbevolen og:image grootte is 1200×630 pixels (1.91:1 verhouding), moet een openbaar toegankelijk absoluut URL zijn, bestandsgrootte niet meer dan 5MB.
Moeten zowel Open Graph als Twitter Card tags worden geconfigureerd? Is het OK om alleen OG te configureren?
Het Twitter/X platform leest inderdaad Open Graph tags als fallback — als je geen twitter: voorvoegsel tags configureert, zal Twitter proberen og:title, og:description, og:image te gebruiken om kaarten te genereren. Maar specifiek configureren van Twitter Cards heeft verschillende voordelen: ① je kunt het meest geschikte twitter:card type kiezen (vooral summary_large_image grote afbeelding type; OG standaard mogelijk niet grote afbeelding stijl); ② je kunt twitter:site instellen om je officiële Twitter account te koppelen, waardoor volg conversies toenemen; ③ je kunt titel/beschrijving lengte apart optimaliseren voor Twitter, onderscheiden van OG. We raden aan beide te configureren; dit hulpmiddel ondersteunt gelijktijdige generatie met in wezen dezelfde inspanning.
Wat gebeurt er als title en meta description lengtes het aanbevolen bereik overschrijden? Worden ze bestraft?
Overschrijding van de lengte resulteert niet in zoekmachine straffen, maar inhoud wordt afgekapt. In Google zoekresultaten worden delen van de titel die ongeveer 600 pixelbreedte overschrijden (ongeveer 50-60 tekens) afgekapt met een weglatingsteken, en gebruikers kunnen de volledige titel niet zien; meta description die ongeveer 920 pixelbreedte overschrijdt (ongeveer 120-160 tekens) wordt ook afgekapt. Het probleem van te kort zijn is het verspillen van waardevolle weergave ruimte, niet in staat om paginawaarde volledig over te brengen en klikken aan te trekken. Let op dat dit geen precieze teken telling limiet is maar een pixelbreedte limiet — volledige breedte tekens, hoofdletters, brede letters zoals W/M, en emoji nemen meer breedte in, dus werkelijke weergave kan eerder afkappen dan de teken telling suggereert. De kleurindicatoren van dit hulpmiddel zijn best practice referenties gebaseerd op teken telling.
Wat betekent HTML entity escaping? Waarom doet het hulpmiddel dit automatisch?
Bepaalde tekens in HTML hebben speciale syntactische betekenis; ze direct schrijven in attribuutwaarden zou HTML structuur breken: dubbel aanhalingsteken " is de afsluiter van attribuutwaarde, direct schrijven ervan zorgt ervoor dat tags voortijdig sluiten; & is de starter van entity ontsnapping; < en > zijn tag scheidingstekens. Deze tekens moeten in entiteitsvorm worden geschreven om correct weer te geven: & → &, < → <, > → >, " → ", ' → '. Als je titel of beschrijving &, aanhalingstekens, punthaken of andere speciale tekens bevat, veroorzaakt schrijven zonder ontsnapping HTML syntaxfouten die ervoor kunnen zorgen dat volgende tags allemaal ongeldig worden. Dit hulpmiddel verwerkt deze ontsnapping automatisch; je hoeft alleen originele tekst direct in te voeren zonder handmatige ontsnapping.
Waarom kunnen Facebook/Twitter crawlers geen Meta tags vastleggen van pagina's die ik met React/Vue heb geschreven?
Omdat moderne frontend frameworks zoals React, Vue en Angular standaard client-side rendering (CSR) gebruiken — HTML bron is leeg of bevat alleen een container div, en Meta tags worden dynamisch in de DOM ingevoegd nadat de browser JavaScript uitvoert. Maar de meeste sociale platform crawlers zoals Facebook's facebookexternalhit, Twitterbot, LinkedInBot, en WeChat crawler voeren geen JavaScript uit (of hebben zeer beperkte uitvoeringsmogelijkheden); de ruwe HTML die ze crawlen bevat geen Meta tags, natuurlijk niet in staat om deelkaarten te genereren. Oplossingen: ① Gebruik SSR (Server-Side Rendering) of SSG (Static Site Generation) met frameworks zoals Next.js, Nuxt.js, Gatsby, Astro, waardoor complete Meta tags in HTML bron aan de serverzijde worden gerenderd; ② Gebruik prerendering services zoals prerender.io, Rendertron om statische HTML terug te sturen aan crawlers; ③ Gebruik speciale OG afbeelding generatie services om tags dynamisch te genereren.
Moeten canonical en og:url voor dezelfde pagina identiek worden ingevuld?
Ja, ze moeten consistent zijn. De canonical tag is voor zoekmachines, vertelt hen het voorkeurs URL; og:url is voor sociale platforms, vertelt hen het unieke URL voor deze inhoud om vind-ik-leuks, reacties en deel tellingen te aggregeren. Beide verwijzen naar hetzelfde URL is een best practice, waardoor gezichtsverlies en sociale telling fragmentatie worden vermeden. Let op dat beide volledige absolute URL's moeten zijn (inclusief https://, domein, volledig pad), geen relatieve paden. Als URL's UTM parameters of tracking parameters hebben, moeten zowel canonical als og:url verwijzen naar het schone URL zonder parameters.
Worden links op noindex pagina's nog steeds gecrawld door crawlers? Geven ze gewicht door?
noindex betekent "indexeer deze pagina niet", niet "crawl niet" en niet "volg geen links". Crawlers halen nog steeds noindex pagina's op (de enige manier waarop ze de noindex tag kunnen zien), en als robots meta ook follow instelt (wat de standaard is), zullen crawlers doorgaan met het crawlen van links op de pagina. Maar met betrekking tot gewicht doorgeven: Google's officiële verklaring is dat noindex pagina's uiteindelijk uit de index worden verwijderd, en link gewicht op die pagina's niet normaal doorgeeft (omdat de pagina zelf niet is geïndexeerd). Dus als je wilt dat crawlers andere pagina's bereiken via een bepaalde pagina maar niet wilt dat die pagina zelf wordt geïndexeerd, werkt het gebruik van noindex,follow, maar verwacht niet dat noindex pagina's gewicht doorgeven zoals normale pagina's.
Welke browsers ondersteunen theme-color? Ondersteunt iOS Safari het?
theme-color momenteel ondersteund op: Chrome/Firefox/Edge/Brave en andere Chromium-gebaseerde browsers op Android hebben het al lang ondersteund met de meest voor de hand liggende effecten; Safari heeft theme-color ondersteund sinds iOS 15 en macOS Monterey, maar de implementatie van Safari verschilt enigszins — het past automatisch aan op basis van pagina achtergrondkleur en ondersteunt ook het instellen van verschillende kleuren voor lichte/donkere modus met behulp van het media attribuut. Desktop Chrome past theme-color ook toe in tabbladbalken enz. vanaf bepaalde versies. IE en oudere browsers ondersteunen het niet, maar gebrek aan ondersteuning maakt niet uit — er is gewoon geen themakleur effect, geen invloed op enige functionaliteit. Aanbevolen themakleur moet overeenkomen met je website header/navigatiebalk kleur voor visuele consistentie.
Waarom toont Google zoekresultaten soms een beschrijving die niet degene is die ik heb geschreven?
Google garandeert niet 100% gebruik van je geschreven meta description. Wanneer Google oordeelt dat je beschrijving onvoldoende relevant is voor de zoekopdracht van de gebruiker, of de beschrijvingskwaliteit laag is (bijv. zoekwoord opvulling, site-breed identiek, niet-overeenkomende inhoud), haalt Google automatisch een fragment uit de paginahoofdtekst inhoud dat het het meest relevant acht voor de zoekterm als de weergegeven zoekresultaat beschrijving. Dit is normaal Google gedrag, geen bug. Om de kans te vergroten dat beschrijving wordt gebruikt: ① Schrijf unieke, nauwkeurige inhoud-beschrijvende beschrijvingen voor elke pagina; ② Neem op natuurlijke wijze paginakernzoekwoorden op in de beschrijving zonder opvulling; ③ Houd de lengte binnen redelijk bereik, niet te kort; ④ Beschrijvingsinhoud moet daadwerkelijk worden weerspiegeld in de paginahoofdtekst. Ook al herschrijft Google soms, je moet nog steeds zorgvuldig beschrijvingen schrijven — dit is je belangrijkste middel om weergave actief te beheersen.
Na het configureren van tags, hoe verifieer ik dat ze correct werken? Welke controle hulpmiddelen zijn beschikbaar?
Verifiëren van Meta tags omvat verschillende stappen en hulpmiddelen: ① Gebruik eerst browser "Bekijk Pagina Bron" om te zoeken naar title, description, og: en andere tags in ruwe HTML bron om te controleren of ze bestaan met juiste inhoud (let op: broncode, niet Elements paneel, omdat bron is wat de server retourneert; CSR zal niet in bron worden getoond); ② Gebruik Facebook Sharing Debugger om OG tags te verifiëren en cache te vernieuwen; ③ Gebruik Twitter Card Validator om Twitter Cards te verifiëren; ④ Gebruik Google Rich Results Test om basistags te controleren; ⑤ Gebruik Google Search Console's "URL Inspectie" hulpmiddel om te zien wat Google werkelijk heeft gecrawld, indexeringsstatus; ⑥ Voor lokaal testen, gebruik browser user-agent switcher om sociale media crawlers te simuleren, of gebruik curl commando met Facebook UA om te crawlen en geretourneerde HTML te controleren.
Heeft elke pagina afzonderlijk geconfigureerde Meta tags nodig? Is het OK om één set tags site-breed te gebruiken?
Absoluut niet! Elke pagina moet unieke title en meta description hebben. Als alle pagina's op de site dezelfde titel en beschrijving gebruiken, kunnen zoekmachines de inhoudsthema's van verschillende pagina's niet onderscheiden: ① Zoekmachines weten niet waar elke pagina over gaat en kunnen niet correct ranken; ② Alle pagina's tonen dezelfde titel en beschrijving in zoekresultaten, gebruikers kunnen niet zien welke ze moeten klikken, resulterend in extreem lage CTR; ③ Kan worden beoordeeld als lage kwaliteit site door zoekmachines, wat site-breed gewicht beïnvloedt. OG en Twitter Card tags moeten in principe ook per pagina verschillen. Alleen site-niveau configuraties zoals theme-color, og:site_name, twitter:site kunnen site-breed worden verenigd; alle andere tags moeten afzonderlijk per pagina inhoud worden geconfigureerd.
Moet ik nu nog steeds meta keywords schrijven? Hoeveel zijn geschikt?
Google, Bing, Baidu en andere mainstream zoekmachines in 2026 gebruiken meta keywords niet meer als ranking factor; of je ze nu schrijft of niet, en wat je schrijft, beïnvloedt in wezen geen SEO. Als je CMS of sjabloon dit veld heeft, besteed dan een paar seconden aan het invullen van 3-5 kernzoekwoorden; besteed niet te veel tijd aan het overwegen van zoekwoord selectie en dichtheid. Belangrijk: vul niet tientallen zoekwoorden op, herhaal niet hetzelfde woord vele keren, schrijf geen niet-gerelateerde populaire termen — hoewel keywords zelf niet worden gebruikt voor ranking, kan buitensporige opvulling worden behandeld als spamsignaal door zoekmachines, wat averechts werkt. Als je website geen keywords veld heeft of je geen zin hebt om het in te vullen, is het helemaal leeg laten prima met geen negatieve invloed op ranglijsten.
Wat is het verschil tussen robots meta tags en robots.txt? Welke heeft hogere prioriteit?
De twee werken op verschillende niveaus en mechanismen: ① robots.txt is een tekstbestand geplaatst in de website root, dat crawler gedrag regelt op site of directory niveau, bijv. Disallow: /admin/ vertelt alle crawlers om niet te crawlen in de /admin/ map; maar robots.txt is een "herenakkoord" — conforme crawlers respecteren het, en als pagina's die verboden zijn om te crawlen externe links hebben die ernaar wijzen, kunnen ze nog steeds worden geïndexeerd alleen zonder beschrijvingen. ② robots meta is een paginaniveau tag geplaatst in de HTML head van elke pagina, die nauwkeurig individuele pagina index/noindex/follow/nofollow enz. gedrag kan regelen, met hogere prioriteit dan robots.txt. ③ X-Robots-Tag is HTTP response header niveau, dezelfde functionaliteit als robots meta maar geretourneerd via HTTP headers, kan worden gebruikt voor niet-HTML bestanden (bijv. PDF, afbeeldingen) indexeringscontrole. Om pagina's volledig te voorkomen van indexering, moet je noindex gebruiken (meta of X-Robots-Tag); alleen vertrouwen op robots.txt Disallow kan geen niet-indexering garanderen.
Na het genereren van Meta tags met dit hulpmiddel, moet ik nog steeds Schema.org gestructureerde gegevens (JSON-LD) configureren?
Meta tags en Schema.org gestructureerde gegevens zijn complementair, geen vervangingen. Meta tags pakken voornamelijk aan: zoekmachine resultatenpagina titels/beschrijvingen, sociale platform deelkaarten, basis crawler controle. Schema.org gestructureerde gegevens (meestal ingebed in pagina's als JSON-LD) pakken aan: Rich Snippets, zoals product beoordelingssterren, prijs/voorraad, broodkruimel navigatie, artikel publicatiedata, FAQ accordeon blokken, evenement tijden/locaties en andere verbeterde weergaven, die de CTR verder kunnen verbeteren. We raden aan beide te configureren voor belangrijke pagina's: ① Basis Meta tags (inhoud gegenereerd door dit hulpmiddel); ② Schema.org gestructureerde gegevens voor het overeenkomstige paginatype. De twee conflicteren niet, samen optimaliseren ze zoek weergave effecten.
Probleemoplossing
Bij het delen van links op Facebook/Twitter/LinkedIn worden afbeeldingen niet weergegeven, of de weergegeven afbeelding is niet de ingestelde og:image
og:image URL gebruikt relatief pad of localhost/127.0.0.1/interne IP; sociale platform crawlers hebben geen toegang tot openbare adressen. Afbeelding wordt geblokkeerd door robots.txt, of server/WAF/CDN/firewall blokkeert Facebook/Twitter crawler User-Agents (facebookexternalhit/Twitterbot/LinkedInBot). Afbeeldingsgrootte voldoet niet aan vereisten: og:image kleiner dan 200×200 pixels wordt genegeerd; summary_large_image kleiner dan 300×157 wordt gedegradeerd. Afbeeldingsbestand te groot (meer dan 5MB-8MB) of formaat niet ondersteund (alleen JPG/PNG/WebP/GIF ondersteund; SVG niet ondersteund door sommige platforms). Tags worden client-side dynamisch gerenderd met JavaScript; sociale platform crawlers voeren geen JS uit, alleen SSR/SSG kan worden gecrawld. og:image URL retourneert 404/403/5xx fout, of verwijst door naar inlogpagina/foutpagina. Platform heeft oude geen-afbeelding versie gecached; na het wijzigen van tags is officieel Debugger hulpmiddel niet gebruikt om Scrape Again te forceren om cache te vernieuwen.
In Google zoekresultaten wordt de titel afgekapt en niet volledig weergegeven, of Google heeft de titel automatisch herschreven
Titel lengte overschrijdt 50-60 tekens (of ongeveer 600 pixelbreedte), overschot wordt afgekapt met weglatingsteken. Titel bevat volledige breedte speciale symbolen, emoji die extra breedte innemen waardoor vroege afkapping ontstaat; werkelijke weergavelengte korter dan teken telling. Titel zoekwoord opvulling of niet-overeenkomst met paginainhoud; Google beschouwt je titel als onnauwkeurig en haalt andere tekst uit paginahoofdtekst of ankertekst om titel te herschrijven. Titels voor elke pagina zijn gedupliceerd of sterk vergelijkbaar; Google kan pagina's niet onderscheiden en genereert automatisch verschillende titels. Titel bevat alleen merknaam zonder paginathema beschrijving, of merknaam is te lang en neemt te veel ruimte in. Te veel scheidingstekens zoals |, -, _ gebruikt, of niet-standaard scheidingsteken gebruik, waardoor Google beschouwt als scheidingsteken opvulling. Pagina heeft rommelige h1-h6 kop hiërarchie of meerdere h1 tags; Google kan titel herschrijven met h1 inhoud.
Na Meta tag configuratie vertoont de pagina onleesbare tekens, speciale tekens worden abnormaal weergegeven, of treden HTML syntaxfouten op
<meta charset="UTF-8"> niet gedeclareerd, of declaratiepositie niet helemaal aan het begin van head (moet voor title zijn). Inhoud attribuutwaarden in meta description, og:description enz. bevatten niet-ontsnapte dubbele aanhalingstekens ("), waardoor tags voortijdig sluiten en HTML structuur breekt. Inhoud bevat &, <, > en andere speciale tekens zonder HTML entity escaping (& moet worden geschreven als &, < als <, > als >). Werkelijke opslaancodering van HTML bestand is niet UTF-8 (bijv. opgeslagen als GBK/GB2312), maar charset declareert UTF-8 waardoor coderings mismatch ontstaat. Server HTTP response Content-Type header specificeert charset=GBK of andere niet-UTF-8 codering, waardoor meta charset declaratie wordt overschreven. Onjuiste entity escaping gebruikt (bijv. gebruiken van " om aanhalingstekens buiten attributen te ontsnappen, of ontsnappen van tekens die niet hoeven te worden ontsnapt). CMS of sjabloon engine auto-escaping veroorzaakt dubbele ontsnapping (bijv. & wordt &amp;, weergegeven als & in plaats van &).
Geconfigureerde canonical tags werken niet, dubbele URL's worden nog steeds geïndexeerd, of canonical wordt genegeerd door zoekmachines
Het URL waar canonical naar verwijst retourneert 404/403/5xx fout, of verwijst door naar een andere pagina; zoekmachines hebben geen toegang tot de canonieke versie. Pagina A canonical naar B, Pagina B canonical naar A (circulaire canonical), of A→B→C→D keten canonical verwarren zoekmachines. Canonical verwijst naar pagina's met aanzienlijk verschillende inhoud (niet sterk dubbele/zelfde inhoud); zoekmachines beschouwen canonical instelling als onjuist en negeren deze. Canonical gebruikt relatief pad (bijv. href="/page") in plaats van volledig absoluut URL (href="https://example.com/page"). Website heeft meerdere protocol/domein versies (http/https, www/niet-www) die canoniek naar elkaar verwijzen, maar 301 redirects zijn niet correct geconfigureerd. Gepagineerde pagina's (bijv. ?page=2, ?page=3) allemaal canonical naar eerste pagina, waardoor latere inhoud niet wordt geïndexeerd; zoekmachines negeren dergelijke onredelijke canonicals. Dezelfde pagina declareert tegelijkertijd verschillende canonical URL's via link tag in HTML, HTTP response header Link: <...>; rel="canonical", en Sitemap; prioriteitsconflict.
Na het wijzigen van Meta tags, toont opnieuw delen nog steeds oude titels, beschrijvingen of afbeeldingen; kan bijgewerkte effecten niet zien
Sociale platforms (Facebook/Twitter/LinkedIn) cachen OG/Twitter Card informatie gedurende lange tijd (mogelijk dagen tot weken), niet opnieuw crawlen bij elke deel. Officiële debugging hulpmiddelen voor bijbehorende platforms (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) zijn niet gebruikt om Scrape Again/opnieuw crawlen uit te voeren om cache te vernieuwen. CDN (Cloudflare, enz.) heeft oude HTML pagina's gecached; crawlers ontvangen CDN-gecachte oude versies. Server-side, SSR cache, WordPress cache plugins, Redis pagina cache enz. niet gewist; uitvoer is nog steeds oude HTML. og:image en andere bron URL's zijn niet gewijzigd maar afbeeldingsinhoud is bijgewerkt; browsers en platforms cachen op basis van URL; toevoegen van versieparameters zoals ?v=2 is nodig om update te forceren. Na het wijzigen van tags is de pagina niet correct geïmplementeerd naar productie; bestanden lokaal gewijzigd maar productieomgeving heeft nog steeds oude versie. Meta tags geplaatst in HTML body gebied of dynamisch ingevoegd met JS; crawlers lezen nieuwe tags helemaal niet, lezen nog steeds eerder gecachte versies.
Per ongeluk instellen van noindex,nofollow zorgt ervoor dat de hele website of belangrijke pagina's niet worden geïndexeerd door Google, niet doorzoekbaar
Ontwikkel/testomgeving noindex,nofollow tags zijn niet verwijderd bij lancering; hele site ging live met noindex. WordPress en andere CMS backend "Ontmoedig zoekmachines om deze site te indexeren" optie was aangevinkt, waardoor automatisch noindex aan alle pagina's wordt toegevoegd. robots.txt heeft ook Disallow ingesteld, waardoor crawlers zelfs geen pagina's ophalen en dus geen noindex zien; maar als er externe links naar wijzen, kunnen pagina's nog steeds worden geïndexeerd. HTTP response header retourneert X-Robots-Tag: noindex (hogere prioriteit dan meta tags, veel mensen merken response headers niet op), bijv. van Nginx/Apache configuratie, CDN instellingen. CDN/WAF/beveiligingsplugins voegen automatisch noindex headers toe (sommige beveiligingsplugins werken verkeerd of hebben standaardinstellingen). Verkeerde combinatie directives gebruikt, bijv. schrijven van noindex als index maar andere parameters conflicteren, of site-breed sjabloon bevat noindex met alleen homepage die het verwijdert terwijl binnenpagina's het nog steeds hebben. Bij migreren van website van staging/testen naar productie, zijn basis URL, canonical, robots configuraties niet bijgewerkt; testomgeving noindex overgebracht naar productie.
Woordenlijst
- Meta tag
- HTML meta tags geplaatst in het head gedeelte, gebruikt om paginametadata te beschrijven, en informatie zoals paginatitel, beschrijving, auteur, crawler regels en andere informatie door te geven aan browsers, zoekmachines en sociale platforms.
- title
- HTML titel tag, definieert de browsertabblad titel en klikbare titel op zoekmachine resultatenpagina's (SERP); de belangrijkste SEO tag, aanbevolen lengte 50-60 tekens.
- meta description
- Pagina beschrijving meta tag, weergegeven als beschrijvingstekst onder de SERP titel; heeft geen directe invloed op ranglijsten maar beïnvloedt significant de klikfrequentie (CTR), aanbevolen lengte 120-160 tekens.
- meta keywords
- Zoekwoorden meta tag, gebruikt door vroege zoekmachines om paginathema's te bepalen; vanwege misbruik heeft Google in 2009 aangekondigd het niet meer te gebruiken, nu heeft het in wezen geen SEO waarde.
- canonical
- Canonieke link tag (rel="canonical"), vertelt zoekmachines welke de voorkeursversie is onder meerdere vergelijkbare URL's, gebruikt om problemen met dubbele inhoud, parameter URL's, voorkeursdomeinen en andere problemen op te lossen.
- Open Graph
- Sociaal deel metadata protocol gelanceerd door Facebook in 2010, met behulp van og: voorvoegsel tags om de stijl van link deelkaarten op sociale platforms te controleren, ondersteund door Facebook, LinkedIn, WhatsApp, Slack en bijna alle platforms.
- Twitter Card
- Twitter/X platform deelkaart protocol met behulp van twitter: voorvoegsel tags, ondersteunt vier kaarttypen: summary, summary_large_image, app, player; wordt door Twitter gelezen met voorrang boven OG tags.
- og:type
- Open Graph paginatype tag, specificeert inhoudstype; veelvoorkomende waarden zijn website (algemene site), article (artikel), product (product), profile (persoonlijk profiel), bepaalt hoe sociale platforms de inhoud parseren.
- og:image
- Open Graph deel afbeelding tag, specificeert de voorbeeldafbeelding URL van de sociale deelkaart; aanbevolen grootte 1200×630 pixels (1.91:1 verhouding), moet een openbaar toegankelijk absoluut URL zijn.
- twitter:card
- Twitter Card type tag, specificeert deelkaarttype; waarden zijn summary (kleine afbeelding), summary_large_image (grote afbeelding), app (applicatie), player (speler); een verplichte Twitter Card tag.
- robots meta
- Crawler controle meta tag, vertelt zoekmachines op paginaniveau of te indexeren (index/noindex), of links te volgen (follow/nofollow), of snapshots te tonen (noarchive) enz.; hogere prioriteit dan robots.txt.
- noindex
- Een van de robots directives, verbiedt zoekmachines om de pagina te indexeren; de pagina verschijnt niet in zoekresultaten. Crawlers halen de pagina nog steeds op om deze tag te lezen, maar indexeren deze niet. Vaak gebruikt voor testpagina's, interne pagina's, lage waarde pagina's.
- nofollow
- Een van de robots directives, verbiedt zoekmachine crawlers om alle links op de pagina te volgen (verschillend van rel="nofollow" op individuele links); vaak gebruikt voor gebruikersgegenereerde inhoud, reclame links, pagina's met onbetrouwbare externe links.
- theme-color
- Browser themakleur meta tag, definieert de kleur van de mobiele browser adresbalk/werkbalk; effectief op Android Chrome, Safari 15+ en andere browsers, biedt een meer meeslepende merkervaring.
- author meta
- Auteur meta tag (name="author"), declareert informatie over de inhoudmaker; gebruikt in blogs en nieuwssites met article:author om inhoudsauteurs te identificeren.
- HTML entity
- HTML entity ontsnappingstekens, gebruikt om speciale tekens veilig weer te geven in HTML, zoals & voor &, < voor <, > voor >, " voor ", ' voor ', het vermijden van syntaxfouten en XSS problemen.
- SERP
- Search Engine Results Page, verwijzend naar de resultatenpagina die wordt geretourneerd nadat gebruikers zoekwoorden invoeren in Google/Baidu en andere zoekmachines, met titels, beschrijvingen, URL's, rich media fragmenten en andere elementen.
- CTR
- Click-Through Rate, de verhouding van gebruikers die klikken nadat zoekresultaten zijn weergegeven. CTR is een van de kern SEO statistieken, direct beïnvloed door de aantrekkelijkheid van title en meta description, en is ook een gebruikerssignaal in het Google ranking algoritme.
- crawl budget
- Kruipbudget, het aantal kruipbeurten en aantal pagina's dat zoekmachines toewijzen aan je website binnen een bepaalde tijd. Redelijk gebruik van robots meta, canonical, noindex kan voorkomen dat kruipbudget wordt verspild aan lage waarde pagina's, zodat belangrijke pagina's vaker worden gekropen.
- viewport
- Viewport meta tag (name="viewport"), essentieel voor moderne responsive webpagina's, regelt de renderbreedte en initiële schaling van de pagina op mobiel; standaardconfiguratie is width=device-width, initial-scale=1.0.
Lijst van Veelvoorkomende Meta Tags en Attribuut Referentie Tabel
| Tag Naam | Doel | Attribuut/Gebruiksvoorbeeld | Opmerkingen |
|---|---|---|---|
title | Paginatitel, browsertabblad en SERP titel | <title>Paginatitel | Merk</title> | Aanbevolen 50-60 tekens, kernzoekwoorden vooraan, merknaam achteraan, uniek per pagina |
meta description | Paginabeschrijving, beschrijvingstekst weergegeven in SERP | <meta name="description" content="..."> | Aanbevolen 120-160 tekens, bevat zoekwoorden en CTA, uniek per pagina |
meta keywords | Zoekwoorden tag | <meta name="keywords" content="woord1,woord2,woord3"> | Google/Bing/Baidu en andere mainstream zoekmachines gebruiken het niet meer, geen prioriteit configuratie nodig |
link canonical | Canonieke link, specificeert voorkeurs URL | <link rel="canonical" href="https://example.com/page"> | Moet volledig absoluut URL schrijven, lost dubbele inhoud problemen op, stel niet in ketens in |
meta robots | Crawler controle, paginaniveau indexerings/volg regels | <meta name="robots" content="index,follow"> | Hogere prioriteit dan robots.txt; noindex is wat echt indexering voorkomt |
meta charset | Tekencodering declaratie | <meta charset="UTF-8"> | Moet helemaal aan het begin van head worden geplaatst; moderne webpagina's gebruiken uniform UTF-8 |
meta viewport | Mobiele viewport controle | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | Essentieel voor responsive webpagina's; moet worden geconfigureerd anders is mobiele ervaring zeer slecht |
meta author | Pagina auteur informatie | <meta name="author" content="Auteur Naam"> | Identificeert inhoudmaker; gebruikt voor blogs/nieuwssites |
meta theme-color | Mobiele browser themakleur | <meta name="theme-color" content="#2563eb"> | Android Chrome/Safari 15+ ondersteunen; aanbevolen om merk primaire kleur te gebruiken |
og:title | Open Graph deel titel | <meta property="og:title" content="..."> | Sociale deelkaart titel, kan verschillen van SEO titel, meer klik-aantrekkelijk |
og:description | Open Graph deel beschrijving | <meta property="og:description" content="..."> | Sociale kaart beschrijving, aanbevolen onder 200 tekens |
og:image | Open Graph deel afbeelding | <meta property="og:image" content="https://.../img.jpg"> | Aanbevolen 1200×630 pixels, absoluut URL, openbaar toegankelijk, bestand <5MB |
og:url | Open Graph canonieke URL | <meta property="og:url" content="https://example.com/page"> | Moet overeenkomen met canonical, gebruikt voor het aggregeren van vind-ik-leuks en delen |
og:type | Open Graph inhoudstype | <meta property="og:type" content="website"> | Opties: website/article/product/profile; verschillende types ondersteunen verschillende uitgebreide attributen |
og:site_name | Open Graph sitenaam | <meta property="og:site_name" content="GeekFormat"> | Toont algemene websitenaam, onderscheiden van paginatitel |
twitter:card | Twitter Card type | <meta name="twitter:card" content="summary_large_image"> | Opties: summary/summary_large_image/app/player |
twitter:site | Twitter officieel account | <meta name="twitter:site" content="@username"> | Vul website/merk Twitter @handle in |
twitter:image | Twitter Card afbeelding | <meta name="twitter:image" content="https://.../img.jpg"> | Valt terug op og:image als niet ingevuld; gebruik 1:1 voor summary type, 2:1 voor groot type |
og:type Gebruikssituatie Referentie Tabel
| og:type Waarde | Gebruikssituatie | Aanbevolen Afbeeldingsverhouding | Uitbreidbare Tags |
|---|---|---|---|
website | Website homepage, algemene pagina's, Over Ons, Contact en andere niet-inhoud/product pagina's | 1.91:1 (1200×630) | Basis og: tags voldoende, geen speciale uitbreidingen |
article | Blogartikelen, persberichten, kennisdocumenten, tutorials, kolom inhoud en andere tijdgerelateerde inhoud | 1.91:1 (1200×630) | article:published_time (publicatietijd), article:modified_time (wijzigingstijd), article:author (auteur), article:section (categorie), article:tag (tags) |
product | E-commerce productdetailpagina's, artikelenpagina's, betaalde servicepagina's, SaaS product landingspagina's | 1.91:1 (1200×630); productafbeeldingen aanbevolen vierkant of 4:3 | product:price:amount (prijs), product:price:currency (valuta zoals CNY/USD), product:availability (voorraadstatus), product:brand (merk) |
profile | Persoonlijke homepages, gebruikersprofielpagina's, auteurs pagina's, persoonlijke cv-pagina's | 1:1 avatar afbeelding of 1.91:1 omslagafbeelding | profile:first_name (voornaam), profile:last_name (achternaam), profile:username (gebruikersnaam), profile:gender (geslacht) |
twitter:card Type Referentie Tabel
| twitter:card Type | Kaartstijl | Afbeeldingsvereisten | Gebruikssituatie | Extra Vereiste Velden |
|---|---|---|---|---|
summary | Kleine afbeelding samenvatting kaart, kleine afbeelding links/boven, tekst rechts/onder | Minimaal 144×144 pixels, 1:1 vierkant, <5MB | Gewone artikelen, pagina's, hulpmiddelen pagina's, algemene inhoud | Geen verplichte extra velden; vul basistags in |
summary_large_image | Grote afbeelding samenvatting kaart, full-width banner bovenaan, sterke visuele impact | Minimaal 300×157 pixels, aanbevolen 1200×675, ongeveer 2:1 verhouding, <5MB | Blogartikelen, productpagina's, campagnepagina's, inhoud die hoge klikfrequenties wil (aanbevolen als standaard) | Geen verplichte extra velden; zorg dat afbeeldingsgrootte aan vereisten voldoet |
app | App download kaart, toont app pictogram, naam, beoordeling, download knop | App logo vierkantige afbeelding, 144×144 of groter | iOS/Android App downloadpagina's, mobiele app promotiepagina's | twitter:app:name:iphone/ipad/googleplay, twitter:app:id:iphone/ipad/googleplay (app store ID), twitter:app:url:iphone/ipad/googleplay (aangepast schema) |
player | Video/audio speler kaart, direct embedded media speler in de stroom | Speler omslagafbeelding, speler pagina moet HTTPS zijn | Video inhoudpagina's, podcasts, audiopagina's, livestream pagina's | twitter:player (speler URL, HTTPS), twitter:player:width (speler breedte), twitter:player:height (speler hoogte), twitter:player:stream (video/audio stream URL), vereist Twitter witgoedkeuring |
- Kleurenblindheid Simulator
- Kleuromzetter
- .htaccess naar Nginx Converter
- SQL Converter
- Cookie-parser
- Cron Expression Generator
- Cron Validator
- CSS Formatter
- CSS Minifier
- CSV naar Excel
- Valuta Converter
- Diff Checker
- Favicon-generator
- XML Formatter
- Hexadecimale Converter
- HTML Formatter
- HTML Minifier
- HTML naar Markdown
- Markdown naar HTML
- JavaScript Formatteren
- JavaScript Minifier
- JSX Formatteerder
- JSX Minifier
- Zoekwoordclustering
- Lorem Ipsum Generator
- Markdown Tabel Generator
- Meta Tag Generator
- Wachtwoordgenerator
- Wachtwoordsterktecontrole
- QR Code & Streepjescode Generator
- Reguliere Expressie Tester
- Slug Generator
- SQL Generator
- SQL Formatteerhulpmiddel
- Woordenteller
- Tijdgereedschap
- TS Formatter
- TS Minify
- TSX Formatter
- TSX Minify
- Unix Timestamp Omzetter
- UUID Generator
- YAML Formatter
- Case-converter