Generador de meta tags gratis — SEO, Open Graph y Twitter Cards
Crea etiquetas de título, meta descriptions y marcado Open Graph y Twitter Card con vistas previas en vivo de Google y redes sociales. Funciona enteramente en tu navegador — sin obtener la URL, sin registro.
Fundamentos SEO
Open Graph
Twitter Cards / X
Vistas previas en vivo
SERP de Google
toolgenie.org › meta-tag-generator
Free Meta Tag Generator | ToolGenie.org
Create SEO title tags, meta descriptions, Open Graph and Twitter Card tags with live Google and social previews. Copy HTML instantly — 100% client-side.
Tarjeta estilo Facebook / LinkedIn
toolgenie.org
Free Meta Tag Generator | ToolGenie.org
Create SEO title tags, meta descriptions, Open Graph and Twitter Card tags with live Google and social previews. Copy HTML instantly — 100% client-side.
X / Twitter (summary_large_image)
Free Meta Tag Generator | ToolGenie.org
Create SEO title tags, meta descriptions, Open Graph and Twitter Card tags with live Google and social previews. Copy HTML instantly — 100% client-side.
toolgenie.org
Etiquetas <head> generadas
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Free Meta Tag Generator | ToolGenie.org</title> <meta name="description" content="Create SEO title tags, meta descriptions, Open Graph and Twitter Card tags with live Google and social previews. Copy HTML instantly — 100% client-side." /> <meta name="keywords" content="meta tag generator, open graph generator, twitter card generator" /> <meta name="author" content="ToolGenie.org" /> <meta name="robots" content="index, follow" /> <link rel="canonical" href="https://toolgenie.org/meta-tag-generator" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Free Meta Tag Generator | ToolGenie.org" /> <meta property="og:description" content="Create SEO title tags, meta descriptions, Open Graph and Twitter Card tags with live Google and social previews. Copy HTML instantly — 100% client-side." /> <meta property="og:url" content="https://toolgenie.org/meta-tag-generator" /> <meta property="og:site_name" content="ToolGenie.org" /> <meta property="og:locale" content="en_US" /> <meta property="og:image" content="https://toolgenie.org/apple-touch-icon.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="ToolGenie.org meta tag generator preview" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Free Meta Tag Generator | ToolGenie.org" /> <meta name="twitter:description" content="Create SEO title tags, meta descriptions, Open Graph and Twitter Card tags with live Google and social previews. Copy HTML instantly — 100% client-side." /> <meta name="twitter:image" content="https://toolgenie.org/apple-touch-icon.png" /> <meta name="twitter:site" content="@toolgenie" /> <meta name="twitter:creator" content="@toolgenie" />
- Título SEO
- Meta description
- URL canonical
- Imagen de Open Graph
- Tipo de Twitter card
- Título ≤ 60 caracteres
- Descripción ≤ 160 caracteres
Las vistas previas son aproximadas. Tras publicar, actualiza la caché con Facebook Sharing Debugger, LinkedIn Post Inspector, X Card Validator. Nada de lo que escribes se sube — la generación se queda en tu navegador.
Cómo usar el generador de meta tags y Open Graph
- Introduce los fundamentos SEO — etiqueta de título, meta description, URL canonical y robots. Vigila los contadores de caracteres para que los snippets de Google se lean bien.
- Añade los campos de Open Graph — configura og:image con una URL HTTPS pública (idealmente 1200×630), además del nombre del sitio, el idioma y el tipo. Mantén activado “Usar valores de SEO” salvo que las redes necesiten un texto diferente.
- Elige un tipo de Twitter card — summary_large_image para vistas previas anchas o summary para tarjetas compactas.
- Previsualiza en vivo — las tarjetas de Google SERP, Facebook/LinkedIn y X/Twitter se actualizan mientras escribes, usando la URL de imagen que indicaste (sin consultar el servidor).
- Copia o descarga el bloque <head> generado en la plantilla de tu sitio y luego vuelve a rastrearlo con los depuradores de cada plataforma tras publicar.
Acerca de este generador de meta tags gratis
Los snippets de búsqueda y las tarjetas de redes sociales suelen ser la primera impresión de una página. Un generador de meta tags te ayuda a redactar etiquetas de título, meta descriptions, etiquetas Open Graph y Twitter Cards antes de publicar — sin usar un validador distinto para cada red.
A diferencia de los analizadores de URL que necesitan una página publicada (y un proxy CORS), este generador de Open Graph funciona a partir de un formulario: escribes los valores, ves al instante las vistas previas de Google y de las redes, y copias HTML limpio. Eso lo hace útil para borradores, sitios en staging y revisiones de marketing cuando la URL final aún no es pública.
Combínalo con el contador de palabras y caracteres para comprobar la longitud del título, el recortador y redimensionador de imágenes para preparar imágenes OG de 1200×630, el compresor de imágenes para archivos más ligeros, o el conversor de mayúsculas y minúsculas para normalizar el uso de mayúsculas en el título.
Tamaños de imagen Open Graph recomendados y comportamiento por red
| Red | Imagen habitual | Notas |
|---|---|---|
| 1200×630 (1,91:1) | Usa Open Graph; actualiza la caché con Sharing Debugger tras cada cambio. | |
| 1200×627 / 1200×630 | Caché muy agresiva — usa Post Inspector para volver a rastrear. | |
| X / Twitter | 1200×628 grande · ~1:1 para summary | Necesita twitter:card; si falta, recurre a los valores de Open Graph. |
| Slack / Discord | Prefiere OG 1200×630 | Suelen leer og:title, og:description y og:image. |
| Google Search | N/D (título + descripción) | Puede reescribir títulos/descripciones; manténlos precisos y únicos. |
Aloja las imágenes en HTTPS con una URL absoluta y estable. Las rutas relativas suelen romperse en los rastreadores de redes sociales.
Preguntas frecuentes (FAQ)
¿Qué tamaño debe tener una imagen og:image?
Usa 1200×630 píxeles (aproximadamente 1,91:1) para Open Graph y las Twitter Cards grandes. Mantén el elemento importante centrado, ya que las plataformas pueden recortar los bordes. Las URLs de imagen HTTPS absolutas funcionan mejor, y og:image:width / og:image:height ayudan a los rastreadores.
¿Cuál es la diferencia entre twitter:card summary y summary_large_image?
summary muestra una miniatura cuadrada pequeña junto al título y la descripción. summary_large_image usa una imagen ancha destacada encima del texto — suele funcionar mejor para páginas de marketing, artículos de blog y lanzamientos de producto.
¿Cuánto deben medir la etiqueta de título y la meta description?
Procura unos 50–60 caracteres para la etiqueta de título y 150–160 caracteres para la meta description. Google y las redes sociales truncan de forma distinta, así que este generador muestra contadores de caracteres en vivo y el truncado de la vista previa.
¿Cuál es la diferencia entre meta description y og:description?
La meta description es principalmente candidata al snippet de búsqueda de Google. og:description se usa cuando la página se comparte en Facebook, LinkedIn y otros consumidores de Open Graph. Pueden ser distintas; se sincronizan por defecto, y las personalizas cuando las redes necesitan un texto más directo.
¿Los meta tags y las etiquetas Open Graph afectan al posicionamiento en Google?
Las etiquetas de título influyen en el SEO y en el clic. Las meta descriptions no posicionan directamente las páginas, pero afectan mucho al CTR. Las etiquetas Open Graph y Twitter no mejoran directamente el posicionamiento en Google; mejoran cómo se ven los enlaces en redes sociales, lo que puede generar tráfico de referencia.
¿Por qué mi vista previa en LinkedIn o Facebook está desactualizada?
Las redes sociales guardan en caché las vistas previas de enlaces de forma muy agresiva. Después de publicar nuevas etiquetas, usa LinkedIn Post Inspector o Facebook Sharing Debugger para volver a rastrear la URL. Generar las etiquetas aquí no borra esas cachés.
¿Necesito tanto etiquetas Open Graph como Twitter Card?
Muchas plataformas recurren a Open Graph, pero X sigue esperando al menos twitter:card. Generar ambos tipos de etiquetas es la forma más segura de conseguir vistas previas consistentes en Facebook, LinkedIn, Slack y X.
¿Puedo generar meta tags antes de publicar mi página?
Sí. Este generador de meta tags se basa en un formulario: escribes títulos, descripciones y URLs de imagen, y luego copias el HTML. No necesitas una URL publicada para que la herramienta funcione — ideal mientras la página aún está en staging.
¿Para qué sirven og:type, og:site_name y og:locale?
og:type describe el objeto (website, article, product, profile). og:site_name es la marca que se muestra en algunas tarjetas. og:locale define el idioma/región (por ejemplo es_ES) para sitios con varias versiones lingüísticas.
¿Se suben mis datos al usar este generador de Open Graph?
No. La generación de etiquetas y las vistas previas se ejecutan enteramente en tu navegador con JavaScript del lado del cliente. ToolGenie no obtiene tu URL ni sube los datos del formulario a un servidor.
Consejos para mejores meta tags y vistas previas en redes
- Empieza con la palabra clave principal en el título cuando siga leyéndose de forma natural — y deja la marca al final.
- Escribe para conseguir clics, no para saturar de palabras clave. Las descripciones deben prometer un beneficio claro y coincidir con el contenido de la página.
- Diseña las imágenes OG pensando en el recorte. Mantén logos y rostros alejados de los bordes; prueba los diseños de tarjeta grande y resumida.
- Una sola URL canonical por página. Evita que URLs con parámetros duplicados compitan en las cachés de búsqueda y redes sociales.
- Vuelve a rastrear después de cada despliegue que cambie las etiquetas — Facebook, LinkedIn y X guardan todo en caché de forma agresiva.
- ¿Necesitas los colores de tu marca para una imagen OG? Prueba el conversor de colores o comparte la URL de tu campaña con el generador de códigos QR.