Qué hace realmente un verificador de metadatos de sitios web
Un verificador de metadatos envía una solicitud HTTP a tu URL, analiza la sección HTML <head> y extrae cada etiqueta meta relevante. Busca <title>, <meta name="description">, <meta property="og:...">, <meta name="twitter:...">, <link rel="canonical">, <link rel="icon">, <link rel="alternate" hreflang="...">, <meta name="viewport"> y cualquier bloque <script type="application/ld+json">. Muestra cada etiqueta con el nombre del atributo y el valor del contenido en un informe estructurado.
Luego va un paso más allá. Renderiza una tarjeta de vista previa SERP usando el título y la meta descripción tal como aparecerían en la búsqueda de Google en desktop y móvil. Renderiza una vista previa de tarjeta de Twitter usando las etiquetas twitter:title, twitter:description y twitter:image. Renderiza una vista previa de LinkedIn usando etiquetas Open Graph. Y muestra una vista previa de despliegue de Slack, que utiliza etiquetas OG por defecto pero retrocede al título de la página si OG no existe.
Dos problemas son invisibles hasta que ves la vista previa. El primero es el truncamiento: los títulos más largos de 60 caracteres o las meta descripciones más largas de 160 caracteres se cortan en Google. El segundo es la falta de imágenes. Una página podría tener un título y descripción pero no tener og:image, por lo que la tarjeta de Twitter aparece solo con texto y se ve rota. Las vistas previas capturan ambas al instante.
Cómo usar este verificador de metadatos de sitios web
- Pega la URL de la página en Page URL. Usa la versión canónica si la conoces (https, www si corresponde, sin parámetros UTM).
- Selecciona un User-agent del menú desplegable si deseas ver cómo difieren los metadatos para usuarios móviles o Googlebot. Desktop Chrome es el predeterminado. Mobile Chrome y Googlebot son útiles para probar la indexación mobile-first o metadatos renderizados por JavaScript.
- Pega una segunda URL en Compare with si deseas ver tus metadatos junto a los de un competidor o verificar la consistencia en versiones de idioma diferentes de la misma página.
- Haz clic en Check metadata. Obtendrás una tabla de etiquetas extraídas, advertencias para etiquetas faltantes o inválidas, y cuatro tarjetas de vista previa renderizadas: Google SERP, Twitter/X, LinkedIn y Slack.
- Expande la sección Warnings si hay filas marcadas. Reportamos
og:imagefaltante, títulos truncados, errores de configuración de viewport, esquema inválido y errores de hreflang.
Prueba verificando la URL de un post de blog. Si la página no tiene una imagen Open Graph, ves una vista previa de Google con título y descripción, pero las vistas previas de Twitter y LinkedIn muestran placeholders de imagen rota. Añade una etiqueta og:image que apunte a un PNG de 1200x630, vuelve a verificar, y las vistas previas se actualizan para mostrar la imagen de héroe.
Por qué las vistas previas renderizadas importan más que las etiquetas sin procesar
Una etiqueta puede estar presente técnicamente y aun así fallar en la práctica. Un título con 80 caracteres pasa la validación pero se trunca en Google a 60, por lo que los últimos 20 caracteres son invisibles para los buscadores. Una URL og:image puede devolver 404, haciendo que la etiqueta sea inútil aunque exista. Un twitter:card establecido en summary_large_image requiere una imagen con relación de aspecto 2:1, pero si la imagen es cuadrada, Twitter retrocede a la tarjeta de resumen pequeño.
Tres consecuencias prácticas.
Tasa de clics. Los títulos truncados y las imágenes faltantes afectan negativamente el CTR en búsqueda y redes sociales. Una vista previa pulida con un título claro, descripción orientada al beneficio e imagen impactante obtiene más clics que un fragmento de texto simple. Hacer pruebas antes de publicar te permite corregir el diseño antes de perder tráfico.
Consistencia de marca. Si tu página de inicio tiene metadatos perfectos pero las páginas de producto no tienen imagen OG o retroceden al logo del sitio, la experiencia del usuario es inconsistente. Verificar en masa las plantillas revela qué tipos de página necesitan correcciones.
Diferencias de plataforma. Google lee el título y la meta descripción. Twitter lee twitter:title y twitter:description, o retrocede a etiquetas OG. LinkedIn solo lee etiquetas OG. Slack lee etiquetas OG y a veces el favicon. Una etiqueta faltante puede romper la vista previa en una plataforma pero no en otras. Ver las cuatro vistas previas al mismo tiempo muestra las brechas.
Open Graph vs Twitter Card vs schema.org
Las etiquetas Open Graph fueron inventadas por Facebook y ahora son utilizadas por LinkedIn, Slack, Discord y la mayoría de plataformas sociales. Las etiquetas principales son og:title, og:description, og:image, og:url y og:type. Establecer estas controla cómo se ven los links cuando se comparten.
Las etiquetas Twitter Card (twitter:card, twitter:title, twitter:description, twitter:image) anulan las etiquetas OG en Twitter/X. Si ambas están presentes, Twitter lee primero las etiquetas de Twitter. Si solo están presentes las etiquetas OG, Twitter las usa. La mayoría de sitios establecen etiquetas OG y omiten etiquetas de Twitter porque el retroceso funciona. La excepción es twitter:card, que debe establecerse en summary_large_image si deseas la vista previa de imagen grande.
Los datos estructurados schema.org viven en scripts JSON-LD en el <head> o <body>. Le dice a Google qué tipo de contenido contiene la página (Article, Product, Recipe, Event, FAQ) y proporciona campos legibles por máquina como autor, fecha de publicación, precio y calificación. Google usa esto para resultados enriquecidos como calificaciones por estrellas en búsqueda. Nuestro verificador valida la sintaxis JSON-LD e informa los tipos de esquema encontrados.
Hreflang, canonical y viewport
Las etiquetas Hreflang declaran variantes de idioma y región de una página. Si tienes versiones en inglés, español y francés de /about, cada una debe tener etiquetas <link rel="alternate" hreflang="es" href="..."> que apunten a las otras. Google usa estas para servir el idioma correcto en resultados de búsqueda. Nuestro verificador enumera cada etiqueta hreflang y marca errores comunes: links de retorno faltantes, códigos de idioma incorrectos o hreflang apuntando a un 404.
La etiqueta canonical le dice a Google cuál es la URL original cuando existen duplicados. Un verificador de metadatos reporta el canonical y si es auto-referencial o apunta a otro lugar. Si ves un canonical apuntando a un dominio diferente o un 404, esa es una bandera roja. Usa nuestro verificador de canonical para diagnósticos de canonical más profundos.
La etiqueta meta viewport (<meta name="viewport" content="width=device-width, initial-scale=1">) controla el renderizado móvil. Si falta, los navegadores móviles renderizan la página en ancho de desktop y la escalan, haciendo el texto diminuto. Google penaliza páginas sin etiqueta viewport en la indexación mobile-first. Nuestro verificador marca la ausencia o reporta el valor del contenido si está presente.
Errores comunes
- Establecer el título OG diferente del título HTML. Si
<title>tiene 70 caracteres yog:titletiene 40, tu snippet de Google y tu tarjeta de compartición social tienen copias diferentes. Esto confunde a los usuarios. Mantenlos alineados a menos que tengas una razón fuerte para diferir. - Usar una imagen cuadrada para
og:image. Twitter y LinkedIn esperan 1200x630 o una relación 1.91:1. Una imagen cuadrada se recorta o se agrega como letterbox. Usa la misma relación de aspecto en todos lados. - Olvidar
og:url. Esta etiqueta le dice a las plataformas la URL canónica para asociar con el compartimiento. Sin ella, los parámetros de URL como?ref=twitterpodrían convertirse en la URL compartida, creando duplicados de compromiso en variantes. - Sin texto alt en la imagen OG. Las plataformas no muestran texto alt para imágenes OG, pero los lectores de pantalla y herramientas de accesibilidad dependen de él. Si usas una etiqueta
imgen tu marcado para la misma imagen, establece texto alt allí. - Establecer
twitter:cardensummarycuando deseas la imagen grande. El predeterminado es una miniatura cuadrada pequeña. Cámbialo asummary_large_imagepara obtener el diseño de héroe. - Desplegar con metadatos de prueba. "Test post title" o "Lorem ipsum" en producción sucede más a menudo de lo que piensas. Una verificación rápida antes de publicar lo atrapa.
Consejos avanzados
- Usa el campo Compare with para ver la diferencia entre tus metadatos y los de un competidor en la página de mejor ranking. Si su título es más corto, su descripción más específica y tienen esquema mientras que tú no, sabes qué corregir.
- Prueba la misma URL con Desktop Chrome y Googlebot como user-agents. Si los metadatos difieren, tu página está cloaking o sirviendo contenido diferente a los bots, lo que viola las directrices de Google.
- Verifica una página por plantilla: página de inicio, producto, categoría, post de blog, página de destino. Los errores de metadatos suelen ser a nivel de plantilla, no a nivel de página, por lo que corregir uno corrige cientos.
- Mira la sección de esquema. Si tienes múltiples bloques JSON-LD, asegúrate de que sean válidos y no entren en conflicto. Dos declaraciones conflictivas de
@typepueden causar que Google ignore ambas. - Prueba hreflang en sitios multiidioma. Un link de retorno faltante (donde la página en español apunta a la página en inglés pero la página en inglés no apunta hacia atrás) rompe completamente hreflang.
- Descarga el informe como JSON y haz una comparación contra una verificación anterior. Úsalo en CI para atrapar regresiones de metadatos cuando despliegas un tema nuevo o constructor de páginas.
Después de verificar metadatos, si las advertencias mencionan canonicals faltantes o desajustes de hreflang, ejecuta el verificador de canonical para hacer pruebas en masa de variantes de URL. Si aparecen advertencias de esquema, revalida con Google's Rich Results Test. Para ver cómo Googlebot realmente renderiza la página (ejecución de JavaScript, recursos bloqueados, texto visible), el google crawler simulator muestra el HTML sin procesar y renderizado con JS lado a lado. Para una auditoría SEO en la página más amplia que incluya metadatos, longitud del título, H1 y links internos, usa el SEO checklist.