Vista previa de meta tags
Cómo funciona
Escribe el título de la página, la descripción, la URL y la imagen para Open Graph y Twitter, y verás cinco vistas previas en directo:
• Resultado de Google (título, URL y descripción) • Tarjeta grande de Twitter / X (summary_large_image) • Facebook / Open Graph • Tarjeta del feed de LinkedIn • Embed de Discord
Cada vista previa se actualiza mientras editas un campo. Junto al título y a la descripción hay un contador de caracteres (sobre 60 para el título y sobre 160 para la descripción) que cambia de color cuando te pasas del límite. Las vistas previas cortan la descripción en 160 caracteres. Como referencia, Google suele truncar los títulos en torno a 60 caracteres en escritorio y unos 35 en móvil.
Cuando las vistas previas te convenzan, pulsa Generar los meta tags y copia el bloque de HTML: incluye el <title>, la meta description, las etiquetas og:title, og:description, og:url y og:image, y las etiquetas twitter:card (summary_large_image), twitter:title, twitter:description y twitter:image. Solo se generan las etiquetas cuyo campo has rellenado.
Usos habituales: revisar una entrada de blog antes de publicarla, entender por qué un enlace compartido en LinkedIn o Slack muestra la imagen equivocada, comprobar que el fragmento de Google de una página nueva resulta atractivo, comparar variantes de un título y montar los meta tags de un sitio nuevo cuando no tienes ningún preajuste de CMS. Todo se dibuja en tu navegador: no se sube ni se consulta nada.
Preguntas frecuentes
¿Necesito escribir una URL real?
- No. Puedes escribirlo todo a mano y ver igualmente las cinco vistas previas. El campo URL solo alimenta la dirección que se muestra en el resultado de Google y la etiqueta og:url, así que la página no tiene por qué existir todavía. Así puedes diseñar el fragmento antes de publicarla.
¿Cuánto deben medir el título y la meta description?
- Google trunca los títulos en torno a 60 caracteres en escritorio y 35 en móvil, y las descripciones en unos 155 caracteres en escritorio y 120 en móvil. Los contadores de la herramienta se marcan al pasar de 60 en el título y de 160 en la descripción. En las tarjetas sociales (Twitter, Facebook, LinkedIn) son seguros títulos de hasta unos 70 caracteres y descripciones de hasta unos 200.
¿Qué tamaño de imagen debo usar para Open Graph y Twitter?
- 1200 × 630 píxeles (proporción 1,91:1) es el tamaño seguro para todas las plataformas. Facebook y LinkedIn recortan lo que sea más alto, y summary_large_image de Twitter también espera 1,91:1. Las vistas previas cuadradas (la tarjeta pequeña de Twitter, las miniaturas pequeñas de Facebook) funcionan a 1200 × 1200, pero 1200 × 630 es el tamaño para el que optimiza todo el mundo.
¿Por qué Facebook sigue mostrando la imagen antigua tras cambiar og:image?
- Porque Facebook guarda en caché las vistas previas de Open Graph de forma agresiva. Usa el depurador oficial de Facebook (developers.facebook.com/tools/debug/) para volver a leer la URL después de actualizarla. LinkedIn tiene su propio Post Inspector; Twitter no usa caché. Esta herramienta muestra cómo quedará la tarjeta, pero conseguir que las plataformas se actualicen es un paso aparte.
¿Consulta la URL para obtener los meta tags reales?
- No. Consultar URLs arbitrarias desde el navegador chocaría con los límites de CORS y podría filtrar datos del referer. Rellenas tú los campos y la herramienta dibuja las vistas previas con lo que escribes. Si necesitas un comprobador que consulte la página en vivo, usa los depuradores propios de cada plataforma.
¿Puedo usar caracteres que no son ASCII (emoji, acentos)?
- Sí. El texto se trata como UTF-8 en todo momento y los emoji de un título se ven en las vistas previas. Un detalle: en la mayoría de las plataformas un emoji cuenta como 2 caracteres para el límite de truncado.