Generador de metaetiquetas: title, description, Open Graph y Twitter
Rellena el título, la descripción y los datos de la tarjeta social de una página y obtén un bloque <head> completo y bien escapado, con contadores de longitud en vivo.
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Free Business & Marketing Tools | FreeToolsForWeb</title> <meta name="description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <link rel="canonical" href="https://www.example.com/page"> <meta name="theme-color" content="#244b3f"> <!-- Open Graph (Facebook, LinkedIn, Slack, WhatsApp) --> <meta property="og:type" content="website"> <meta property="og:title" content="Free Business & Marketing Tools | FreeToolsForWeb"> <meta property="og:description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <meta property="og:url" content="https://www.example.com/page"> <meta property="og:site_name" content="Example Co"> <meta property="og:image" content="https://www.example.com/images/share.png"> <meta property="og:locale" content="en_US"> <!-- Twitter / X card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Free Business & Marketing Tools | FreeToolsForWeb"> <meta name="twitter:description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <meta name="twitter:image" content="https://www.example.com/images/share.png">
Pégalo dentro de <head>. En Next.js, React Helmet o un CMS, pasa cada línea al campo equivalente en lugar de pegar el HTML tal cual.
Funciona por completo en tu navegador. Nada de lo que introduces se nos envía ni se guarda. Ver todas las herramientas gratis.
¿Encontraste un problema o algo que podría mejorar? Leemos todos los mensajes y lo arreglamos rápido.
Este generador de metaetiquetas gratuito produce el conjunto completo de etiquetas de cabecera que necesita una página: title y meta description con contadores de longitud en vivo, directivas canonical y robots, y las etiquetas Open Graph y Twitter Card que controlan cómo se ve un enlace al compartirlo en LinkedIn, Facebook, X, Slack y WhatsApp. Los valores se escapan correctamente, así que un título con un ampersand o comillas no rompe el HTML.
Las metaetiquetas son la parte más pequeña y más visible del SEO on-page: el título y la descripción son el texto del anuncio que Google escribe por ti si no los escribes tú, y las etiquetas sociales deciden si un enlace compartido muestra una imagen y un titular o una URL sin más. Las notas de abajo dan los límites de longitud actuales y las etiquetas que ya no sirven para nada, para que no mantengas la etiqueta meta keywords en 2026.
Cómo usarla
- Introduce el título de la página (apunta a 50–60 caracteres, con la palabra clave al principio) y la meta description (120–160 caracteres, con un motivo para hacer clic). Los contadores se ponen en verde cuando estás dentro del rango.
- Fija la URL canónica en la dirección preferida de la página, y deja robots en index, follow salvo que la página deba quedar fuera de los buscadores.
- Añade la imagen para compartir (1200 × 630 píxeles), el nombre del sitio y el usuario de Twitter. El mismo título y la misma descripción se reutilizan en las etiquetas sociales.
- Revisa la vista previa de búsqueda y copia el bloque generado en el <head> de la página.
- Después de publicar, prueba la página en producción con la herramienta de vista previa de Open Graph para confirmar que las etiquetas se sirven como esperas.
Preguntas frecuentes
¿Qué metaetiquetas importan de verdad para el SEO?
El title (una señal de posicionamiento directa y el titular en los resultados), la meta description (no es una señal de posicionamiento, pero es tu fragmento y determina el porcentaje de clics), canonical (evita la dilución por contenido duplicado), robots (control de index/noindex) y viewport (usabilidad en móviles). Las etiquetas Open Graph y Twitter afectan a cómo se comparte en redes sociales, no al posicionamiento. Google ignora la etiqueta meta keywords desde 2009; no pierdas el tiempo con ella.
¿Qué longitud deben tener el título y la descripción?
Títulos: unos 50–60 caracteres, ya que Google los corta según el ancho en píxeles, en torno a 600 px. Descripciones: 120–160 caracteres en escritorio, menos en móvil. Google reescribe cualquiera de los dos cuando cree que puede hacerlo mejor, algo más frecuente con textos genéricos o saturados de palabras clave, así que escribe un texto concreto y honesto.
¿Necesito tanto las etiquetas Open Graph como las de Twitter Card?
X lee las etiquetas Open Graph como alternativa, así que og:* basta en la mayoría de los casos; aun así merece la pena añadir twitter:card, porque elige entre la tarjeta con imagen grande y el resumen pequeño. Todos los demás (LinkedIn, Facebook, Slack, WhatsApp, iMessage, Discord) solo leen Open Graph.
¿Qué tamaño debe tener la imagen para compartir?
1200 × 630 píxeles (1.91:1) es el tamaño seguro para la tarjeta grande de todas las plataformas. Por debajo de 600 px de ancho, Facebook y LinkedIn recurren a una miniatura pequeña o a ninguna imagen. Mantén el contenido importante lejos de los bordes; algunas plataformas recortan a un cuadrado en los feeds. Usa una URL absoluta con HTTPS.
¿Todas las páginas deben tener una etiqueta canonical?
Sí, apuntando a sí misma salvo que la página sea un duplicado de otra. Unifica en una sola URL las variantes con parámetros de seguimiento, con o sin barra final y con http/https, y es un seguro barato. La canonical debe ser una URL absoluta de una página que devuelva 200.
Etiquetas que ya no sirven para nada
meta keywords (ignorada desde 2009), meta revisit-after, meta distribution, meta rating y las etiquetas geo.* específicas de Google son peso muerto. Los valores de robots noodp, noydir y las variantes de nosnippet se han retirado o sustituido por max-snippet. Si una plantilla todavía los genera, quitarlos es seguro y deja el código algo más limpio.
Escapado y codificación
Los valores de los atributos deben escapar & como & y " como "; este generador lo hace por ti. Declara charset utf-8 como lo primero dentro de <head> para que el navegador decodifique correctamente el resto. En frameworks (Next.js, Nuxt, Django, Rails, WordPress), fija estos valores mediante el componente de head o de SEO del framework en lugar de pegar HTML sin procesar, para que sean específicos de cada página y se escapen automáticamente.
Herramientas gratis relacionadas
- Vista previa de SERP — Previsualiza cómo se verán el título y la meta descripción de tu página en Google, con recuento de caracteres en tiempo real.
- Vista previa de Open Graph — Introduce una URL y mira la tarjeta exacta que mostrarán Facebook, LinkedIn, X y Slack, todas las etiquetas encontradas y lo que falta.
- Generador de robots.txt — Crea un robots.txt con ajustes predefinidos para permitir todo, entornos de pruebas y WordPress, una sección de rastreadores de IA (bloquear el entrenamiento, mantener la búsqueda con IA) y avisos de los errores que desindexan sitios.