Page SEO Analyzer: Auditoría SEO On-Page Gratis
Pega el HTML de una página y obtén una auditoría con puntuación: meta tags, encabezados, canonical, Open Graph, Twitter Card, JSON-LD y señales de accesibilidad.
¿Qué es el Page SEO Analyzer?
El Page SEO Analyzer parsea el HTML de una página e informa sobre lo que realmente afecta al posicionamiento on-page: longitud de title y description, jerarquía de encabezados, URL canonical, cobertura de Open Graph y Twitter Card, datos estructurados JSON-LD y una larga lista de señales técnicas como charset, hreflang, scripts que bloquean el render y alt de imágenes. Recurro a esta herramienta cuando un cliente me envía una sola plantilla para auditar y no tengo acceso a su CMS — pega el HTML renderizado una vez, recibe una lista numerada de correcciones. Errores, advertencias y notas informativas se muestran con código de color y se ordenan por gravedad, y un desglose en cinco pestañas saca a la luz cada señal que el parser encontró, así verificas con la misma facilidad lo que está como lo que falta.
Funciones principales
- Puntuación SEO con desglose por categoría — cada análisis genera una puntuación general 0-100, más subpuntuaciones por crawlability, contenido, social, datos estructurados y accesibilidad, para que veas dónde la página está perdiendo puntos.
- Auditoría de meta tags — extrae y valida title (longitud más estimación de ancho en píxeles frente al límite de ~600px de Google en escritorio), description, canonical, robots, viewport, charset y
<html lang>, marcando campos ausentes o demasiado largos. - Vista de jerarquía de encabezados — lista cada H1 a H6 en orden del documento con sangría, marca H1 ausente, varios H1 y niveles saltados (por ejemplo H2 saltando directo a H4).
- Cobertura de Open Graph y Twitter Card — comprueba
og:title,og:description,og:image,og:url,og:type,og:site_name, además de los cuatro campostwitter:*, y avisa cuandoog:urly<link rel="canonical">no coinciden. - Parseo y validación de JSON-LD — extrae cada bloque
<script type="application/ld+json">, lo parsea, cuenta los bloques no parseables aparte y muestra el@typeresuelto en cada esquema. - Comprobaciones de alt y dimensiones de imágenes — cuenta imágenes sin
alt, conaltvacío, con nombre de archivo como alt (IMG_1234.jpg), sin width/height explícitos (señal de Cumulative Layout Shift) e imágenes below-fold sinloading="lazy". - Auditoría de enlaces — recuento interno vs externo, detección de anchor text genérico (click here, read more, learn more), enlaces a fragmentos en página que apuntan a IDs que no existen, y
target="_blank"sinrel="noopener". - Pestaña Tech — estado de un vistazo para canonical, charset, viewport, html lang, robots, favicon, recuento hreflang, main landmark, preload hints, scripts que bloquean el render, etiquetas obsoletas (
<center>,<font>,<marquee>...) y base href. - Parseo en el navegador — usa el
DOMParsernativo para recorrer el HTML; sin upload, sin API externa.
Cómo usar el Page SEO Analyzer
Paso 1: Pega tu HTML
La única entrada de la página es un textarea con la etiqueta "HTML Input". Pega el código HTML completo de una página — típicamente lo que obtienes de "Ver código fuente" de tu navegador (Ctrl+U / Cmd+Option+U), del cuerpo de respuesta de un curl -L, o del HTML renderizado que has exportado de tu framework. El límite superior de 2 MB se aplica; páginas mayores activan una alerta antes de parsear porque DOMParser en el hilo principal empieza a trabarse.
Paso 2: Haz clic en Analyze
Pulsa el botón Analyze debajo del textarea. El parseo corre en tu navegador; los resultados aparecen al instante. Si el textarea está vacío, la herramienta muestra un toast "Please enter HTML to analyze" en lugar de fallar en silencio.
Paso 3: Lee el resumen de puntuación
Aparece una fila de 4 tarjetas arriba: el Score general (verde a partir de 80, amarillo 50-79, rojo bajo 50), Errors, Warnings y el conteo de Schemas encontrados. Bajo las tarjetas, la lista Issues muestra cada hallazgo ordenado por gravedad — errores primero (XCircle rojo), después advertencias (AlertTriangle amarillo), después notas informativas (CheckCircle azul). Cada issue tiene un mensaje i18n con los números reales rellenos (por ejemplo "8 of 12 images missing alt text").
Paso 4: Profundiza en las pestañas
Cinco pestañas debajo de los issues:
- Meta — title con conteo de caracteres y un badge "Optimal" entre 50-60 caracteres, description con el mismo badge entre 150-160, además de canonical y robots.
- Headings — cada encabezado en orden del documento con un badge
H1-H6y el texto. La sangría visualiza la profundidad de anidamiento. - Social — tarjetas de Open Graph y Twitter Card una al lado de la otra con cada campo relleno o marcado como "Not set".
- Schema — cada bloque JSON-LD con su
@typey un volcado JSON formateado. - Tech — 16 tarjetas de estado pequeñas que cubren charset, viewport, hreflang, main landmark, preload hints, scripts que bloquean el render, imágenes sin dimensiones, cobertura lazy-load, etiquetas obsoletas, recuentos de enlaces internos/externos y base href.
Paso 5: Corrige y vuelve a analizar
Aplica los cambios en tu fuente, pega el HTML nuevo, vuelve a pulsar Analyze. Cada ejecución registra una entrada en el historial con errores, advertencias y conteo de encabezados, así puedes comparar dos pasadas sobre la misma plantilla. Los supporters pueden además guardar snapshots etiquetados, generar un informe PDF y consultar fragmentos de corrección traducidos para los hallazgos más comunes.
Ejemplos prácticos
Auditar una landing de marketing
Una landing tiene <title>Welcome to ProductX — The All-in-One Customer Platform</title> (74 caracteres, muy por encima de la línea de aviso de 60) y ningún <meta name="description">. Al pegar el HTML salen: un warning titleTooLong, un error missingDescription y un warning titlePixelTooLong porque el title también supera el límite de ~600px de Google en escritorio. Recorta el title a unos 50-60 caracteres, escribe una description de 150-160, vuelve a ejecutar y la pestaña Meta muestra los badges verdes "Optimal" junto a ambas longitudes.
Validar datos estructurados Article antes de publicar
Una plantilla de blog añade un bloque JSON-LD Article. Pega el HTML renderizado; la pestaña Schema muestra Schema #1 (Article) con el bloque entero formateado. Si falta una coma, la lista de issues marca invalidJsonLd con el conteo y la pestaña Schema no listará ese bloque — verificación rápida antes del push. La tarjeta de Open Graph al lado también muestra si og:type es article (Facebook lo espera para posts de tipo artículo).
Detectar señales de accesibilidad y rendimiento
Una página pasa un Lighthouse rápido pero la pestaña Tech es más exhaustiva. Render-blocking scripts muestra 4 en amarillo porque cuatro <script src> en <head> no llevan async ni defer. Images Missing Dimensions muestra 12 porque el equipo no fija width y height. Lazy Images muestra 1 / 14 — sólo una de las imágenes elegibles below-fold usa loading="lazy". Cada uno es un fix pequeño que se acumula a través de plantillas.
Consejos y buenas prácticas
Pega HTML renderizado, no HTML fuente. Los frameworks modernos renderizan meta tags, encabezados y JSON-LD vía JavaScript. Si pegas el código fuente pre-render de la plantilla, el analyzer ve un <head> vacío e informa una larga lista de errores falsos positivos. Usa "Copy outerHTML" en DevTools sobre el elemento <html>, o haz curl a la URL con -L para seguir redirecciones.
Corrige primero errores, después advertencias, después info. La lista de issues ya está ordenada por gravedad. Los errores (rojo) bloquean rastreo/indexación — noindexDetected, missingViewport, invalidJsonLd. Las advertencias (amarillo) son fallos reales — longitud de title, alt ausentes, canonical ausente. Info (azul) son notas — metaKeywordsDeprecated, genericAnchorText, paginationLinks. No persigas un score perfecto silenciando notas info; son señales, no errores.
Compara dos snapshots de la misma plantilla. Lanza el analyzer antes y después de un cambio y observa cómo varían los conteos de Errors y Warnings. El panel de historial bajo la herramienta guarda las últimas pasadas como diff rápido. Para auditorías más grandes, los snapshots de supporter te permiten etiquetar pasadas y restaurar el HTML después.
Confía en la comprobación de píxeles, no sólo en el conteo de caracteres. Dos titles de 60 caracteres pueden renderizarse a anchos distintos por las formas de las letras — "WWW Information Initiative" es más ancho que "lily lily lily lily lily i" con el mismo conteo. La truncación de SERP de Google es por píxeles a unos 600px. El warning titlePixelTooLong atrapa titles que cumplen el presupuesto de caracteres pero igual se cortan.
Problemas comunes y resolución
"Please enter HTML to analyze" — el textarea está vacío o sólo contiene whitespace. Pega HTML real (no tiene que empezar con <!DOCTYPE html>; los fragmentos parciales parsean bien, pero un <head> ausente hará que la mayoría de campos aparezcan como "not set").
"HTML too large (max 2 MB)" — la entrada supera 2 MB. Recorta a la sección que te interesa (normalmente el <head> más el esqueleto del body basta para la mayoría de comprobaciones), o guarda el HTML en un archivo y usa un script local. El límite de 2 MB existe porque DOMParser en el hilo principal puede trabarse o congelar la pestaña con entradas mayores.
"Failed to parse HTML" — el parser no pudo entender la entrada. Normalmente significa que la entrada no es HTML (pegaste JSON o una URL por accidente). Confirma que la entrada empieza con < y contiene sintaxis de etiquetas.
El score es más bajo de lo esperado en una página que sabes que está bien. Mira la pestaña Tech. Muchos puntos vienen de notas informativas que no aparecen en el resumen de issues — favicon ausente, sin preload hints en una página rica en contenido, anchor text genérico en tu navegación. Ninguno es un blocker, pero todos restan al score.
El conteo de JSON-LD es uno menos de lo esperado. Ese bloque tiene un error de sintaxis JSON y aparece en la lista de issues como invalidJsonLd en lugar de en la pestaña Schema. Copia el bloque al JSON Formatter para encontrar la coma faltante o la llave sin cerrar.
El conteo de hreflang parece correcto pero hreflangInvalid se dispara. Los valores hreflang deben ser BCP-47 — en, en-US, pt-BR, o el especial x-default. La herramienta marca códigos que no coinciden con ^([a-z]{2,3}(-[A-Za-z0-9]+)*|x-default)$ (case-insensitive). Culpables comunes: en_US con guion bajo, english, o whitespace al final.
Privacidad y seguridad
El Page SEO Analyzer parsea HTML en tu navegador usando el DOMParser nativo. El HTML que pegas no sale de tu dispositivo, y no hay un endpoint de servidor que lo reciba. Esto importa para staging y páginas no publicadas — puedes auditar una plantilla en borrador todavía detrás de autenticación sin exponerla a un crawler de terceros. Una vez cargado el JavaScript de la herramienta, el análisis en sí corre offline.
Preguntas frecuentes
¿Cómo decide la herramienta qué cuenta como un issue serio frente a una nota?
Tres niveles de gravedad alineados con la guía de W3C/Google para cada señal. Errores son blockers — directivas noindex, <meta viewport> ausente, fallos de parseo en JSON-LD, H1 ausente en página de contenido. Advertencias son fallos reales que dañan la apariencia en SERP o la accesibilidad pero no bloquean indexación — title o description fuera de longitud recomendada, mismatch entre canonical y og:url, target="_blank" sin rel="noopener". Las notas info son señales de calidad — anchor text genérico, favicon ausente, tags obsoletos. La gravedad se establece en la generación de issues del código fuente, no es configurable por pasada.
¿Puede el analyzer obtener una URL por mí?
No por ahora. El textarea acepta sólo HTML pegado, porque las peticiones in-browser contra orígenes arbitrarios están bloqueadas por CORS y necesitarían un proxy de servidor. Si necesitas auditar una URL remota, ejecuta curl -L -A "Mozilla/5.0" https://example.com > page.html desde una terminal y pega el contenido del archivo.
¿Por qué pasa mi comprobación de longitud de title pero titlePixelTooLong igual se dispara?
Porque Google trunca los titles a unos 600 píxeles al renderizar Arial a 20px, no a 60 caracteres. Las letras anchas (M, W, mayúsculas en general, em-dashes) empujan el conteo de píxeles por encima del límite aunque la cuenta de caracteres parezca correcta. La estimación de píxeles usa measureText de canvas contra 20px Arial,Helvetica,sans-serif — una aproximación cercana a lo que Google usa en SERPs de escritorio.
¿Qué significa realmente el score?
El score es una suma ponderada sobre cinco categorías: crawlability (¿pueden los buscadores indexar esto?), contenido (title, description, encabezados), social (Open Graph, Twitter Card), datos estructurados (presencia y validez de JSON-LD) y accesibilidad (alt text, lang, landmarks). Cada issue resta un número fijo de puntos según gravedad. Un score de 80+ indica que las señales principales están presentes y bien formadas; 50-79 significa fallos reales; menos de 50 significa que al menos un blocker de tier error se está disparando. Trata el score como un resumen direccional, no como una nota absoluta.
¿La herramienta comprueba algo que requiera ejecutar la página?
No — toda comprobación es estática en parse time. Cosas que requieren ejecución o red (timing de Core Web Vitals, códigos de respuesta del servidor, fetch de robots.txt, alcanzabilidad de sitemap) están fuera del scope. Para eso, usa el Próximamente: Comprobador de enlaces rotos para validación en crawl-time y las Próximamente: Herramientas de Sitemap para diagnósticos de sitemap.
¿Puedo auditar una página detrás de login?
Sí, y por eso la herramienta es útil. Abre la página logueado, copia el HTML renderizado desde DevTools (clic derecho sobre <html> → Copy → Copy outerHTML), pega, analiza. Nada sale de tu navegador, así que páginas autenticadas y plantillas no publicadas son seguras de probar.
Herramientas relacionadas
- Próximamente: Generador de Meta Tags — genera el title, description, Open Graph y Twitter Card que este analyzer comprueba.
- Próximamente: Generador de Schema — construye JSON-LD válido de Article, FAQ, Product y Organization sin escribir el JSON a mano.
- Próximamente: Vista previa de SERP — mira cómo se verán tu title y description en Google antes de desplegar el cambio.
- Próximamente: Suite de Accesibilidad — auditoría de accesibilidad más profunda con ARIA, contraste, navegación por teclado y etiquetas de formulario.
- Formateador JSON — depura warnings
invalidJsonLdreformateando y validando el bloque.
Prueba Page SEO Analyzer ahora: Próximamente: Page SEO Analyzer