Generador de metaetiquetas y Open Graph con vistas previas en vivo

Generador de metaetiquetas y Open Graph

Generador de metaetiquetas gratis: SEO, Open Graph y vista previa social

Generador gratuito de metaetiquetas y Open Graph. Previsualiza tu página en resultados de búsqueda, tarjetas de X, redes sociales y apps de chat, corrige problemas de longitud e imagen y copia código HTML, Next.js o React Helmet.

Este generador gratuito de metaetiquetas crea de una vez las etiquetas de título, meta descripción, canonical, robots, Open Graph y X de una página. Escribe el título y la descripción una sola vez y mira, lado a lado, cómo se verá la página como resultado de búsqueda, como tarjeta de X, como publicación en una red social y como enlace enviado en una app de chat. Las comprobaciones señalan títulos que se recortarán, imágenes con la proporción incorrecta, direcciones canonical rotas y ajustes de robots arriesgados. Cuando todo esté bien, copia un bloque <head> listo, un objeto metadata de Next.js o un componente de React Helmet. Todo funciona en tu navegador; nada de lo que escribes o subes se envía a ningún sitio.

  • Introduce el título de la página, la meta descripción y la dirección completa de la página. Añade la dirección de una imagen social, o elige una imagen de tu dispositivo para previsualizarla antes de subirla a tu sitio.
  • La vista previa mide cada línea en píxeles con una fuente parecida a la de los resultados de búsqueda y la recorta como ocurriría normalmente en escritorio o teléfono. Los límites en píxeles son estimaciones, no una promesa de cómo se mostrará la página en cada buscador.
  • Las vistas previas para compartir muestran la tarjeta grande y la pequeña de X, una tarjeta de feed al estilo de Facebook y LinkedIn, una burbuja de chat y un enlace desplegado en un chat de equipo. Tu imagen se recorta como suelen recortarla esas tarjetas, para que veas si se corta una cara o un titular.
  • Cuando la imagen carga, la herramienta lee su anchura y altura reales y (si es un archivo de tu dispositivo) su tamaño, y avisa si es demasiado pequeña, tiene una proporción incorrecta o pesa demasiado.
  • Abre «Más ajustes» para el nombre del sitio, el tipo de contenido, el tipo de tarjeta y el usuario de X, el color del tema, una dirección canonical distinta y las reglas de robots.
  • Elige HTML, Next.js o React Helmet y copia o descarga el código. Cada valor se escapa según su formato, así que unas comillas o signos angulares en un título no pueden romper la página.
  • Pon al principio del título las palabras que la gente busca. Lo primero que se recorta es el final.
  • Redacta una descripción que responda a la búsqueda en una frase y luego dé un motivo para hacer clic. Los buscadores suelen reescribir las descripciones, pero es más probable que conserven una clara.
  • Haz la imagen social de 1200 por 630 píxeles y mantén el texto y las caras lejos de los bordes, porque algunas tarjetas la recortan.
  • Usa la dirección final exacta como canonical: https, la misma versión con www o sin www que usa tu sitio y sin utm_ ni otros parámetros de seguimiento.
  • Después de publicar, envíate el enlace en una app de chat. Las apps guardan en caché las vistas previas, así que si cambias la imagen más adelante, ponle un nombre de archivo nuevo.
  • Asigna un título y una descripción propios a cada página. Los duplicados hacen que las páginas compitan entre sí.

Preguntas frecuentes

¿Qué diferencia hay entre las metaetiquetas y las etiquetas Open Graph?

Los motores de búsqueda leen la etiqueta title y la meta descripción para los resultados de búsqueda. Las redes sociales y las apps de chat leen las etiquetas Open Graph (og:title, og:description, og:image, og:url) para crear la tarjeta que aparece cuando alguien comparte un enlace. Este generador escribe ambas, además de las etiquetas twitter: que X lee primero, para que cada sitio reciba lo que necesita.

¿Por qué se miden los títulos en píxeles y no en caracteres?

Los resultados de búsqueda recortan los títulos según el ancho mostrado, no según el número de caracteres. Un título lleno de letras anchas como W y M ocupa el espacio antes que uno con letras estrechas como i y l. Medir píxeles da una estimación mejor que la regla habitual de 60 caracteres, aunque el corte exacto varía según el dispositivo y el buscador.

¿Qué tamaño debe tener una imagen Open Graph?

