Saltar al contenido
SEO Toolkit
On-Page SEO

Generador de Meta Tags y Preview SERP

Genera meta tags HTML, Open Graph y Twitter Cards con vista previa en tiempo real de cómo se verá tu web en Google, Facebook, LinkedIn y X/Twitter.

Última actualización:

Contenido principal

Opciones avanzadas

Vista previa

S
Tu sitio
tusitio.com

Título de tu página

Añade una meta descripción para ver cómo aparecerá en los resultados de búsqueda de Google.

Código generado

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:locale" content="es_ES">

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

Pega este código dentro del <head> de tu página HTML.

Cómo funciona

  1. Rellena los campos: título, descripción, URL, imagen y opciones avanzadas (locale, robots, canonical, tipo OG, Twitter card).
  2. Previsualiza en tiempo real cómo se verá tu web en Google, Facebook/LinkedIn y X/Twitter con las pestañas de vista previa.
  3. Copia el código HTML generado y pégalo en el <head> de tu página.

Todo se ejecuta en tu navegador. Nada se guarda en nuestros servidores.

Qué genera esta herramienta

Meta tags básicos

  • <title>: el título que aparece en la pestaña del navegador y en los resultados de Google. Es el factor on-page más importante para el posicionamiento.
  • <meta name="description">: la descripción que aparece debajo del título en SERP. No afecta directamente al ranking, pero determina el CTR (Click-Through Rate).
  • <link rel="canonical">: indica a Google cuál es la URL “oficial” de esta página, evitando problemas de contenido duplicado.
  • <meta name="robots">: le dice a los buscadores si deben indexar la página y seguir los enlaces.

Open Graph (Facebook, LinkedIn, WhatsApp)

El protocolo Open Graph define cómo se muestra tu enlace cuando alguien lo comparte en Facebook, LinkedIn o WhatsApp. Sin estas etiquetas, las plataformas eligen automáticamente un título, una imagen y una descripción — casi siempre con resultados feos que nadie quiere clicar.

Las etiquetas principales son:

  • og:title — título del contenido compartido
  • og:description — descripción breve
  • og:image — imagen destacada (1200×630 px ideal)
  • og:url — URL canónica
  • og:type — tipo de contenido (website, article, product…)
  • og:locale — idioma (es_ES)
  • og:site_name — nombre del sitio

Twitter Cards (X / Twitter)

Similar a Open Graph pero específico de X/Twitter:

  • twitter:card — tipo de tarjeta (summary o summary_large_image)
  • twitter:title, twitter:description, twitter:image — lo esperado
  • twitter:site — handle del sitio (@usuario)

Por qué es importante tener buenos meta tags

En Google (SERP)

Tu <title> y <meta description> son el escaparate de tu página. Un título genérico como “Inicio - Mi Web” pierde un 30-40% de clics potenciales frente a un título descriptivo y atractivo. Y Google puede decidir reescribir tu título si lo considera irrelevante — tener un título preciso reduce ese riesgo.

En redes sociales

Cada vez que alguien comparte un enlace en WhatsApp, LinkedIn, Facebook o X, las plataformas leen tus meta tags para construir la tarjeta de vista previa. Sin Open Graph ni Twitter Cards:

  • La imagen puede ser un logo diminuto o algo irrelevante
  • El título puede estar cortado o ser la URL directamente
  • La descripción puede estar vacía

Un enlace mal presentado no se clica. Configurar esto bien cuesta 5 minutos y puede duplicar el tráfico desde redes sociales.

Buenas prácticas

  • No repitas el nombre del sitio en el título a menos que sea una marca muy reconocida. El espacio es limitado.
  • Incluye una call-to-action en la descripción: “Aprende a…”, “Descubre cómo…”, “Guía paso a paso para…”.
  • Usa imágenes únicas por página, no la misma imagen OG en todas. Las plataformas cachean agresivamente; si cambias la imagen, usa el Sharing Debugger de Facebook para purgar la caché.
  • Comprueba siempre el resultado con nuestro Analizador SEO después de publicar.
  • No pongas keywords en la meta descripción pensando que mejorará el ranking — no lo hace. Escribe para humanos, no para bots.

Limitaciones

  • La vista previa es una aproximación fiel, no una réplica exacta. Google puede truncar títulos de forma diferente según el dispositivo y el idioma.
  • La herramienta no comprueba si la imagen OG existe ni si tiene las dimensiones correctas. Asegúrate de que la URL de la imagen es accesible públicamente.
  • Para validar que tus meta tags se leen correctamente en producción, usa el Analizador SEO o el Inspector de URLs de Google Search Console.

Preguntas frecuentes

¿Qué son los meta tags y para qué sirven?
Los meta tags son etiquetas HTML que van dentro del <head> de tu página. Informan a los buscadores y redes sociales sobre el título, la descripción, la imagen y la URL de tu contenido. No son visibles para el usuario, pero determinan cómo se muestra tu web en Google, Facebook, LinkedIn, WhatsApp y X/Twitter.
¿Cuántos caracteres debe tener el título?
Entre 50 y 60 caracteres. Títulos más cortos no aprovechan todo el espacio disponible en SERP; títulos más largos se cortan con puntos suspensivos. La herramienta te marca en verde cuando estás en el rango óptimo.
¿Cuántos caracteres debe tener la meta descripción?
Entre 150 y 160 caracteres. Google muestra aproximadamente ese rango en los resultados de escritorio. En móvil el límite es algo menor (~120), pero 150-160 es el estándar recomendado.
¿Qué tamaño debe tener la imagen de Open Graph?
El tamaño recomendado es 1200 × 630 píxeles (ratio 1.91:1). Funciona tanto para Facebook como para LinkedIn y WhatsApp. Para Twitter con summary_large_image, también es el ideal.
¿El generador guarda mis datos?
No. Todo se ejecuta en tu navegador. No enviamos ni almacenamos los datos que introduces. Cuando cierras la pestaña, desaparecen.
¿Puedo usar este código en WordPress?
Sí. Si usas un plugin SEO como Yoast o Rank Math, los campos que genera esta herramienta son los mismos que rellenas en el plugin. Si no usas plugin, pega el código en el <head> de tu tema (header.php o mediante un hook).
¿Open Graph es lo mismo que Twitter Cards?
No, son estándares distintos. Open Graph (og:) es de Facebook/Meta y lo usan también LinkedIn y WhatsApp. Twitter Cards (twitter:) es específico de X/Twitter. Idealmente debes tener ambos, aunque X/Twitter puede hacer fallback a OG si no encuentra sus propias etiquetas.
¿Qué diferencia hay entre summary y summary_large_image en Twitter?
summary muestra una miniatura cuadrada pequeña a la izquierda del texto. summary_large_image muestra la imagen a ancho completo encima del texto. Para la mayoría de páginas, summary_large_image genera más clics.

Herramientas relacionadas

On-Page SEO

Analizador SEO online gratis

Analiza el SEO on-page de cualquier URL en segundos. Detecta problemas en meta tags, encabezados, imágenes, enlaces, Open Graph, Schema y más.

Datos estructurados

Generador de Schema JSON-LD

Crea datos estructurados Schema.org en formato JSON-LD para FAQ, Artículo, Producto, Negocio Local, Receta, How-To y Breadcrumb. Con preview en tiempo real y código listo para copiar.

SEO técnico

Generador de robots.txt online

Crea un archivo robots.txt optimizado para tu CMS (WordPress, Shopify, PrestaShop, Magento, Joomla, Drupal) con reglas personalizadas, bloqueo de bots de IA y sitemap. Listo para descargar.