Generador de meta tags
Generador de meta tags SEO
Genera title, meta description, robots, canonical, Open Graph, Twitter Card y bloque HTML listo para copiar en el head.
Atajo: Ctrl+Shift+C (Cmd+Shift+C en Mac) copia el HTML completo.
Código HTML generado
Checklist on-page
Vista previa social (orientativa)
Pega este bloque dentro del <head> de tu página o en los campos SEO de tu CMS. Se actualiza al escribir.
Puede guardarse un borrador en el navegador de este dispositivo. No se envía al servidor.
Preguntas frecuentes
¿Es también un generador de Open Graph y Twitter Card?
Sí. No necesitas otra herramienta: esta misma página incluye un generador de Open Graph y Twitter Card integrado en la sección «Open Graph y Twitter Card». Activa «Incluir meta tags sociales», rellena imagen, tipo y cuentas @ si procede, y usa Copiar social o Copiar todo para obtener las etiquetas og:* y twitter:* listas para el <head>.
Hay vista previa de la tarjeta social y herencia automática: si no personalizas textos sociales, title y meta description del bloque SEO se reutilizan en og:title, og:description y twitter:*.
Open Graph y Twitter Card son meta tags para redes (Facebook, X, WhatsApp, LinkedIn…). Son distintos del schema JSON-LD para buscadores (FAQPage, Article, rich results). Para datos estructurados usa el generador de schema JSON-LD; para compartir enlaces con imagen y título en redes, usa esta herramienta.
¿Qué meta tags debo poner en mi página?
Como base para buscadores: <title> (título de la pestaña y candidato al snippet azul en Google), meta description (texto gris bajo el título en resultados) y, si aplica, link rel="canonical" (URL preferida cuando hay duplicados).
El meta robots solo hace falta si quieres indicar algo distinto de «indexar y seguir enlaces» (por ejemplo noindex en páginas legales o landings privadas). Las meta keywords casi no influyen en Google, pero algunos CMS las conservan.
Para compartir en redes añade Open Graph y Twitter Card (sección social de esta herramienta). Después puedes revisar el aspecto en buscadores con el simulador de snippet SERP.
¿Cuántos caracteres debe tener el title y la meta description?
No hay un tope oficial fijo: Google recorta sobre todo por píxeles, no solo por caracteres. Como referencia habitual, muchos equipos apuntan a ~50–60 caracteres en el title y ~150–160 en la meta description en escritorio.
Esta herramienta muestra contador de caracteres y píxeles orientativos. Para textos largos del cuerpo del artículo usa el contador de palabras.
¿Para qué sirven robots y la URL canónica?
meta name="robots" indica a los buscadores si pueden indexar la página y seguir sus enlaces. Valores habituales: index, follow (por defecto), noindex, follow (no indexar pero sí seguir enlaces), index, nofollow o noindex, nofollow. También puedes añadir directivas como noarchive o nosnippet en el modo personalizado.
link rel="canonical" señala la URL «oficial» cuando el mismo contenido es accesible por varias direcciones (con/sin www, parámetros UTM, paginación mal gestionada, HTTP vs HTTPS). Debe ser una URL absoluta (https://…) y coherente con la que quieres que aparezca en resultados y al compartir.
¿Qué es Open Graph y qué significa cada campo?
Open Graph (prefijo og:) describe cómo se muestra un enlace cuando lo compartes en Facebook, LinkedIn, WhatsApp, Telegram, Slack y muchas otras apps. No sustituye al SEO de buscadores, pero sí mejora el aspecto del enlace en redes. Lo generas aquí, en la sección social de este generador de meta tags.
og:title — Título de la tarjeta social. Si lo dejas vacío, se reutiliza el title tag del SEO básico. Puede ser igual o ligeramente más «clickable» que el de Google.
og:description — Texto bajo el título en la tarjeta. Por defecto toma la meta description. En redes a veces se tolera un poco más de longitud que en el snippet de Google, pero conviene ser claro y conciso.
og:url — URL canónica del contenido compartido. Si no la indicas, se usa la URL canónica del bloque SEO. Ayuda a que las métricas de compartidos se agrupen en una sola dirección.
og:type — Tipo de recurso: website (página genérica o home), article (blog, noticia) o product (ficha de producto). Algunas plataformas usan este dato para enriquecer la vista previa.
og:site_name — Nombre de tu web o marca (por ejemplo «TresnaHub»). Aparece a veces junto al dominio en la tarjeta.
og:locale — Idioma/región en formato con guion bajo, p. ej. es_ES, en_US, ca_ES. Útil si tienes versiones en varios idiomas.
og:image — Imagen destacada al compartir. Recomendación habitual: 1200×630 px, JPG o PNG, HTTPS, peso razonable. Sin imagen, muchas redes muestran solo texto o un recorte pobre.
og:image:alt — Descripción accesible de esa imagen (lectores de pantalla y contexto cuando la imagen no carga). No sustituye al texto del post, pero ayuda a accesibilidad y claridad.
¿Qué es Twitter Card y qué campos debo rellenar?
Twitter/X usa las meta twitter:* para construir la tarjeta del enlace. Si faltan, a menudo reutiliza Open Graph, pero conviene definirlas para controlar el resultado.
twitter:card — Formato de la tarjeta. summary_large_image muestra una imagen grande (la opción recomendada si tienes og:image). summary es más pequeña, con miniatura cuadrada.
twitter:site — Cuenta del sitio o marca, con @ (p. ej. @tresnahub). Identifica quién publica el contenido a nivel de web.
twitter:creator — Cuenta del autor o redactor (@usuario). Opcional; útil en blogs con firmas personales.
twitter:title, twitter:description e twitter:image — Igual que en Open Graph: si no los rellenas en «Personalizar textos sociales», se heredan de og:title, og:description y og:image (y estos, a su vez, del SEO básico si están vacíos).
¿Cuándo usar «Personalizar textos sociales»?
Déjalos vacíos en la mayoría de casos: la herramienta reutiliza title y meta description, lo que mantiene coherencia entre Google y redes.
Activa overrides solo cuando quieras un mensaje distinto en social (más informal, con emoji, otro gancho) o una imagen específica para Twitter distinta de la de Open Graph. Ejemplo: title SEO sobrio para Google y og:title más llamativo para Facebook.
Si rellenas og:url distinta de la canónica, hazlo solo cuando sepas lo que haces (campañas, landings con parámetros): lo habitual es que canonical, og:url y la URL real coincidan.
¿Qué es el head avanzado (charset y viewport)?
meta charset="UTF-8" declara la codificación de caracteres (tildes, eñes, emojis). Casi todas las páginas modernas usan UTF-8. En WordPress y otros CMS suele estar ya en la plantilla: marca la casilla solo si pegas HTML en un <head> que tú controlas por completo y aún no tiene charset.
meta name="viewport" (width=device-width, initial-scale=1) es esencial para que la página se vea bien en móvil (responsive). Sin viewport, muchos navegadores móviles «encogen» un layout de escritorio. Igual que charset: si tu tema ya lo incluye, no lo dupliques.
Regla práctica: si usas plugin SEO o CMS, revisa qué meta genera automáticamente y copia aquí solo lo que falte. Duplicar charset o viewport no suele romper la página, pero ensucia el código.
¿Qué es hreflang y cómo relleno el campo?
Las etiquetas link rel="alternate" hreflang="…" indican a Google (y otros buscadores) qué URL corresponde a cada idioma o región cuando tienes el mismo contenido en varias versiones lingüísticas. Evitan que se confundan duplicados y ayudan a mostrar la versión correcta según el usuario.
En esta herramienta escribe una línea por idioma: código hreflang + espacio + URL absoluta. Ejemplos:
es https://ejemplo.com/es/pagina/en https://ejemplo.com/en/page/x-default https://ejemplo.com/
Usa códigos ISO válidos (es, en-GB, ca…). x-default es la versión por defecto cuando no encaja ningún idioma concreto. Cada URL listada debería enlazar también las demás (reciprocidad): hreflang funciona mejor como conjunto coherente en todo el sitio, no solo en una página suelta.
No hace falta hreflang si tu web es monolingüe. Resérvalo para sitios multidioma o multi-región con URLs distintas por idioma.
¿Para qué sirven copiar todo, copiar SEO y copiar social?
Copiar todo — Bloque completo listo para pegar en el <head> (SEO + social + opciones avanzadas que hayas activado).
Copiar SEO — Solo title, description, robots, canonical, keywords y hreflang. Útil si tu plugin SEO ya gestiona Open Graph y solo quieres revisar la parte de buscadores.
Copiar social — Solo meta og:* y twitter:*. Útil cuando Yoast, Rank Math o similar ya generan title/description pero quieres pegar a mano las etiquetas sociales.
La casilla «Incluir comentarios HTML por sección» añade líneas como <!-- SEO básico --> para orientarte al pegar en plantillas o temas.
¿Dónde pego el código generado?
En el <head> de tu HTML, antes de </head>, o en los campos equivalentes de tu CMS: «SEO title», «Meta description», «Social / Open Graph», etc.
En WordPress con Yoast, Rank Math, SEOPress o similar, normalmente no pegas HTML crudo: rellenas los mismos campos en el panel del plugin. Usa este generador para redactar, contar caracteres y luego transcribe los valores.
Evita duplicar la misma meta dos veces (por ejemplo og:title generado por el plugin y otra vez en código manual): la última etiqueta en el HTML puede prevalecer o confundir a depuradores.
¿Se envían mis textos al servidor?
No. El HTML se genera íntegramente en tu navegador. Opcionalmente se guarda un borrador en localStorage de este dispositivo; no se archiva en TresnaHub ni se usa para indexar tu web.
La vista previa de imagen social intenta cargar la URL de og:image desde tu navegador (petición directa a esa URL). Para comprobar el snippet en Google usa el simulador SERP, también 100 % en cliente.
Herramientas relacionadas
Otras herramientas en la categoría «SEO y contenido».