Acerca de esta herramienta
Un previsualizador de etiquetas meta analiza el <head> de una página y reconstruye cómo la mostrarán los motores de búsqueda y las plataformas sociales. Lee el título, la meta descripción, el enlace canónico, el favicon, el viewport y las etiquetas Open Graph (og:) y Twitter (twitter:), y luego aplica las mismas cadenas de respaldo que usan las plataformas reales — Open Graph recurre al título y la descripción de base, y Twitter recurre a Open Graph — para que las vistas previas reflejen lo que los usuarios ven realmente, no solo lo que escribiste.
Úsalo para detectar los pequeños errores que rompen el uso compartido de enlaces de forma silenciosa: un título que se trunca más allá de ~60 caracteres en Google, una etiqueta og:image faltante que deja una tarjeta de Facebook en blanco, una ruta og:image relativa que falla cuando un scraper la solicita, o una etiqueta twitter:card faltante que recurre al diseño equivocado de forma predeterminada. Pega el marcado de tu head, observa lado a lado las tarjetas de Google, Facebook/LinkedIn y X, y repasa la lista de verificación de auditoría antes de publicar o compartir la URL.
Todo se analiza en tu navegador con el DOMParser integrado — no se envía ningún marcado ni ninguna URL, y las imágenes remotas se cargan directamente desde su origen para una vista previa fiel.
Preguntas frecuentes
¿Cuál es la longitud ideal para un título y una meta descripción?
Apunta a un título de 50 a 60 caracteres y a una meta descripción de 140 a 160 caracteres. Más allá de esos límites, Google trunca el texto con puntos suspensivos en los resultados de búsqueda, por lo que el final de tu mensaje puede quedar cortado.
¿Por qué no aparece mi og:image cuando comparto el enlace?
La causa más común es una ruta relativa como /og.png. Facebook, LinkedIn y X solicitan la imagen desde fuera de tu sitio, así que og:image debe ser una URL absoluta en https://. La herramienta señala los valores og:image relativos o faltantes en su auditoría.
¿Cuál es la diferencia entre twitter:card summary y summary_large_image?
summary muestra una pequeña miniatura cuadrada a la izquierda del texto, mientras que summary_large_image muestra una imagen grande en la parte superior de la tarjeta. Si twitter:card falta o no se reconoce, X recurre al diseño summary, más pequeño.