Generador de metaetiquetas
Genera etiquetas meta SEO, Open Graph y Twitter Card para tu sitio web.
Acerca de las etiquetas meta
Las etiquetas meta proporcionan metadatos sobre tu página HTML. Ayudan a los motores de búsqueda a entender tu contenido, controlan la manera en que tus páginas aparecen en los resultados de búsqueda y definen la vista previa de los enlaces en redes sociales. Un conjunto de etiquetas meta bien optimizado puede mejorar la tasa de clics desde la búsqueda y el uso compartido social. Mantén los títulos por debajo de 60 caracteres y las descripciones por debajo de 160 caracteres para una visualización óptima en los resultados de búsqueda.
Las cuatro familias de metadatos del <head>
El <head> de una página HTML moderna lleva normalmente metadatos en cuatro grupos, cada uno sirviendo a un público distinto:
- Conceptos básicos del documento, lo que necesita cualquier navegador:
<title>,<meta charset="utf-8">,<meta name="viewport">,<meta name="description">. - Directivas SEO, lo que leen los crawlers de los motores de búsqueda:
<meta name="robots">,<link rel="canonical">, el título de la página que acaba como enlace en el SERP. - Open Graph, lo que renderizan Facebook, LinkedIn, Slack, Discord, iMessage y la mayoría de los demás clientes de compartir enlaces:
og:title,og:description,og:image,og:url,og:type,og:site_name. - Twitter Card, lo que X / Twitter renderiza para los enlaces compartidos, con respaldo en las etiquetas OG cuando faltan:
twitter:card,twitter:title,twitter:image,twitter:site,twitter:creator.
Este generador emite las cuatro familias desde un solo formulario. La salida se pega directamente en el <head> de cualquier archivo HTML: pegar, guardar, desplegar. Para profundizar específicamente en Open Graph, la herramienta dedicada Vista previa de Open Graph muestra renderizados en vivo de las plataformas.
Título y descripción: ¿qué longitud deben tener?
Google Search Central es directo en la respuesta: no hay máximo estricto. Los snippets se truncan simplemente para encajar en el ancho del dispositivo. Las reglas de 60 caracteres para el título y 160 para la descripción son convenciones del sector derivadas del truncado en ancho de píxeles observado en los SERP de Google (~580 píxeles en escritorio). En la práctica:
- Título, apuntar a 50–60 caracteres. Las mayúsculas anchas (W, M, A mayúscula) consumen más espacio en píxeles que las letras estrechas (i, l, t), así que dos títulos de 60 caracteres pueden renderizarse con anchos visibles muy distintos.
- Descripción, 150–160 caracteres en escritorio, ~120 en móvil. Coloca la información clave al principio para que sobreviva al truncado móvil.
- La longitud no afecta al ranking; sólo afecta a cuánto del snippet ve un buscador antes de hacer clic.
La etiqueta meta robots: qué controla realmente
A diferencia de la obsoleta etiqueta keywords (ver más abajo), <meta name="robots"> está vivita y coleando; Google la soporta explícitamente. Valores comunes:
index, follow, el predeterminado. La página puede aparecer en la búsqueda; los crawlers siguen sus enlaces.noindex, excluir esta página de los resultados de búsqueda. Útil para páginas de agradecimiento, herramientas internas, archivos paginados, páginas de resultados de búsqueda y cualquier otra cosa que no quieras que compita con tu contenido real.nofollow, no seguir los enlaces de esta página. Rara vez es la elección correcta a nivel de página entera; normalmente se aplica por enlace medianterel="nofollow".noindex, nofollow, ambas. La postura de privacidad más fuerte para una página accesible públicamente.noarchive, no mostrar copia en caché en los resultados de búsqueda.nosnippet, no mostrar fragmento de descripción, sólo el título.
Para anulaciones específicas de Google, usa <meta name="googlebot"> con los mismos valores. Ten en cuenta que noindex también se puede expresar como cabecera HTTP X-Robots-Tag, que es el sitio adecuado para PDF, imágenes y otros recursos no HTML donde no puedes añadir una meta etiqueta.
Por qué importan las URL canónicas
<link rel="canonical"> dice a los motores de búsqueda qué versión de una página es la «oficial» cuando varias URL sirven contenido idéntico o casi idéntico. Casos comunes que necesitan canónica:
- Barra final o no (
/pagevs/page/). - HTTP vs HTTPS (las redirecciones heredadas a veces dejan ambas indexables).
- WWW vs apex (
www.example.comvsexample.com). - Parámetros de seguimiento (
?utm_source=...,?ref=...) produciendo infinitas URL «distintas». - Paginación, órdenes de clasificación, parámetros de filtro que producen el mismo contenido en orden distinto.
- Contenido sindicado republicado en varios sitios (la canónica apunta al original).
Sin una canónica, Google elige una versión por su cuenta y puede elegir la equivocada. La URL canónica debe ser absoluta (https:// completo) y debe coincidir exactamente con la URL que quieres que se indexe.
Etiquetas que puedes saltarte en 2026
<meta name="keywords">, Google ha declarado explícitamente desde septiembre de 2009 que no usa la etiqueta meta keywords como señal de ranking. Bing va más lejos: trata el relleno excesivo de palabras clave en esta etiqueta como una señal de spam. Incluirla no perjudica el SEO pero tampoco ayuda; el campo existe en este generador para los usuarios cuyas plantillas corporativas todavía la esperan.<meta http-equiv="refresh">para redirecciones, usa redirecciones HTTP 301/302 adecuadas desde el servidor en su lugar. El meta refresh retrasa la redirección y confunde a algunas herramientas de accesibilidad.<meta http-equiv="X-UA-Compatible">, sólo se necesitaba para compatibilidad con Internet Explorer, que ya no es una preocupación.<meta name="revisit-after">, nunca honrada por los crawlers principales. Puro culto al cargo.<meta name="generator">, sólo informativa; le dice al mundo con qué se construyó tu sitio. A veces una señal de seguridad que conviene quitar.
Las dos etiquetas que toda página realmente necesita
Más allá de <title> y <meta name="description">, dos etiquetas son innegociables para una página web moderna:
<meta charset="UTF-8">, debe aparecer dentro de los primeros 1024 bytes del documento, idealmente como primer hijo de<head>. El HTML Living Standard lo exige para el manejo correcto de caracteres. Sin ello, los navegadores pueden adivinar la codificación y equivocarse, especialmente en escrituras no latinas.<meta name="viewport" content="width=device-width, initial-scale=1">, dice a los navegadores móviles que rendericen la página al ancho real del dispositivo en lugar de alejar desde un layout de escritorio ficticio de 980 píxeles. Sin ella, cada usuario móvil ve una versión alejada y diminuta de tu página, casi inutilizable.
Open Graph y Twitter Cards en breve
Un breve resumen; para el detalle usa la herramienta Vista previa de Open Graph. Las cuatro etiquetas OG requeridas según ogp.me: og:title, og:type, og:image, og:url. Opcionales pero recomendadas: og:description, og:site_name. Dimensiones de imagen: 1200×630 (1,91:1) es el tamaño más seguro entre plataformas.
Para X / Twitter: incluye twitter:card = summary_large_image (la tarjeta moderna de ancho completo) y X recurre a las etiquetas OG para todo lo demás si faltan las etiquetas específicas de Twitter. La vista previa autónoma del Twitter Card Validator fue retirada por X el 2 de agosto de 2022; verifica pegando la URL en el compositor de tweets en su lugar.
Los datos estructurados son otro trabajo
Los datos estructurados JSON-LD (con vocabularios schema.org) son lo que impulsa los resultados ricos de Google: tarjetas de receta, info de producto con estrellas, fragmentos FAQ en la búsqueda, migas de pan. Es distinto de las meta etiquetas y vive en un bloque <script type="application/ld+json">, no en una etiqueta <meta>. Ambos están recomendados; uno no reemplaza al otro. Las meta etiquetas controlan el título / descripción / tarjeta de compartir básicos; los datos estructurados desbloquean los formatos más ricos.
Errores comunes
- Incluir
meta keywordsesperando un beneficio SEO. Google anunció en 2009 que no la usa. Más de veinte años después sigue en plantillas viejas; quita o ignora. - Olvidar
<link rel="canonical">. Si tu URL tiene parámetros de seguimiento o versiones alternas, Google elige una por su cuenta. Sin canónica, la versión elegida puede no ser la que tiene todos tus enlaces entrantes. - Títulos distintos en
<title>,og:titleytwitter:title. No es técnicamente incorrecto, pero es inconsistente. El predeterminado limpio es un solo título compartido entre los tres. - Logo genérico del sitio como
og:imageen cada página. Cada página merece una imagen única atada a su contenido; usar un solo logo por todo el sitio produce vistas previas de compartir aburridas. - Falta de meta
viewporten páginas dirigidas a móvil. Los navegadores móviles renderizan la página a un ancho de escritorio ficticio y se alejan. La experiencia de usuario es pésima. - Usar
<meta http-equiv="refresh">para redirecciones. HTTP 301/302 desde el servidor es la forma correcta; el meta refresh es más lento y hostil a la accesibilidad, y muchos crawlers lo manejan de forma inconsistente para el ranking. - Título más largo que ~580 píxeles (~60 caracteres de ancho). Truncado por Google con puntos suspensivos; la parte truncada no es visible para los buscadores.
- Olvidar que las single-page apps necesitan meta etiquetas renderizadas en servidor o pre-renderizadas. Muchos crawlers de redes sociales (Facebook, LinkedIn, Slack, Discord) no ejecutan JavaScript. Las etiquetas escritas por JS de cliente no son visibles para ellos.
Preguntas frecuentes
¿La etiqueta meta keywords todavía ayuda al SEO?
No. Matt Cutts de Google anunció en septiembre de 2009 que <meta name="keywords"> no se usa como señal de ranking. Bing trata el relleno excesivo de palabras clave en esta etiqueta como señal de spam. El campo se incluye en este generador para compatibilidad con plantillas y flujos CMS antiguos que aún la esperan; seguro dejarlo vacío.
¿Cuál es la diferencia entre meta description y OG description?
El HTML <meta name="description"> es lo que los motores de búsqueda usan como snippet bajo el título de tu página en los resultados. La Open Graph og:description es lo que muestran las tarjetas de compartir de redes sociales. Pueden ser el mismo texto (y suelen serlo) pero puedes escribir versiones distintas si tu audiencia de búsqueda y tu audiencia social esperan enfoques distintos.
Mi JavaScript escribe las meta etiquetas tras la carga de la página. ¿Está bien?
Para el crawler principal de Google (Googlebot), sí; Googlebot renderiza JavaScript y ve las meta etiquetas post-renderizado. Para los crawlers de redes sociales (Facebook, LinkedIn, Slack, Discord, WhatsApp), generalmente no; la mayoría no ejecutan JavaScript y sólo ven el HTML inicial. Si tu sitio es una single-page app, necesitas renderizado en servidor, pre-renderizado o un servicio como Prerender.io para asegurar que los crawlers de redes sociales vean las meta etiquetas correctas.
¿Dónde van exactamente estas etiquetas?
Dentro del <head> de tu HTML, idealmente cerca del principio. <meta charset> debe estar en los primeros 1024 bytes. <meta name="viewport"> inmediatamente después. Luego <title>, <meta name="description">, robots, canonical, etiquetas OG, etiquetas Twitter. El orden dentro del <head> no importa para el SEO una vez que charset y viewport están suficientemente al principio.
¿Debo preocuparme por la etiqueta meta refresh por seguridad?
No es un riesgo de seguridad por sí mismo, pero es un patrón pobre. Las redirecciones HTTP 301/302 del lado del servidor son más rápidas, manejan correctamente las cabeceras de referrer y son más amigables con la accesibilidad. Usa meta refresh sólo cuando no tengas control en servidor sobre las redirecciones (un host estático tipo GitHub Pages sin config de redirecciones).
¿Mis meta etiquetas se suben a un servidor?
No. El generador se ejecuta enteramente en tu navegador. Tus campos de título, descripción, URL e imagen quedan en tu máquina; el snippet de salida se compone localmente y se copia al portapapeles a demanda. Esto importa porque las etiquetas borrador suelen contener URL de páginas no publicadas, nombres internos de productos o copia de marketing de pre-lanzamiento que no quieres que pase por un servidor de terceros.
Herramientas relacionadas
Vista previa Open Graph
Previsualiza cómo se verá tu enlace en Facebook, Twitter y LinkedIn. Genera etiquetas OG.
Generador robots.txt
Construye un archivo robots.txt con reglas user-agent, rutas allow/disallow, sitemaps y retardos de crawl.
Generador de slug URL
Transforma cualquier texto en un slug limpio y apto para URL. Gestiona acentos, caracteres especiales y más.