Generador de Meta Tags y vista previa Open Graph

Acerca de Generador de Meta Tags y vista previa Open Graph

Esta página tiene dos modos. Generar toma un título, una descripción, una imagen y una URL, y produce un bloque listo para pegar en tu <head>: metaetiquetas básicas, etiquetas Open Graph y etiquetas de tarjeta de X (Twitter). Comprobar vista previa toma la dirección de una página ya publicada, descarga su HTML, lee las etiquetas y muestra aproximadamente cómo se verá la tarjeta en Facebook, X, KakaoTalk, LinkedIn, Discord y Slack, junto con lo que falta.

El orden natural es generar, publicar y comprobar. Ten en cuenta que las tarjetas del modo de comprobación son simulaciones de las reglas de cada plataforma, no capturas de lo que producen sus servidores. Si un enlace compartido sigue mostrando una imagen antigua después de corregir las etiquetas, el problema suele ser la caché de la plataforma y no tu marcado, y cada plataforma tiene su propia herramienta para eso.

No existe un límite oficial para la meta description

Por todas partes se repite «no pases de 155 o 160 caracteres». Google Search Central dice otra cosa: no hay límite de longitud para la meta description, pero el fragmento se recorta en los resultados según haga falta, normalmente para ajustarse al ancho del dispositivo. La misma página explica que los fragmentos se crean sobre todo a partir del contenido de la página, y que Google a veces usa la meta description cuando describe la página con más precisión que el propio texto. Así que incluso una buena descripción puede sustituirse para una búsqueda concreta.

Esta herramienta muestra un aviso suave a partir de 60 caracteres en títulos y 200 en descripciones, y uno más fuerte a partir de 90 y 300. Son reglas prácticas sobre dónde suelen cortar las tarjetas y los resultados, no normas de Google. Más útil que contar caracteres es poner lo esencial en la primera frase y dejar que el resto sea prescindible.

El generador también crea la etiqueta keywords si la rellenas, pero Google afirma que la meta keywords no se usa en la Búsqueda de Google y no tiene ningún efecto en la indexación ni en la clasificación. Salvo que otra parte de tu sistema la lea, déjala vacía.

Las cuatro propiedades obligatorias de Open Graph

El protocolo Open Graph (ogp.me) define cuatro propiedades obligatorias: og:title, og:type, og:image y og:url. Añade que, si una página especifica og:image, también debería especificar og:image:alt, una descripción de lo que aparece en la imagen y no un pie de foto. og:locale usa el formato idioma_TERRITORIO, como es_ES o es_MX, y su valor por defecto es en_US.

En el modo generar, una URL escrita sin esquema, como example.com/salario, se normaliza a https://example.com/salario y se usa tanto en og:url como en el enlace canonical. El campo de imagen se copia tal cual, así que debe ser una dirección absoluta con https://. Muchas rastreadoras no resuelven rutas relativas como /img/og.png, y el modo de comprobación las marca como error. Declarar og:image:width y og:image:height permite maquetar la tarjeta antes de descargar la imagen, lo que reduce el problema de «la primera vez que se comparte no sale la foto».

Tipos de tarjeta de X y la alternativa Open Graph

La documentación de Cards markup de X explica que, si faltan twitter:title, twitter:description o twitter:image, X recurre a las propiedades Open Graph equivalentes. Si tus etiquetas og están completas, la única etiqueta específica de X que necesitas es twitter:card, que elige el diseño. Esta herramienta ofrece los dos diseños de uso general: summary, con una miniatura cuadrada pequeña, y summary_large_image, con una imagen ancha sobre el título. X también define tarjetas app y player, pero requieren etiquetas adicionales, así que no se generan aquí.

Cuando la vista previa compartida no se actualiza

Las apps de mensajería y las redes sociales rastrean una URL la primera vez que se comparte y guardan ese resultado durante un tiempo. Por eso corregir una etiqueta no cambia una tarjeta existente. Cada plataforma vacía su caché de forma distinta.

• Facebook: el Sharing Debugger de Meta (developers.facebook.com/tools/debug) y su botón «Volver a extraer».
• LinkedIn: Post Inspector (linkedin.com/post-inspector) vuelve a descargar la página al inspeccionarla.
• KakaoTalk, muy usado en Corea: el Sharing Debugger de Kakao Developers (requiere iniciar sesión) permite reiniciar la caché. Trata http y https como URLs distintas.
• LINE: antes existía PagePoker (poker.line.naver.jp) para borrar su caché de vistas previas, pero la dirección no respondía cuando se escribió esta página, en septiembre de 2026. Una solución habitual es compartir una URL nueva añadiendo una cadena de consulta como ?v=2.

Cómo obtiene la página el modo de comprobación

Los navegadores no pueden leer libremente el HTML de otro sitio por CORS, así que el modo de comprobación prueba primero una petición directa y, si se bloquea, pasa por proxies públicos en orden: cors.sh, allorigins y codetabs. La URL que compruebas llega por tanto a quienes operan esos proxies. Las páginas con inicio de sesión, las direcciones de intranet y los borradores sin publicar no se pueden obtener así y no deberían introducirse. En esos casos, copia la sección <head> del código fuente y pégala.

Además, cada rastreador se identifica con su propio user agent. Si tu sitio bloquea bots, sirve HTML distinto por región o genera las etiquetas con JavaScript en el cliente, la tarjeta real puede diferir de lo que muestra la comprobación.

Ejemplos

Cómo se usa

1. En el modo generar, escribe título, descripción, URL e imagen, y si quieres elige og:type, locale y tipo de tarjeta de X.
2. Copia el bloque en el <head> de tu página y publícala.
3. Pasa a comprobar vista previa, introduce la URL publicada y revisa las etiquetas que faltan y las vistas por plataforma.
4. Si el enlace ya se había compartido, vacía la caché con la herramienta de cada plataforma.

Preguntas frecuentes