Qu'est-ce que les meta tags et pourquoi prendre la peine de les écrire ?
Les meta tags sont des instructions invisibles dans la section `<head>` de votre page. Ils disent à Google quel titre montrer dans les résultats de recherche, à Facebook quelle image utiliser pour l'aperçu, et au navigateur dans quelle langue est le contenu. Sans eux Google choisit son propre titre (généralement pire que le vôtre), et l'aperçu Facebook montre un lien sans image, le domaine au lieu du titre.
Ici vous remplissez un formulaire, basculez des switches pour les sections dont vous avez besoin (Basic, OpenGraph, Twitter Card, Article), et sur la droite vous voyez quatre aperçus de exactement à quoi votre lien ressemblera dans les résultats Google, sur Facebook, sur X (Twitter) et sur LinkedIn. Vous copiez le bloc HTML fini et le collez entre `<head>` et `</head>` sur votre page.
Titre et description pour un moteur de recherche c'est l'unique optimisation SEO la plus rentable. Une paire bien écrite lève le CTR de 20-50 % sans aucun changement au contenu de la page.
Mode d'emploi
- Commencez avec Basic : tapez un titre (max 60 caractères, Google tronque plus long) et une description (140-160 caractères). Ça apparaît dans les résultats Google.
- Activez OpenGraph et remplissez og:image (URL vers une image 1200×630 px). Sans, Facebook, LinkedIn et Slack montrent un aperçu sans miniature.
- Activez Twitter Card, choisissez `summary_large_image` (grande carte avec une grande image). Tapez votre handle (@votre-entreprise) dans le champ site.
- Si la page est un article de blog, activez Article et remplissez les dates de publication/modif et l'auteur.
- Sur la droite vous voyez les aperçus en direct pour 4 plateformes. Ajustez la longueur titre/description, vérifiez les avertissements, copiez tout le bloc HTML et collez dans `<head>` sur votre page.
Quand cet outil aide
Situations courantes où il est payant de générer un set complet de meta tags :
- Nouvel article de blog. Tapez un titre, description, og:image, réglez les dates de publication/modif et copiez le bloc HTML dans votre CMS (WordPress a les champs SEO Yoast / Rank Math, Next.js a `generateMetadata`).
- Page d'annonce d'emploi. Les RH partagent le lien sur LinkedIn, l'aperçu doit avoir l'air pro. Sans og:image LinkedIn ne montre que le domaine.
- Landing page produit. La campagne pub a besoin d'aperçus rangés sur Facebook Ads. Tapez og:type=product, og:image avec une photo forte, og:price (via og:price:amount + og:price:currency).
- Audit SEO client. Vérifiez les pages clés, générez un bloc meta frais pour chacune, remettez le HTML aux développeurs à déployer.
- Landing page d'app mobile. Avant le lancement App Store / Google Play, vérifiez à quoi le lien ressemble quand quelqu'un le colle dans iMessage ou Slack.
- Site international. Pour chaque version linguistique générez un bloc séparé avec `og:locale=fr_FR` (ou `en_US`) pour que Facebook sache quelle version montrer.
Après avoir déployé le code, vérifiez à quoi ça ressemble avec l'aperçu OpenGraph. Si vous générez aussi des données structurées (JSON-LD), utilisez le générateur de schéma JSON-LD.