Page SEO Analyzer : Audit SEO On-Page Gratuit
Collez le HTML d'une page et obtenez un audit noté : meta tags, hiérarchie des titres, canonical, Open Graph, Twitter Card, JSON-LD et signaux d'accessibilité.
Qu'est-ce que le Page SEO Analyzer ?
Le Page SEO Analyzer parse le HTML d'une page et signale ce qui pèse réellement sur le référencement on-page : longueur du title et de la description, hiérarchie des titres, URL canonical, couverture Open Graph et Twitter Card, données structurées JSON-LD, et une longue liste de signaux techniques comme charset, hreflang, scripts bloquant le rendu et alt des images. J'utilise cet outil quand un client m'envoie une seule template à auditer mais que je n'ai pas accès à son CMS — collez le HTML rendu une fois, recevez une liste numérotée de corrections. Erreurs, avertissements et notes informatives sont colorisés et triés par gravité, et un découpage en cinq onglets fait remonter chaque signal trouvé par le parser, donc vous vérifiez aussi facilement ce qui est présent que ce qui manque.
Fonctionnalités clés
- Score SEO avec ventilation par catégorie — chaque analyse produit un score global 0-100, plus des sous-scores par catégorie pour crawlability, contenu, social, données structurées et accessibilité, pour voir où la page perd des points.
- Audit des meta tags — extrait et valide le title (longueur plus estimation de largeur en pixels face à la limite Google de ~600px en desktop), la description, canonical, robots, viewport, charset et
<html lang>, en signalant les champs manquants ou trop longs. - Vue de la hiérarchie des titres — liste chaque H1 à H6 dans l'ordre du document avec indentation, signale H1 manquant, plusieurs H1 et niveaux sautés (par exemple H2 sautant directement à H4).
- Couverture Open Graph et Twitter Card — vérifie
og:title,og:description,og:image,og:url,og:type,og:site_name, ainsi que les quatre champstwitter:*, et alerte quandog:urlet<link rel="canonical">divergent. - Parsing et validation JSON-LD — extrait chaque bloc
<script type="application/ld+json">, le parse, compte les blocs non parsables séparément et affiche le@typerésolu sur chaque schéma. - Vérifications alt texte et dimensions des images — compte les images sans
alt, avecaltvide, avec nom de fichier comme alt (IMG_1234.jpg), sanswidthetheightexplicites (signal Cumulative Layout Shift), et les images below-fold sansloading="lazy". - Audit des liens — comptes internes vs externes, détection des anchor texts génériques (click here, read more, learn more), liens-fragments en page pointant vers des IDs inexistants, et
target="_blank"sansrel="noopener". - Onglet Tech — statut en un coup d'œil pour canonical, charset, viewport, html lang, robots, favicon, nombre de hreflang, main landmark, preload hints, scripts bloquant le rendu, balises obsolètes (
<center>,<font>,<marquee>...) et base href. - Parsing côté navigateur — utilise le
DOMParsernatif pour parcourir le HTML ; pas d'upload, pas d'API externe.
Comment utiliser le Page SEO Analyzer
Étape 1 : Collez votre HTML
L'unique champ de la page est un textarea libellé "HTML Input". Collez le code HTML complet d'une page — typiquement ce que vous obtenez via "Code source de la page" du navigateur (Ctrl+U / Cmd+Option+U), via le corps de réponse d'un curl -L, ou via le HTML rendu exporté depuis votre framework. La limite de 2 Mo est appliquée ; au-delà, l'outil avertit avant de parser car DOMParser sur le thread principal commence à bégayer.
Étape 2 : Cliquez sur Analyze
Pressez le bouton Analyze sous le textarea. Le parsing tourne dans votre navigateur ; les résultats apparaissent immédiatement. Si le textarea est vide, l'outil affiche un toast "Please enter HTML to analyze" plutôt que d'échouer en silence.
Étape 3 : Lisez le résumé du score
Une rangée de 4 cartes apparaît en haut : le Score global (vert à partir de 80, jaune 50-79, rouge sous 50), Errors, Warnings et le compte de Schemas trouvés. Sous les cartes, la liste Issues affiche chaque résultat trié par gravité — erreurs en premier (XCircle rouge), puis avertissements (AlertTriangle jaune), puis notes informatives (CheckCircle bleu). Chaque issue a un message i18n avec les chiffres pertinents remplis (par exemple "8 of 12 images missing alt text").
Étape 4 : Plongez dans les onglets
Cinq onglets sous les issues :
- Meta — title avec compte de caractères et un badge "Optimal" entre 50-60 caractères, description avec le même badge entre 150-160, plus canonical et robots.
- Headings — chaque titre dans l'ordre du document avec un badge
H1-H6et le texte. L'indentation visualise la profondeur d'imbrication. - Social — cartes Open Graph et Twitter Card côte à côte avec chaque champ rempli ou marqué "Not set".
- Schema — chaque bloc JSON-LD avec son
@typeet un dump JSON formaté. - Tech — 16 petites cartes de statut couvrant charset, viewport, hreflang, main landmark, preload hints, scripts bloquant le rendu, images sans dimensions, couverture lazy-load, balises obsolètes, comptes de liens internes/externes et base href.
Étape 5 : Corrigez et relancez l'analyse
Faites les corrections dans votre source, collez le nouveau HTML, cliquez encore sur Analyze. Chaque exécution enregistre une entrée d'historique résumant erreurs, avertissements et nombre de titres, ce qui permet de comparer deux passes sur la même template. Les supporters peuvent en plus enregistrer des snapshots étiquetés, générer un rapport PDF, et consulter des fragments de correction traduits pour les résultats les plus courants.
Exemples pratiques
Auditer une landing marketing
Une landing a <title>Welcome to ProductX — The All-in-One Customer Platform</title> (74 caractères, bien au-dessus du seuil d'avertissement de 60) et aucun <meta name="description">. En collant le HTML, on obtient : un avertissement titleTooLong, une erreur missingDescription, et un avertissement titlePixelTooLong parce que le title dépasse aussi la limite Google de ~600px en desktop. Raccourcissez le title à environ 50-60 caractères, écrivez une description de 150-160, relancez, et l'onglet Meta affiche les badges verts "Optimal" à côté des deux longueurs.
Valider des données structurées Article avant publication
Une template d'article ajoute un bloc JSON-LD Article. Collez le HTML rendu ; l'onglet Schema affiche Schema #1 (Article) avec le bloc complet formaté. S'il manque une virgule, la liste d'issues affiche invalidJsonLd avec le compte et l'onglet schema ne listera pas ce bloc — vérification rapide avant push. La carte Open Graph à côté indique aussi si og:type vaut article (Facebook l'attend pour les posts d'articles).
Repérer des odeurs d'accessibilité et de performance
Une page passe un Lighthouse rapide mais l'onglet Tech est plus exhaustif. Render-blocking scripts affiche 4 en jaune parce que quatre <script src> dans <head> n'ont ni async ni defer. Images Missing Dimensions affiche 12 parce que l'équipe ne pose pas width et height. Lazy Images affiche 1 / 14 — une seule image éligible below-fold utilise loading="lazy". Chacun est un petit fix qui s'accumule à travers les templates.
Conseils et bonnes pratiques
Collez du HTML rendu, pas du HTML source. Les frameworks modernes rendent les meta tags, titres et JSON-LD via JavaScript. Si vous collez le source pré-rendu, l'analyzer voit un <head> vide et signale une longue liste de fausses erreurs. Utilisez "Copy outerHTML" dans DevTools sur l'élément <html>, ou faites un curl sur l'URL avec -L pour suivre les redirects.
Corrigez d'abord les erreurs, puis les avertissements, puis les infos. La liste d'issues est déjà triée par gravité. Les erreurs (rouge) bloquent le crawl/index — noindexDetected, missingViewport, invalidJsonLd. Les avertissements (jaune) sont de vrais manques — longueur de title, alt manquants, canonical absent. Les infos (bleu) sont des nudges — metaKeywordsDeprecated, genericAnchorText, paginationLinks. Ne courrez pas après un score parfait en silenciant les notes info ; ce sont des signaux, pas des erreurs.
Comparez deux snapshots de la même template. Lancez l'analyzer avant et après une correction et regardez les comptes Errors et Warnings changer. Le panneau d'historique sous l'outil garde les dernières passes comme source de diff rapide. Pour les audits plus larges, les snapshots supporter permettent d'étiqueter des passes et de restaurer le HTML plus tard.
Faites confiance à la vérification de largeur en pixels, pas seulement au compte de caractères. Deux titles de 60 caractères peuvent rendre à des largeurs en pixels différentes selon les formes de lettres — "WWW Information Initiative" est plus large que "lily lily lily lily lily i" au même compte de caractères. La troncature SERP de Google est en pixels à environ 600px. L'avertissement titlePixelTooLong attrape les titles qui tiennent dans le budget caractères mais sont quand même coupés.
Problèmes courants et dépannage
"Please enter HTML to analyze" — le textarea est vide ou contient seulement du whitespace. Collez du vrai HTML (pas besoin de commencer par <!DOCTYPE html> ; les fragments partiels parsent bien, mais un <head> manquant fera apparaître la plupart des champs comme "not set").
"HTML too large (max 2 MB)" — l'entrée dépasse 2 Mo. Réduisez à la section qui vous intéresse (généralement le <head> plus le squelette du body suffit pour la plupart des vérifications), ou enregistrez le HTML dans un fichier et utilisez un script local. La limite de 2 Mo existe parce que DOMParser sur le thread principal peut bégayer ou geler l'onglet sur des entrées plus larges.
"Failed to parse HTML" — le parser n'a pas pu traiter l'entrée. C'est généralement parce que l'entrée n'est pas du HTML (vous avez collé du JSON ou une URL par accident). Confirmez que l'entrée commence par < et contient une syntaxe de tags.
Le score est plus bas qu'attendu sur une page connue comme bonne. Regardez l'onglet Tech. Beaucoup de points sortent de notes informatives qui n'apparaissent pas dans le résumé d'issues — favicon absent, pas de preload hints sur une page riche en contenu, anchor text générique dans la nav. Aucun n'est bloquant, mais tous retirent des points.
Le compte JSON-LD est inférieur d'un à ce qu'on attendait. Ce bloc de schéma a une erreur de syntaxe JSON et apparaît dans la liste d'issues comme invalidJsonLd plutôt que dans l'onglet schema. Copiez le bloc dans le JSON Formatter pour trouver la virgule manquante ou l'accolade non fermée.
Le compte hreflang semble correct mais hreflangInvalid se déclenche. Les valeurs hreflang doivent être BCP-47 — en, en-US, pt-BR, ou la valeur spéciale x-default. L'outil signale les codes qui ne correspondent pas à ^([a-z]{2,3}(-[A-Za-z0-9]+)*|x-default)$ (insensible à la casse). Coupables courants : en_US avec underscore, english, ou whitespace en fin.
Confidentialité et sécurité
Le Page SEO Analyzer parse le HTML dans votre navigateur via le DOMParser natif. Le HTML que vous collez ne quitte pas votre appareil, et il n'existe pas d'endpoint serveur qui le reçoive. Cela compte pour le staging et les pages non publiées — vous pouvez auditer une template encore derrière une authentification sans l'exposer à un crawler tiers. Une fois le JavaScript de l'outil chargé, l'analyse elle-même tourne hors-ligne.
Foire aux questions
Comment l'outil décide ce qui compte comme issue sérieuse versus simple nudge ?
Trois niveaux de gravité alignés sur les recommandations W3C/Google pour chaque signal. Les erreurs sont des bloquants — directives noindex, <meta viewport> absent, échecs de parsing en JSON-LD, H1 absent sur une page de contenu. Les avertissements sont de vrais manques qui dégradent l'apparence en SERP ou l'accessibilité mais ne bloquent pas l'indexation — title ou description hors longueur recommandée, mismatch canonical / og:url, target="_blank" sans rel="noopener". Les infos sont des nudges qualitatifs — anchor text générique, favicon absent, balises obsolètes. La gravité est définie à l'étape de génération des issues dans le code source, pas configurable par passage.
L'analyzer peut-il récupérer une URL pour moi ?
Pas pour l'instant. Le textarea n'accepte que du HTML collé, parce que les fetches in-browser contre des origines arbitraires sont bloqués par CORS et nécessiteraient un proxy serveur. Si vous devez auditer une URL distante, lancez curl -L -A "Mozilla/5.0" https://example.com > page.html depuis un terminal et collez le contenu du fichier.
Pourquoi ma vérification de longueur de title passe-t-elle mais titlePixelTooLong se déclenche quand même ?
Parce que Google tronque les titles à environ 600 pixels au rendu Arial 20px standard, pas à 60 caractères. Les lettres larges (M, W, majuscules en général, em-dashes) poussent le compte de pixels au-dessus de la limite même quand le compte de caractères a l'air bon. L'estimation de pixels utilise measureText du canvas contre 20px Arial,Helvetica,sans-serif — une approximation proche de ce que Google utilise sur les SERP desktop.
Que signifie le score, en réalité ?
Le score est une somme pondérée sur cinq catégories : crawlability (les moteurs peuvent-ils indexer ?), contenu (title, description, titres), social (Open Graph, Twitter Card), données structurées (présence et validité JSON-LD) et accessibilité (alt, lang, landmarks). Chaque issue retire un nombre fixe de points selon la gravité. 80+ indique que les signaux majeurs sont présents et bien formés ; 50-79 signifie de vrais manques ; sous 50 signifie qu'au moins un bloquant de niveau erreur se déclenche. Traitez le score comme un résumé directionnel, pas comme une note absolue.
L'outil vérifie-t-il quelque chose qui requiert d'exécuter la page ?
Non — chaque vérification est statique au parse-time. Tout ce qui requiert exécution ou réseau (timing Core Web Vitals, codes de réponse serveur, fetch de robots.txt, accessibilité du sitemap) est hors scope. Pour cela, utilisez le Bientôt disponible: Vérificateur de liens cassés pour la validation au crawl-time et les Bientôt disponible: Outils Sitemap pour les diagnostics de sitemap.
Puis-je auditer une page protégée par un login ?
Oui, et c'est une raison d'utiliser cet outil. Ouvrez la page connecté, copiez le HTML rendu depuis DevTools (clic droit sur <html> → Copy → Copy outerHTML), collez, analysez. Rien ne quitte votre navigateur, donc les pages authentifiées et les templates non publiées peuvent être testées sans risque.
Outils associés
- Bientôt disponible: Générateur de Meta Tags — générez le title, la description, Open Graph et Twitter Card que cet analyzer vérifie.
- Bientôt disponible: Générateur de Schema — construisez du JSON-LD valide pour Article, FAQ, Product et Organization sans écrire le JSON à la main.
- Bientôt disponible: Aperçu SERP — voyez comment votre title et description s'afficheront sur Google avant de déployer le changement.
- Bientôt disponible: Suite Accessibilité — audit accessibilité plus poussé couvrant ARIA, contraste, navigation clavier et labels de formulaire.
- Formateur JSON — déboguez les avertissements
invalidJsonLden reformatant et validant le bloc fautif.
Essayez Page SEO Analyzer maintenant : Bientôt disponible: Page SEO Analyzer