Générateur de Meta Tags

Paramètres d’entrée
Balises générées

Outil générateur de Meta tags côté navigateur, prenant en charge title, description, keywords, canonical, Open Graph, Twitter Card, robots et autres balises. Échappement automatique des entités HTML, conseils de longueur en temps réel avec état de couleur, copie et téléchargement en un clic.

Recommandations connexes

Générateur de Sitemap

Générateur de QR Codes/Codes-Barres

Compresseur TS

Convertisseur Hexadécimal

Hash SHA-256

Décodage Base64

Cas d'utilisation

  • Génère par lots des ensembles complets de Meta tags pour page d'accueil, pages de liste et pages de détail avant le lancement d'un nouveau site, complétant rapidement la configuration SEO de base
  • Configure des balises Open Graph de type article et Twitter Card de type summary_large_image avant de publier des articles de blog pour améliorer l'effet lors du partage sur les plateformes sociales
  • Configure og:type product sur les pages de produits e-commerce, définit des informations structurées telles que og:image, og:price:amount, optimisant l'affichage des produits sur les réseaux sociaux
  • Régénère les balises canonical après une refonte du site ou un changement de domaine pour unifier la spécification d'URL et éviter la dispersion de poids due au contenu dupliqué
  • Configure theme-color pour les pages web mobiles afin que la barre d'adresse de Chrome et Safari mobile corresponde aux tons de la marque
  • Génère rapidement du code Meta tags complet nécessaire à la configuration head lors du développement avec des frameworks SSR/SSG tels que Next.js, Nuxt.js, Gatsby
  • Configure manuellement des Meta tags pour des modèles de page personnalisés dans des systèmes CMS tels que WordPress et Shopify sans dépendre de plugins SEO
  • Génère rapidement des combinaisons correctes de robots meta tag (comme noindex,nofollow pour les environnements de test) lors de la résolution de problèmes d'indexation du site
  • Configure des cartes de partage pour les pages de destination de campagnes par les opérateurs de médias sociaux, garantissant que l'aperçu est correct lors du partage sur Facebook, Twitter/X, LinkedIn, WhatsApp, Slack et Discord
  • Termine automatiquement l'échappement d'entités des Meta tags lors de l'écriture de modèles de page HTML pour les développeurs frontend, évitant les erreurs de syntaxe HTML causées par des caractères spéciaux

