Generador de Meta Tags y Open Graph

Genera el bloque completo de etiquetas para el <head> de tu página: title, meta description, Open Graph y Twitter Card, con una vista previa en tiempo real de cómo se vería el enlace en Google, Facebook, LinkedIn y Twitter/X.

0 / 60
0 / 160

Previsualización social

https://tudominio.com
Título de la página
La meta descripción de tu página aparecerá aquí.

Código HTML para el <head>


<!-- Open Graph / Facebook, LinkedIn -->
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />

Esta herramienta procesa los datos 100% de forma local en el navegador. Ningún texto, enlace o información ingresada se envía ni almacena en servidores externos.

Herramienta informativa e independiente. Redutil no está afiliado a Google, la DIAN, el Ministerio de Trabajo ni a ninguna entidad oficial, y este simulador no constituye asesoría legal, contable ni fiscal formal. Leer más.

¿Qué son los meta tags y el protocolo Open Graph?

Los meta tags son etiquetas HTML invisibles para el visitante, pero que leen los buscadores y las redes sociales para entender de qué trata una página: su título, su descripción y su imagen representativa.

Open Graph es el protocolo, creado por Facebook y adoptado por la mayoría de plataformas (LinkedIn, WhatsApp, Slack, Discord), que define ese conjunto de etiquetas (og:title, og:description, og:image, entre otras). Sin ellas, cada plataforma intenta adivinar la información leyendo el contenido de la página, con resultados inconsistentes.

Twitter/X usa su propio conjunto de etiquetas, las Twitter Card, que en la práctica se combinan con las de Open Graph para cubrir todas las plataformas con un solo bloque de código.

Cómo funciona

  1. Completa el título, la descripción, la URL del sitio, la imagen de vista previa, el nombre del sitio, el autor y el tipo de contenido.
  2. Revisa los contadores de caracteres del título y la descripción: se marcan en ámbar si superan el límite visual habitual de Google.
  3. Cambia entre las pestañas de previsualización para ver cómo se vería el enlace en un resultado de Google, en una tarjeta de Facebook/LinkedIn y en una Twitter Card.
  4. Copia el bloque de código HTML generado y pégalo dentro de la etiqueta <head> de tu página.

Por qué el título y la descripción tienen un límite recomendado

Google no trunca por una regla de caracteres exacta, sino por el ancho en píxeles del texto renderizado, pero en la práctica los títulos se cortan alrededor de los 60 caracteres y las descripciones alrededor de los 160 en la mayoría de resultados de escritorio.

Superar el límite no es un error ni penaliza el posicionamiento, pero el texto que sobra no se ve: si la frase más importante queda al final, corre el riesgo de no llegar a mostrarse nunca en el resultado de búsqueda.

El tamaño correcto de la imagen Open Graph

La proporción recomendada para og:image es 1.91:1, con 1200×630 píxeles como el tamaño más citado por las guías de Facebook y Twitter. Con esa proporción, la imagen aprovecha el espacio completo de la tarjeta sin recortes forzados en ninguna plataforma.

Usar una imagen demasiado pequeña o con una proporción muy distinta (por ejemplo, cuadrada o vertical) suele resultar en un recorte poco favorecedor cuando la plataforma la ajusta al formato horizontal de su tarjeta.

Ten en cuenta

  • Los cambios en las etiquetas Open Graph de una página que ya se compartió antes no siempre se actualizan al instante: cada plataforma guarda en caché la vista previa, y suele hacer falta forzar una relectura con su propia herramienta de depuración.
  • El tipo de contenido article suma señales adicionales de contexto (como la fecha de publicación) en implementaciones más completas; para la mayoría de páginas de un sitio, website es el valor correcto.
  • Esta herramienta procesa los datos 100% de forma local en el navegador. Ningún texto, enlace o información ingresada se envía ni almacena en servidores externos.

Preguntas frecuentes

Herramientas relacionadas