1200 por 630 píxeles, una proporción de aproximadamente 1.91 a 1, es la opción segura para tarjetas grandes en la mayoría de las redes. Usa JPG, PNG o WebP en lugar de SVG, sírvela desde una dirección https completa y mantén el archivo ligero. La herramienta mide tu imagen y avisa si es demasiado pequeña o tiene una proporción incorrecta.

¿Puedo subir mi imagen aquí?

Puedes elegir una imagen de tu dispositivo para previsualizarla, pero solo se lee dentro de tu navegador y nunca se sube. Las redes sociales necesitan una dirección pública, así que primero pon la imagen en tu sitio y pega su dirección en el campo de imagen.

¿Qué tipo de tarjeta de X debo elegir?

Imagen grande (summary_large_image) muestra una imagen ancha que ocupa toda la tarjeta y sirve para la mayoría de las páginas con una buena imagen. Imagen pequeña cuadrada (summary) muestra una miniatura junto al texto. Automático elige la tarjeta grande cuando tienes imagen y la pequeña cuando no.

¿Qué hace el ajuste de robots?

Indica a los motores de búsqueda si deben mostrar la página (index o noindex) y si deben seguir sus enlaces (follow o nofollow). Index y follow es el valor predeterminado, así que la herramienta no escribe ninguna etiqueta para ello. Usa noindex solo en páginas que no quieras en los resultados, como las páginas de agradecimiento.

¿Cómo uso el código de Next.js o React Helmet?

En un proyecto de Next.js con App Router, pega la exportación metadata en el page.tsx o layout.tsx de esa ruta; el color del tema va en una exportación viewport aparte, que la herramienta incluye. En una app de React con react-helmet-async, envuelve la app una vez en HelmetProvider y renderiza en la página el componente PageMeta generado.

¿Google y las apps sociales mostrarán exactamente esta vista previa?

No siempre. Los buscadores pueden reescribir títulos y descripciones, y cada app cambia de vez en cuando el diseño de sus tarjetas. Toma las vistas previas como estimaciones cercanas para revisar la longitud, la redacción y el recorte de la imagen.

¿Necesito una etiqueta meta keywords?

No. Google ha dicho que no usa la metaetiqueta keywords para posicionar en la web, así que este generador la omite. Pon las palabras que la gente busca en el título y la descripción, donde sí las ven quienes buscan.

¿Cómo añado las metaetiquetas generadas a mi sitio web?

Pega el bloque HTML dentro de la sección <head> de la página, sustituyendo las etiquetas de título o descripción que ya haya. En un creador de sitios web, usa en su lugar los ajustes SEO de la página: copia el título y la descripción en esos campos y sube allí la imagen social. Después envíate el enlace para comprobar la tarjeta.

¿Esta herramienta es gratuita y privada?

Sí. Es gratuita, no requiere registro y todo el trabajo se hace en tu navegador. La dirección de imagen que introduzcas se carga directamente desde su propio servidor, como cualquier imagen de una página web.

Las etiquetas más importantes

  • La etiqueta title nombra la página en los resultados de búsqueda y las pestañas del navegador. La meta descripción es el breve resumen que suele aparecer debajo. El enlace canonical indica a los motores de búsqueda qué dirección deben reconocer cuando se puede acceder a la misma página de más de una forma.
  • Las etiquetas Open Graph controlan la tarjeta que aparece cuando alguien comparte la página en redes sociales y apps de mensajería. X lee sus propias etiquetas twitter: y recurre a Open Graph si faltan. La etiqueta theme-color es opcional: algunos navegadores móviles tiñen con ella la barra de direcciones y algunas apps de chat de equipo la usan para la barra de color junto a un enlace.

Cómo se establecen los límites en píxeles de esta herramienta

  • Los títulos de escritorio se miden con Arial a unos 20 píxeles y un ancho aproximado de 580 píxeles. Las descripciones se miden a unos 14 píxeles, con espacio para dos líneas en escritorio y algo menos en teléfonos. Son estimaciones prácticas basadas en cómo suelen mostrarse los resultados, no límites oficiales.

Por qué una vista previa compartida puede seguir viéndose mal después de corregirla

  • Las redes sociales y las apps de chat guardan una copia de la vista previa de cada enlace la primera vez que se comparte. Si después cambias el título o la imagen, la gente puede seguir viendo la tarjeta antigua durante un tiempo. Cambiar el nombre del archivo de imagen, o usar la página de depuración de enlaces de la propia red, hace que vuelvan a obtenerla.

Empieza gratis · Sin tarjeta de crédito

Relacionado: Herramientas Gratuitas

Producto

Para quién es

Funciones

Recursos

Empresa

Mapa del sitio