Vérificateur de balises méta Open Graph et de partage social

--- name: open-graph-and-social-share-meta-tag-checker description: Vérifie le code source HTML d'une page pour les balises à partir desquelles les aperçus de liens sont construits - longueur du titre et de la description, rel=canonical, og:title/description/type/url/site_name/locale, taille de og:image, aspect, alt et SVG, twitter:card et handles. Signale les URLs relatives/http://, les paramètres de suivi, les doublons de thème et de plugin SEO, les balises dans <body> et les placeholders non rendus {{ }}, et renvoie un bloc <head> corrigé. Inclut un vérificateur Python stdlib hors ligne avec --self-test. --- # Vérificateur de balises meta Open Graph et de partage social Vous faites en sorte que les liens partagés soient corrects sur Facebook, LinkedIn, X, Slack, Discord, WhatsApp et iMessage. Vous lisez le code source de la page que les crawlers voient, montrez à l'utilisateur ce à partir de quoi l'aperçu sera construit (titre, description, image, domaine), expliquez pourquoi un aperçu est vide, recadré ou affiche le logo, et renvoyez un bloc <head> corrigé. Vous travaillez à partir de HTML enregistré ; vous ne prétendez jamais avoir récupéré la page en direct ou avoir vu le cache d'une plateforme. ## Fichiers dans cette compétence - `scripts/og_meta_check.py` - analyse le HTML avec `html.parser` et vérifie les balises title, description, canonical, og:* et twitter:* ; avec `--root`, il lit la largeur/hauteur réelle et la taille de fichier des images de partage locales PNG/JPEG/GIF/WebP (bibliothèque standard Python 3.8+ uniquement) - `references/tag-rules.md` - chaque balise, les valeurs acceptées par les crawlers, les longueurs, les tailles d'image et les solutions de repli - `references/platform-notes.md` - comment Facebook, LinkedIn, X, Slack, Discord, WhatsApp et iMessage construisent les aperçus, les mettent en cache et comment les actualiser - `templates/share-meta-review.md` - la revue à renvoyer (aperçu, tableau de corrections, bloc head corrigé, étapes d'actualisation) - `examples/product-page.html` - une page produit dont le thème et le plugin SEO écrivent tous deux des balises, avec des erreurs intentionnelles - `examples/product-page-fixed.html` - la même page avec un head correct (vérifications propres) - `examples/meta-report.md` - la sortie réelle du vérificateur sur l'exemple cassé ## Flux de travail ### 1. Obtenez le HTML que les crawlers voient Demandez l'URL de la page et le code source rendu par le serveur, pas la vue Éléments de DevTools (celle-ci montre les balises ajoutées par JavaScript, que la plupart des crawlers n'exécutent jamais) : ``` curl -sL -A "facebookexternalhit/1.1" https://example.com/page -o page.html curl -sL -A "Twitterbot/1.0" https://example.com/page -o page-x.html ``` Pour un site statique ou un dossier de build, pointez le vérificateur vers le dossier et passez `--root` afin que les images de partage soient mesurées depuis le disque. Demandez quelles plateformes comptent le plus (B2B : LinkedIn et Slack ; grand public : WhatsApp, iMessage, Facebook, X). ### 2. Exécutez le vérificateur ``` python3 scripts/og_meta_check.py examples/product-page.html --url https://shop.example.com/shoes/trail-grip python3 scripts/og_meta_check.py dist/ --root dist/ --min-severity MEDIUM python3 scripts/og_meta_check.py page.html --url https://example.com/blog/post --json python3 scripts/og_meta_check.py --self-test ``` Donnez `--url` pour une seule page afin que les liens relatifs soient résolus et que canonical/og:url soient comparés. Sortie 0 = aucun HIGH, 1 = résultats HIGH, 2 = entrée invalide. Si vous ne pouvez pas exécuter de code, parcourez `references/tag-rules.md` dans le même ordre. ### 3. Expliquez l'aperçu - Commencez par le tableau d'aperçu : c'est ce que les gens verront. Une `og:image` manquante, relative ou SVG est la raison habituelle d'un lien texte nu ; une image carrée ou petite donne une petite vignette au lieu d'une grande carte. - **HIGH** casse l'aperçu (pas de og:image ou relative, image sous 200x200, pas de titre, plusieurs canonicals). **MEDIUM** montre la mauvaise chose (doublons, placeholders, balises dans `<body>`, twitter:card invalide, paramètres de suivi, SVG). **LOW** est du polissage (longueurs, texte alt, format de locale, site_name). - Les doublons viennent généralement de deux systèmes (thème plus plugin SEO, défaut du framework plus composant de page). Dites lequel désactiver plutôt que d'ajouter un troisième ensemble. ### 4. Livrez Remplissez `templates/share-meta-review.md` : l'aperçu avant/après, le tableau de corrections, un bloc `<head>` complet avec des valeurs réelles (ou des placeholders clairement marqués), la spécification de l'image de partage (JPEG/PNG 1200x630 sous ~1 Mo, texte dans le centre sûr), et comment actualiser les caches (Facebook Sharing Debugger "Scrape Again", LinkedIn Post Inspector ; X, Slack et WhatsApp re-récupèrent après expiration de leur cache ou avec une URL modifiée). ## Exemple de résultat Sur `examples/product-page.html`, le vérificateur signale 21 résultats (HIGH 1, MEDIUM 10, LOW 10) : la seule og:image dans `<head>` est un logo SVG relatif, la vraie image produit se trouve dans `<body>` à 800x800, le plugin SEO ajoute un second og:title avec un `{{ product.name }}` non rendu, og:url porte `?utm_source=newsletter` et diffère du canonical relatif, `twitter:card` est `large`, twitter:site est une URL au lieu de `@peakline`, og:description utilise `name=` et fait 269 caractères, et le titre est juste `Peakline`. `examples/product-page-fixed.html` vérifie propre (sortie 0). ## Règles - Jugez le HTML rendu par le serveur ; dites clairement quand les balises n'existent qu'après l'exécution de JavaScript. - N'inventez jamais de faits produit, de prix ou de handles de marque pour les balises corrigées ; utilisez le texte de la page ou marquez `<placeholder>`. - Une valeur par balise à valeur unique ; supprimez la source du doublon au lieu de la remplacer. - Toutes les URLs dans og:url, og:image, twitter:image et canonical doivent être des URLs absolues https:// sans paramètres de suivi. - Ne promettez pas comment une plateforme recadrera ou quand elle actualisera ; donnez les tailles documentées et l'outil d'actualisation, et marquez le reste "à vérifier" dans le débogueur de la plateforme. - Gardez og:title sans le suffixe du nom du site (og:site_name porte la marque) sauf si l'utilisateur le souhaite.