Comment utiliser

  1. Dans la zone « Balises SEO de base », remplissez le title de la page (titre, recommandé 50-60 caractères), meta description (description, recommandé 120-160 caractères), keywords (mots-clés séparés par des virgules), canonical URL (lien canonique), author (auteur)
  2. Dans la zone « Directives d'exploration robots », sélectionnez des règles d'indexation et de suivi appropriées : index/noindex (indexer ou non), follow/nofollow (suivre les liens ou non), vous pouvez cocher des options supplémentaires telles que noarchive, nosnippet
  3. Dans la zone « Configuration de la couleur du thème », saisissez ou sélectionnez la valeur de couleur hexadécimale pour theme-color, utilisée pour colorer la barre d'adresse du navigateur mobile
  4. Basculez vers la zone « Balises Open Graph », sélectionnez og:type (choisissez entre website/article/product/profile), remplissez og:title, og:description, og:image (URL de l'image de partage, recommandé 1200×630 pixels), og:url, og:site_name, og:locale
  5. Basculez vers la zone « Balises Twitter Card », sélectionnez le type de twitter:card (choisissez entre summary/summary_large_image/app/player), remplissez le compte @twitter:site, twitter:title, twitter:description, twitter:image
  6. Pendant la saisie de contenu, observez la zone d'aperçu en temps réel à droite et les conseils de couleur du compteur de caractères : vert signifie longueur optimale, orange signifie proche de la limite, gris signifie trop court ou long et nécessite un ajustement
  7. Après avoir confirmé que les balises sont correctes, cliquez sur le bouton « Copier dans le presse-papiers » pour copier tout le code et le coller dans la zone HTML head, ou cliquez sur « Télécharger le fichier HTML » pour enregistrer en tant que meta-tags.html pour une utilisation ultérieure

Fonctionnalités

  • Échappement automatique des entités HTML : échappe en toute sécurité les caractères spéciaux &, <, >, ", ' pour éviter les erreurs de syntaxe HTML dans les balises générées
  • Indicateur intelligent de longueur de title : affiche vert (optimal) dans la plage de 50-60 caractères, indicateurs orange/gris en cas de dépassement ou de trop courte longueur, compteur en temps réel
  • Indicateur intelligent de longueur de meta description : affiche vert (plage d'affichage optimale) à 120-160 caractères, changement de couleur en temps réel lorsque trop long ou trop court
  • Prend en charge 4 options og:type : website (site général), article (article/blog), product (page produit), profile (profil personnel), adapté à différents types de page
  • Prend en charge 4 types de twitter:card : summary (résumé avec petite image), summary_large_image (résumé avec grande image), app (carte d'application), player (carte vidéo/lecteur)
  • Configuration combinée de directives robots : combine librement des directives d'exploration telles que index/noindex, follow/nofollow, noarchive, nosnippet, noimageindex
  • Meta tag author : prend en charge la configuration de balises d'auteur telles que content-author, article:author, idéal pour les blogs et sites d'actualités
  • Configuration de couleur de thème theme-color : définit la couleur de la barre d'adresse mobile du navigateur, avec sélecteur de couleur et saisie de valeur de couleur
  • Configuration du nom de site og:site_name : champ dédié pour le nom du site dans le protocole Open Graph, affiche correctement le nom du site lors du partage sur les réseaux
  • Configuration de compte @twitter:site : permet de saisir le @handle officiel de la plateforme Twitter/X, liant les cartes de partage au compte officiel
  • Sortie structurée en trois sections : affiche les résultats dans trois sections claires : Primary SEO, Open Graph et Twitter Card, structure claire à première vue
  • Copie dans le presse-papiers en un clic : le code généré est copié en un clic sans sélection manuelle, compatible avec divers navigateurs
  • Téléchargement en tant que meta-tags.html : télécharge les balises générées en tant que fichier HTML indépendant, pratique pour enregistrer ou importer directement dans le projet
  • Génération et aperçu en temps réel : génère du code de balises instantanément lors de la saisie de contenu, avec aperçu synchronisé des résultats SERP et du style de cartes sociales

FAQ

Le code généré par le Générateur de Meta Tags peut-il être copié directement sur le site web pour être utilisé ? Nécessite-t-il des modifications ?

Il peut être copié et utilisé directement. Le code généré par cet outil est des Meta tags HTML au format standard, avec l'échappement automatique des entités HTML terminé, collez-le simplement entre &lt;head&gt; et &lt;/head&gt; de votre page web. Vous devez seulement vous assurer que les URL que vous remplissez (canonical, og:image, og:url, twitter:image) sont des adresses en ligne réelles de votre site, pas des marqueurs de position d'exemple. Si vous utilisez des solutions de gestion head de frameworks tels que Next.js, Nuxt.js, React Helmet, Vue Meta, il se peut que vous ayez besoin d'ajustements mineurs selon la syntaxe des modèles JSX/Vue du framework, mais les attributs et valeurs de balises peuvent être réutilisés complètement.

Pourquoi est-il obligatoire de remplir l'image og:image ? Que se passe-t-il s'il n'y a pas d'image ?

og:image affecte directement l'effet visuel et le taux de clics de la carte de partage social. Les liens sans og:image lors du partage sur des plateformes telles que Facebook, Twitter, LinkedIn, WeChat, etc., afficheront un lien texte simple sans aperçu d'image, ou la plateforme extraira aléatoirement une petite image de la page (peut être un logo, un avatar, une image publicitaire ou même une image non liée), l'effet d'affichage est très mauvais, le taux de clics est généralement plus de 50% plus bas que les partages avec une image d'aperçu correcte. La taille recommandée d'og:image est 1200×630 pixels (proportion 1.91:1), doit être une URL absolue accessible publiquement, taille de fichier ne dépassant pas 5 Mo.

Faut-il configurer à la fois Open Graph et Twitter Card ? Ne configurer que OG est-il suffisant ?

La plateforme Twitter/X lira effectivement les balises Open Graph comme secours : si vous ne configurez aucune balise avec préfixe twitter:, Twitter essaiera d'utiliser og:title, og:description, og:image pour générer la carte. Mais configurer Twitter Card dédié a plusieurs avantages : ①vous pouvez choisir le type de twitter:card le plus adapté (en particulier le type de grande image summary_large_image, avec OG il se peut que le style grande image ne soit pas utilisé par défaut) ; ②vous pouvez configurer twitter:site pour lier votre compte officiel Twitter, augmentant les conversions de suivi ; ③vous pouvez optimiser la longueur du titre et de la description spécifiquement pour Twitter, les distinguant de OG. Il est recommandé de configurer les deux, cet outil prend en charge la génération simultanée, la charge de travail est quasiment la même.

Quelles conséquences y a-t-il à ce que title et meta description dépassent la plage de longueur recommandée ? Seront-ils pénalisés ?

Dépasser la longueur ne sera pas pénalisé par les moteurs de recherche, mais sera tronqué. Dans les résultats de recherche Google, la partie de title dépassant environ 600 pixels de largeur (chinois environ 50-60 caractères) sera tronquée par des points de suspension, les utilisateurs ne verront pas le titre complet ; meta description dépassant environ 920 pixels de largeur (chinois environ 120-160 caractères) sera également tronquée. Le problème d'être trop court est de gaspiller le précieux espace d'affichage, ne pouvant pas transmettre complètement la valeur de la page et attirer les clics. Notez que ce n'est pas une limite de comptage de caractères précise, mais une limite de largeur de pixels : les caractères pleine chasse, les lettres majuscules anglaises, les lettres larges comme W/M, les emoji occupent plus de largeur, l'affichage réel peut tronquer avant ce que le comptage de caractères laisse penser. Les conseils de couleur de cet outil sont une référence de meilleures pratiques basée sur le comptage de caractères.

Que signifie l'échappement d'entités HTML ? Pourquoi l'outil le fait-il automatiquement ?

En HTML certains caractères ont une signification syntaxique spéciale, s'ils sont écrits directement dans les valeurs d'attributs ils casseront la structure HTML : le guillemet double " est le terminateur de valeur d'attribut, l'écrire directement provoquera une fermeture prématurée de la balise ; & est le caractère de début d'échappement d'entités ; < et > sont les caractères de début et fin de balise. Ces caractères doivent être écrits sous forme d'entité pour s'afficher correctement : & → &amp;, < → &lt;, > → &gt;, " → &quot;, ' → &#x27;. Si votre title ou description contient des caractères spéciaux tels que &, guillemets, chevrons, écrire directement sans échappement provoquera des erreurs de syntaxe HTML, pouvant faire échouer toutes les balises ultérieures. Cet outil traite automatiquement ces échappements, vous saisissez simplement le texte original directement, vous n'avez pas besoin d'échapper manuellement.

Pourquoi les robots Facebook/Twitter ne peuvent-ils pas capturer les Meta tags de ma page écrite avec React/Vue ?

Parce que les frameworks frontend modernes tels que React, Vue, Angular sont par défaut en rendu côté client (CSR) : le code source HTML est vide ou ne contient qu'un div conteneur, les Meta tags sont insérées dynamiquement dans le DOM après que le navigateur a exécuté JavaScript. Mais la plupart des robots des plateformes sociales tels que le robot de Facebook facebookexternalhit, Twitterbot, LinkedInBot, le robot WeChat n'exécutent pas JavaScript (ou leur capacité d'exécution est très limitée), dans le HTML original qu'ils capturent il n'y a pas de Meta tags, naturellement ils ne peuvent pas générer de cartes de partage. Solutions : ①utiliser SSR (rendu côté serveur) ou SSG (génération de sites statiques), tels que les frameworks Next.js, Nuxt.js, Gatsby, Astro, qui rendent des Meta tags complètes dans le code source HTML depuis le côté serveur ; ②utiliser des services de pré-rendu tels que prerender.io, Rendertron pour renvoyer du HTML statique aux robots ; ③utiliser des services dédiés de génération d'images OG pour générer des balises dynamiquement.

canonical et og:url d'une même page doivent-ils être remplis identiquement ?

Oui, ils doivent être cohérents. La balise canonical est pour les moteurs de recherche, leur disant l'URL préférée ; og:url est pour les plateformes sociales, leur disant l'URL unique de ce contenu pour agréger les comptages de likes, commentaires et partages. Que les deux pointent vers la même URL est la meilleure pratique, peut éviter la dispersion de poids et la fragmentation des comptages sociaux. Notez que les deux doivent être des URL absolues complètes (incluant https://, domaine, chemin complet), les chemins relatifs ne peuvent pas être utilisés. S'il y a des URL avec des paramètres UTM, des paramètres de suivi, canonical comme og:url doivent pointer vers l'URL propre sans paramètres.

Les liens de pages avec noindex seront-ils toujours explorés par les robots ? Transmettront-ils du poids ?

La signification de noindex est « ne pas indexer cette page », ce n'est pas « ne pas explorer » ni « ne pas suivre les liens ». Le robot explorera toujours les pages noindex (c'est seulement ainsi qu'il peut voir la balise noindex), si robots meta établit également follow (la valeur par défaut est follow), le robot continuera à explorer les liens de la page. Mais concernant la transmission de poids : la déclaration officielle de Google est que les pages noindex seront éventuellement retirées de l'index, et le poids des liens de la page ne sera pas non plus transmis normalement (parce que la page elle-même n'est pas indexée). Donc si vous voulez que le robot atteigne d'autres pages à travers une page mais ne voulez pas que la page elle-même soit indexée, utiliser noindex,follow est acceptable, mais ne vous attendez pas à ce que les pages noindex puissent transmettre du poids comme des pages normales.

Sur quels navigateurs theme-color fonctionne-t-il ? iOS Safari le prend-il en charge ?

Situation de compatibilité actuelle de theme-color : les navigateurs à noyau Chromium tels que Chrome/Firefox/Edge/Brave pour Android le prennent en charge depuis longtemps, avec l'effet le plus évident ; Safari prend en charge theme-color depuis iOS 15 et macOS Monterey, mais l'implémentation de Safari est légèrement différente : il s'ajuste automatiquement selon la couleur de fond de la page, prend également en charge l'utilisation de l'attribut media pour configurer des couleurs séparées pour le mode clair/sombre. Chrome de bureau a également commencé à appliquer theme-color sur la barre d'onglets depuis une certaine version. IE et les navigateurs anciens ne le prennent pas en charge, mais ce n'est pas grave si ce n'est pas compatible, il n'y aura simplement pas d'effet de couleur de thème, cela n'affecte aucune fonction. Il est recommandé de définir la couleur du thème comme la couleur du header/barre de navigation de votre site, visuellement plus unifié.

Pourquoi parfois la description qui s'affiche dans les résultats de recherche Google n'est-elle pas celle que j'ai écrite ?

Google ne garantit pas utiliser à 100% la meta description que vous écrivez. Lorsque Google détermine que la description que vous écrivez n'est pas suffisamment pertinente par rapport à la requête de recherche de l'utilisateur, ou que la qualité de description n'est pas élevée (par exemple c'est du bourrage de mots-clés, identique sur tout le site, ne correspond pas au contenu), Google extraira automatiquement un extrait du contenu du corps de la page qu'il considère le plus pertinent pour le terme de recherche comme description affichée dans les résultats de recherche. C'est le comportement normal de Google, pas un bug. Pour augmenter la probabilité que description soit utilisée : ①écrivez une description unique et qui décrit précisément le contenu pour chaque page ; ②description inclut naturellement des mots-clés centraux de la page mais sans bourrage ; ③contrôlez la longueur dans une plage raisonnable pas trop courte ; ④le contenu de description se reflète réellement dans le corps de la page. Bien que Google réécrive parfois, vous devez toujours écrire une description soignée : c'est le principal moyen dont vous disposez pour contrôler activement l'effet d'affichage.

Après avoir configuré les balises comment vérifier si elles prennent effet correctement ? Quels outils de vérification existe-t-il ?

Vérifier les Meta tags comporte plusieurs étapes et outils : ①d'abord utilisez « Afficher le code source de la page » dans le navigateur, recherchez dans le code source HTML original si des balises telles que title, description, og: existent et si leur contenu est correct (note : c'est le code source pas le panneau Elements, parce que le code source est celui renvoyé par le serveur, en CSR elles ne seront pas visibles dans le code source) ; ②utilisez Facebook Sharing Debugger pour vérifier les balises OG et mettre à jour le cache ; ③utilisez Twitter Card Validator pour vérifier Twitter Card ; ④utilisez Google Rich Results Test pour vérifier les balises de base ; ⑤utilisez l'outil « Inspection d'URL » de Google Search Console pour voir la page que Google a réellement capturée, l'état d'indexation ; ⑥si c'est un test local, vous pouvez utiliser le changement de user-agent du navigateur pour simuler les robots de réseaux sociaux, ou utiliser la commande curl avec l'UA Facebook pour capturer et voir le HTML renvoyé.

Chaque page nécessite-t-elle de configurer des Meta tags séparément ? Utiliser un ensemble de balises pour tout le site fonctionne-t-il ?

Absolument pas ! Chaque page doit avoir title et meta description uniques. Si toutes les pages du site utilisent le même title et la même description, les moteurs de recherche ne pourront pas distinguer les thèmes de contenu de différentes pages : ①les moteurs de recherche ne savent pas de quoi traite chaque page, ne pourront pas classer correctement ; ②dans les résultats de recherche toutes les pages affichent le même titre et la même description, les utilisateurs ne peuvent pas distinguer sur laquelle cliquer, CTR extrêmement bas ; ③peut être jugé par les moteurs de recherche comme un site de faible qualité affectant le poids de tout le site. En principe les balises OG et Twitter Card devraient également être différentes pour chaque page. Seules les configurations au niveau site telles que theme-color, og:site_name, twitter:site peuvent être unifiées sur tout le site, les autres balises doivent être configurées individuellement selon le contenu de la page.

Faut-il encore écrire des meta keywords maintenant ? Combien sont appropriées ?

Les principaux moteurs de recherche tels que Google, Bing, Baidu en 2026 n'utilisent plus meta keywords comme facteur de classement, que vous les écriviez ou non, ce que vous écrivez, n'affecte fondamentalement pas le SEO. Si votre CMS ou modèle a ce champ, prenez quelques secondes pour remplir 3-5 mots-clés centraux, ne passez pas trop de temps à réfléchir à la sélection et à la densité des mots-clés. L'important : ne bourrez pas des dizaines de mots-clés, ne répétez pas le même mot plusieurs fois, n'écrivez pas de mots populaires non liés à la page : bien que keywords en elle-même ne soit pas utilisée pour le classement, un bourrage excessif peut être considéré par les moteurs de recherche comme un signal de spam, ça n'en vaut pas la peine. Si votre site n'a pas de champ keywords ou si vous avez la flemme de le remplir, le laisser complètement vide est également acceptable, cela n'a aucun impact négatif sur le classement.

Quelle est la différence entre robots meta tag et robots.txt ? Laquelle a la priorité la plus élevée ?

Les deux ont différents niveaux d'action et mécanismes : ①robots.txt est un fichier texte placé dans le répertoire racine du site, contrôle le comportement d'exploration au niveau site ou répertoire, par exemple Disallow: /admin/ dit à tous les robots de ne pas explorer le répertoire /admin/ ; mais robots.txt est un « accord de gentilshommes », les robots conformes le respecteront, et si des pages interdites d'exploration sont pointées par des liens externes, elles peuvent toujours être indexées mais sans description. ②robots meta est une balise au niveau page, placée dans le HTML head de chaque page, peut contrôler avec précision les comportements index/noindex/follow/nofollow de pages individuelles, avec priorité supérieure à robots.txt. ③X-Robots-Tag est au niveau en-tête de réponse HTTP, avec la même fonction que robots meta mais renvoyée via des en-têtes HTTP, peut être utilisée pour le contrôle d'indexation de fichiers non HTML (tels que PDF, images). Pour empêcher complètement qu'une page soit indexée, vous devez utiliser noindex (meta ou X-Robots-Tag), se fier uniquement à robots.txt Disallow ne garantit pas qu'elle ne sera pas indexée.

En générant des Meta tags avec cet outil faut-il encore configurer des données structurées Schema.org (JSON-LD) ?

Les Meta tags et les données structurées Schema.org sont des relations complémentaires, pas de substitution. Les Meta tags résolvent principalement : titre et description dans les pages de résultats des moteurs de recherche, cartes de partage social, contrôle d'exploration de base. Les données structurées Schema.org (généralement intégrées à la page au format JSON-LD) résolvent : résultats de recherche riches (Rich Snippets), tels que notation par étoiles de produits, prix et inventaire, navigation par fil d'Ariane, date de publication d'articles, blocs pliables FAQ, heure et lieu d'événements et autres affichages améliorés, ceux-ci peuvent améliorer encore le CTR. Il est recommandé que les pages importantes configurent les deux simultanément : ①Meta tags de base (contenu généré par cet outil) ; ②données structurées Schema.org correspondant au type de page. Les deux ne sont pas en conflit, optimisant conjointement l'effet d'affichage de recherche.

Dépannage

Lors du partage de liens sur Facebook/Twitter/LinkedIn aucune image ne s'affiche, ou l'image affichée n'est pas l'og:image configurée

L'URL d'og:image utilise un chemin relatif ou localhost/127.0.0.1/IP de réseau interne, les robots des plateformes sociales ne peuvent pas accéder aux adresses de réseau public L'image est bloquée par robots.txt, ou le serveur/WAF/CDN/pare-feu intercepte les User-Agent des robots Facebook/Twitter (facebookexternalhit/Twitterbot/LinkedInBot) La taille de l'image ne respecte pas les exigences : og:image inférieure à 200×200 pixels sera ignorée, une image summary_large_image inférieure à 300×157 sera dégradée Le fichier image est trop volumineux (plus de 5 Mo-8 Mo) ou format non compatible (ne prend en charge que JPG/PNG/WebP/GIF, ne prend pas en charge SVG, certaines plateformes ne prennent pas en charge d'autres formats) Les balises sont rendues dynamiquement côté client avec JavaScript, les robots des plateformes sociales n'exécutent pas JS, seul SSR/SSG peut être exploré L'URL d'og:image retourne une erreur 404/403/5xx, ou redirige vers une page de connexion/page d'erreur La plateforme a mis en cache la version précédente sans image, après modification des balises vous n'avez pas utilisé l'outil officiel Debugger pour forcer Scrape Again et mettre à jour le cache

Dans les résultats de recherche Google le title s'affiche tronqué et incomplet, ou Google a réécrit automatiquement le titre

La longueur de title dépasse les 50-60 caractères chinois (ou environ 600 pixels de largeur), la partie dépassée est tronquée par des points de suspension Le title contient des symboles spéciaux pleine chasse, des emoji occupent une largeur supplémentaire provoquant un troncage prématuré, la longueur réelle affichée est plus courte que le comptage de caractères Bourrage de mots-clés dans title ou non correspondance avec le contenu de la page, Google considère que votre titre n'est pas précis et extraira un autre texte du corps de la page ou du texte d'ancrage pour réécrire le titre Le title de chaque page est répété ou très similaire, Google ne peut pas distinguer les pages et générera automatiquement des titres différents Le title n'a que le nom de marque sans description du thème de la page, ou le nom de marque est trop long occupant trop d'espace Trop de séparateurs tels que |, -, _ ont été utilisés, ou la méthode de séparation n'est pas standard, faisant que Google juge comme du bourrage de séparateurs La page a une hiérarchie de titres h1-h6 désordonnée, ou plusieurs balises h1, Google peut utiliser le contenu h1 pour réécrire title

Après avoir configuré les Meta tags la page affiche des caractères chinois illisibles, des caractères spéciaux anormaux, ou des erreurs de syntaxe HTML

La balise <meta charset="UTF-8"> n'a pas été déclarée, ou la position de déclaration n'est pas au début du head (doit être avant title) Les valeurs d'attribut content telles que meta description, og:description contiennent des guillemets doubles (") sans échappement, provoquant une fermeture prématurée de la balise, structure HTML désordonnée Le contenu contient des caractères spéciaux tels que &, <, > mais ils n'ont pas été échappés en entités HTML (& doit être écrit comme &amp;, < comme &lt;, > comme &gt;) L'encodage de sauvegarde réel du fichier HTML n'est pas UTF-8 (par exemple il a été sauvegardé en GBK/GB2312), mais charset est déclaré comme UTF-8 provoquant une non-concordance d'encodage L'en-tête Content-Type de la réponse HTTP du serveur a spécifié un encodage non UTF-8 tel que charset=GBK, annulant la déclaration de meta charset Un échappement d'entités incorrect a été utilisé (par exemple des guillemets hors d'attributs ont été échappés avec &quot;, ou des caractères qui n'avaient pas besoin d'être échappés l'ont été) Le CMS ou moteur de modèle a échappé automatiquement à plusieurs reprises lors de l'échappement (par exemple &amp; est devenu &amp;amp;, s'affichant comme &amp; au lieu de &)

La balise canonical a été configurée mais n'a pas d'effet, les URL dupliquées continuent d'être indexées, ou canonical est ignorée par les moteurs de recherche

L'URL vers laquelle canonical pointe retourne une erreur 404/403/5xx, ou redirige vers d'autres pages, les moteurs de recherche ne peuvent pas accéder à la version canonique La page A a une canonical vers B, la page B a une canonical vers A (canonical circulaire), ou une canonical en chaîne A→B→C→D confond les moteurs de recherche canonical pointe vers des pages avec un contenu très différent (pas un contenu hautement dupliqué/identique), les moteurs de recherche considèrent que canonical est mal configurée et l'ignorent canonical utilise un chemin relatif (comme href="/page") au lieu d'une URL absolue complète (href="https://example.com/page") Le site a plusieurs versions de protocole/domaine (http/https, www/sans www) avec une canonical mutuelle, mais la redirection 301 n'est pas bien configurée Les pages de pagination (comme ?page=2, ?page=3) ont toutes une canonical vers la première page, provoquant que le contenu ultérieur ne soit absolument pas indexé, les moteurs de recherche ignoreront cette canonical irrationnelle La même page déclare différentes URL canonical simultanément via une balise link dans le HTML, un en-tête HTTP Link: <...>; rel="canonical" et un Sitemap, conflit de priorité

Après avoir modifié les Meta tags lors d'un nouveau partage l'ancien titre, l'ancienne description ou l'ancienne image s'affichent toujours, l'effet de mise à jour n'est pas visible

Les plateformes sociales (Facebook/Twitter/LinkedIn) mettent en cache les informations OG/Twitter Card pendant longtemps (peut durer de plusieurs jours à plusieurs semaines), elles ne ré-explorent pas à chaque partage Les outils de débogage officiels des plateformes correspondantes (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) n'ont pas été utilisés pour exécuter Scrape Again/nouvelle exploration pour forcer la mise à jour du cache CDN (Cloudflare, CDN Alibaba Cloud, CDN Tencent Cloud, etc.) a mis en cache l'ancienne page HTML, les robots ont capturé l'ancienne version en cache du CDN Le cache côté serveur, le cache SSR, les plugins de cache WordPress, le cache de pages Redis, etc. n'ont pas été éliminés, la sortie est toujours de l'ancien HTML L'URL de ressources telles que og:image n'a pas changé mais le contenu de l'image a été mis à jour, les navigateurs et plateformes mettent en cache en se basant sur l'URL, ajouter des paramètres de version tels que ?v=2 est nécessaire pour forcer la mise à jour Après modification des balises la page n'a pas été déployée correctement en production, le fichier a été modifié localement mais l'environnement de production est toujours l'ancienne version Les Meta tags ont été placées dans la zone body du HTML ou insérées dynamiquement avec JS, les robots n'ont même pas lu les nouvelles balises, ils ont lu la version mise en cache précédemment

noindex,nofollow a été configuré accidentellement provoquant que tout le site ou des pages importantes ne soient pas indexées par Google, introuvables dans les recherches

La balise noindex,nofollow de l'environnement de développement/test n'a pas été supprimée lors du lancement, tout le site a été publié avec noindex L'option « Demander aux moteurs de recherche de ne pas indexer ce site » dans le panneau d'administration de CMS tels que WordPress est cochée, ajoutant automatiquement noindex à toutes les pages robots.txt a également établi Disallow, provoquant que le robot ne capture même pas la page et encore moins voie noindex, mais s'il y a des liens externes pointant elle peut toujours être indexée L'en-tête de réponse HTTP a retourné X-Robots-Tag: noindex (priorité supérieure à la balise meta, beaucoup de gens ne remarquent pas les en-têtes de réponse), par exemple provoqué par une configuration Nginx/Apache, une configuration CDN CDN/WAF/plugin de sécurité ont ajouté automatiquement un en-tête noindex à la page (une partie des plugins de sécurité par opération erronée ou configuration par défaut) Des directives combinées incorrectes ont été utilisées, par exemple noindex a été écrit comme index mais d'autres paramètres sont en conflit, ou le modèle de tout le site inclut noindex seul il a été retiré sur la page d'accueil et les pages internes l'ont toujours Lors de la migration du site depuis l'environnement de staging/test vers l'environnement de production, les base URL, canonical, configuration de robots n'ont pas été mises à jour, le noindex de l'environnement de test est resté dans l'environnement de production

Glossaire

Meta tag
Balise meta HTML, placée dans la zone head, utilisée pour décrire les métadonnées de la page, transmettant aux navigateurs, moteurs de recherche et plateformes sociales le titre, la description, l'auteur, les règles d'exploration et autres informations de la page.
title
Balise de titre HTML, définit le titre de l'onglet du navigateur et le titre cliquable sur la page de résultats du moteur de recherche (SERP), c'est la balise la plus importante pour le SEO, longueur recommandée 50-60 caractères.
meta description
Balise meta de description de page, affiche le texte de description sous le titre dans la SERP, n'affecte pas directement le classement mais affecte considérablement le taux de clics (CTR), longueur recommandée 120-160 caractères chinois.
meta keywords
Balise meta de mots-clés, les premiers moteurs de recherche l'utilisaient pour juger du thème de la page, en raison des abus Google a annoncé en 2009 qu'il ne l'utilisait plus, elle n'a maintenant essentiellement plus de valeur SEO.
canonical
Balise de lien canonique (rel="canonical"), dit aux moteurs de recherche quelle URL est la version préférée parmi plusieurs URL similaires, utilisée pour résoudre les problèmes de contenu dupliqué, d'URL avec paramètres, de domaine préféré, etc.
Open Graph
Protocole de métadonnées de partage social lancé par Facebook en 2010, utilise des balises avec préfixe og: pour contrôler le style de carte lors du partage de liens sur les plateformes sociales, compatible avec presque toutes les plateformes telles que Facebook, LinkedIn, WhatsApp, Slack.
Twitter Card
Protocole de carte de partage de la plateforme Twitter/X, utilise des balises avec préfixe twitter:, prend en charge quatre types de carte : summary, summary_large_image, app, player, Twitter les lit avec priorité sur les balises OG.
og:type
Balise de type de page Open Graph, spécifie le type de contenu, valeurs courantes sont website (site général), article (article), product (produit), profile (profil personnel), détermine comment les plateformes sociales analysent le contenu.
og:image
Balise d'image de partage Open Graph, spécifie l'URL de l'image d'aperçu de la carte de partage, taille recommandée 1200×630 pixels (proportion 1.91:1), doit être une URL absolue accessible publiquement.
twitter:card
Balise de type Twitter Card, spécifie le type de carte de partage, valeurs sont summary (petite image), summary_large_image (grande image), app (application), player (lecteur), c'est une balise obligatoire pour Twitter Card.
robots meta
Balise meta de contrôle d'exploration, dit aux moteurs de recherche au niveau page s'il faut indexer (index/noindex), s'il faut suivre les liens (follow/nofollow), s'il faut afficher l'instantané (noarchive), etc., avec priorité supérieure à robots.txt.
noindex
L'une des directives robots, interdit aux moteurs de recherche d'indexer la page, la page n'apparaîtra pas dans les résultats de recherche ; le robot explorera toujours la page pour lire cette balise, mais ne l'indexera pas. Couramment utilisée pour les pages de test, pages internes, pages de faible valeur.
nofollow
L'une des directives robots, interdit aux robots des moteurs de recherche de suivre tous les liens de la page (contrairement à rel="nofollow" pour les liens individuels), couramment utilisée pour le contenu généré par les utilisateurs, liens publicitaires, pages avec liens externes non fiables.
theme-color
Balise meta de couleur de thème du navigateur, définit la couleur de la barre d'adresses/barre d'outils du navigateur mobile, effective sur les navigateurs tels que Android Chrome, Safari 15+, fournissant une expérience de marque plus immersive.
author meta
Balise meta d'auteur (name="author"), déclare les informations du créateur du contenu de la page, utilisée dans les blogs et sites d'actualités avec article:author pour identifier l'auteur du contenu.
HTML entity
Caractères d'échappement d'entités HTML, utilisés pour afficher des caractères spéciaux en toute sécurité en HTML, tels que &amp; représente &, &lt; représente <, &gt; représente >, &quot; représente ", &#x27; représente ', évitant les erreurs de syntaxe et les problèmes XSS.
SERP
Search Engine Results Page, page de résultats du moteur de recherche, fait référence à la page de résultats renvoyée après que l'utilisateur a saisi des mots-clés dans des moteurs de recherche tels que Google/Baidu, qui contient des éléments tels que titre, description, URL, extraits multimédias riches.
CTR
Click-Through Rate, taux de clics, fait référence à la proportion de clics des utilisateurs après affichage des résultats de recherche. Le CTR est l'un des indicateurs centraux du SEO, directement affecté par l'attractivité de title et meta description, et est également un signal utilisateur dans l'algorithme de classement de Google.
crawl budget
Budget d'exploration, le nombre d'explorations et la quantité de pages que le moteur de recherche attribue à votre site web dans un temps donné. Utiliser raisonnablement robots meta, canonical, noindex peut éviter de gaspiller le budget d'exploration sur des pages de faible valeur, permettant aux pages importantes d'être explorées plus fréquemment.
viewport
Balise meta de fenêtre d'affichage (name="viewport"), balise essentielle pour les pages web responsives modernes, contrôle la largeur de rendu et l'échelle initiale de la page sur les appareils mobiles, configuration standard est width=device-width, initial-scale=1.0.

Tableau de liste des Meta tags courantes et description des attributs

title&lt;title&gt;Titre de page | Marque&lt;/title&gt;
meta description&lt;meta name="description" content="..."&gt;
meta keywords&lt;meta name="keywords" content="mot1,mot2,mot3"&gt;
link canonical&lt;link rel="canonical" href="https://example.com/page"&gt;
meta robots&lt;meta name="robots" content="index,follow"&gt;
meta charset&lt;meta charset="UTF-8"&gt;
meta viewport&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
meta author&lt;meta name="author" content="Nom de l'auteur"&gt;
meta theme-color&lt;meta name="theme-color" content="#2563eb"&gt;
og:title&lt;meta property="og:title" content="..."&gt;
og:description&lt;meta property="og:description" content="..."&gt;
og:image&lt;meta property="og:image" content="https://.../img.jpg"&gt;
og:url&lt;meta property="og:url" content="https://example.com/page"&gt;
og:type&lt;meta property="og:type" content="website"&gt;
og:site_name&lt;meta property="og:site_name" content="GeekFormat"&gt;
twitter:card&lt;meta name="twitter:card" content="summary_large_image"&gt;
twitter:site&lt;meta name="twitter:site" content="@username"&gt;
twitter:image&lt;meta name="twitter:image" content="https://.../img.jpg"&gt;

Tableau des scénarios d'application d'og:type

website1.91:1 (1200×630)
article1.91:1 (1200×630)
product1.91:1 (1200×630) image de produit recommandée carrée ou 4:3
profileImage d'avatar 1:1 ou image de couverture 1.91:1

Tableau des types de twitter:card

summary
summary_large_image
app
player