Generador de metaetiquetas
Escribe el título y la descripción de una página, comprueba cómo queda el resultado en Google en escritorio y en móvil, y copia las etiquetas listas para el head, con canonical, robots, hreflang y etiquetas sociales incluidas.
- Vista previa de Google
- Medido en píxeles
- Lista de comprobación
- Funciona en tu navegador
Título y descripción
La única dirección por la que debe conocerse esta página: completa, con https://.
Se muestra encima de la dirección en la vista previa y se usa para og:site_name.
Vista previa de Google
Google corta los títulos y las descripciones por su ancho en píxeles, no por el número de caracteres: las letras anchas como W y M agotan el espacio antes. La vista previa mide tu texto de la misma forma. Aun así, Google puede reescribir un título o elegir otro pasaje de la página como descripción.
Lista de comprobación
Compartir en redes sociales
Buscadores (robots)
noarchive: sin copia en caché · nosnippet: sin texto bajo el título · noimageindex: las imágenes de esta página quedan fuera de la búsqueda de imágenes · notranslate: sin versión traducida en los resultados.
Deja un límite vacío para usar el valor predeterminado. -1 significa sin límite y 0, nada en absoluto. max-image-preview:large es necesario para las imágenes grandes en Google Discover.
Para páginas con fecha de fin, como ofertas y eventos (unavailable_after).
Idioma, juego de caracteres y viewport
Un código de idioma como en, en-US o de-AT. Va en la etiqueta de apertura: <html lang="en-US">; el cuadro de código te lo recuerda.
Versiones por idioma (hreflang)
Enumera todas las versiones de esta página en otros idiomas, incluida esta misma. Todas las versiones deben llevar la misma lista. x-default indica la versión para todos los demás.
Todavía no hay versiones por idioma.
Autor, colores, iconos y más
Opcional, separadas por comas. Google ignora esta etiqueta desde 2009 y Bing trata una lista larga como señal de spam: unas pocas palabras como mucho, o déjala vacía.
Indica al navegador qué esquemas de color admite tu página.
Qué parte de la dirección se transmite cuando un visitante sigue un enlace.
Iconos
Código HTML
Importar desde un HTML existente
El código pegado solo se lee como texto dentro de tu navegador. Sus scripts nunca se ejecutan, no se carga nada desde él y no se envía nada a ningún sitio. Al importar se sustituye lo que haya ahora en el formulario.
Cómo generar metaetiquetas
El código y la vista previa se actualizan mientras escribes.
- 1
Escribe el título y la descripción
Introduce el título de la página, la meta descripción, la URL canónica y el nombre del sitio. La vista previa muestra dónde cortaría Google el texto en escritorio y en móviles.
- 2
Añade lo que necesite la página
Activa las etiquetas Open Graph y de tarjeta de X, define las reglas de robots, enumera las versiones por idioma o abre las secciones de viewport, color del tema e iconos.
- 3
Revisa y copia
Lee la lista de comprobación, corrige lo que señale y, después, copia el código o descárgalo y pégalo en el <code><head></code> de tu página.
El head de una página, etiqueta a etiqueta
Solo etiquetas que los navegadores y los buscadores leen de verdad.
Vista previa del resultado de búsqueda
Muestra el título, la dirección y la descripción como un resultado de Google para escritorio y móvil. El texto se corta por su ancho en píxeles, como hace Google, no por número de caracteres.
Lista de comprobación explicada
Avisa de un título ausente o demasiado largo, una descripción demasiado corta, una canonical relativa o con http, parámetros de seguimiento en la canonical, un zoom bloqueado y más.
Directivas robots
index o noindex, follow o nofollow, noarchive, nosnippet, noimageindex, notranslate, max-snippet, max-image-preview, max-video-preview y unavailable_after.
hreflang para las versiones por idioma
Enumera cada versión de idioma con su dirección y añade x-default y la propia página. La lista de comprobación detecta códigos no válidos, duplicados y la falta de autorreferencia.
Etiquetas sociales en un solo paso
Añade las etiquetas Open Graph y el tipo de tarjeta de X a partir del mismo título, descripción e imagen para compartir, sin repetir lo que X ya lee de Open Graph.
Importar HTML existente
Pega el head o todo el código fuente de una página y el formulario se rellena con sus etiquetas. El código solo se lee como texto; los scripts que contenga no se ejecutan.
Privado por diseño
Todo funciona en tu navegador. Lo que escribes, pegas o abres no se envía a ningún servidor.
Gratis y sin registro
Sin cuenta, sin límites y sin marca de agua: en el móvil, la tableta o el ordenador.
Qué metaetiquetas importan y para qué sirven
Las metaetiquetas van en el <head> de una página y la describen a navegadores, buscadores y aplicaciones. Dos de ellas determinan el aspecto de la página en los resultados de búsqueda: la etiqueta title, que suele convertirse en el titular azul, y la meta descripción, que a menudo se usa como texto debajo. El título es, además, una señal de posicionamiento. La descripción no lo es, pero una descripción clara puede conseguir más clics. Google puede reescribir cualquiera de las dos cuando cree que otro texto responde mejor a la búsqueda.
Los buscadores no cuentan caracteres. Un resultado tiene un ancho fijo, así que un título lleno de letras anchas como la W y la M se corta antes que uno con muchas letras estrechas. Esta herramienta mide tu texto en píxeles: unos 580 px para un título en escritorio, que equivalen a entre 50 y 60 caracteres, y unos 920 px para una descripción en escritorio, entre 150 y 160 caracteres. Los móviles muestran menos descripción, así que pon lo más importante en la primera frase.
Errores habituales: el mismo título en muchas páginas; un título todo en mayúsculas; una descripción que repite el título; un noindex olvidado de una versión de pruebas, que elimina la página de los resultados; una URL canónica relativa, con http o que conserva parámetros de seguimiento; y una etiqueta viewport que impide el zoom, lo que supone un problema de accesibilidad. La etiqueta keywords es otro clásico: Google la ignora desde 2009, así que una lista larga no aporta nada y enseña a la competencia a qué términos apuntas.
Las etiquetas más importantes del head
| Etiqueta | Qué hace | Consejo |
|---|---|---|
| <code><title></code> | Titular del resultado de búsqueda y rótulo de la pestaña del navegador | Único en cada página, con las palabras importantes al principio, unos 50–60 caracteres |
| <code>meta name="description"</code> | Texto propuesto para debajo del titular | Una o dos frases, unos 150–160 caracteres |
| <code>link rel="canonical"</code> | Indica la dirección preferida de la página | Una dirección https:// completa y sin parámetros de seguimiento |
| <code>meta name="robots"</code> | Permite o bloquea la indexación y los fragmentos | Omítela salvo que necesites noindex o un límite |
| <code>meta name="viewport"</code> | Hace que el diseño se adapte a los móviles | <code>width=device-width, initial-scale=1</code>, con el zoom permitido |
| <code>link rel="alternate" hreflang</code> | Enlaza las versiones por idioma de una página | La misma lista en todas las versiones, con x-default |
Consejos
- ¿Necesitas datos de artículo o de producto, varias imágenes o un vídeo en la tarjeta para compartir? Continúa en el Generador de Open Graph.
- Diseña la imagen para compartir de 1200 × 630 px con el Generador de imágenes OG y los iconos con el Generador de favicon.
- Limpia la dirección de la página antes de usarla como canónica con el Generador de URL canónica y añade datos estructurados con el Generador de schema.
- Escribe el título pensando primero en las personas: di qué ofrece la página, deja la marca para el final y evita repetir tres veces la misma palabra.
Preguntas frecuentes
¿No encuentras tu respuesta? Escríbenos: respondemos rápido.
¿Qué longitud debe tener la etiqueta title?
No hay un número fijo de caracteres. Google corta los títulos por su ancho, a unos 580 píxeles en escritorio, lo que suele equivaler a entre 50 y 60 caracteres. La vista previa mide tu título en píxeles y te avisa cuando el final va a quedar cortado.
¿Qué longitud debe tener la meta descripción?
En escritorio caben entre 150 y 160 caracteres, y en móviles bastantes menos. Pon el mensaje principal en la primera frase para que se conserve en pantallas pequeñas. Las descripciones muy cortas suelen sustituirse por un pasaje de la página.
¿Las metaetiquetas ayudan al SEO?
La etiqueta title es una señal de posicionamiento y la descripción influye en cuánta gente hace clic. Las etiquetas robots y canonical controlan qué páginas se indexan y con qué dirección. La etiqueta keywords no tiene ningún efecto en Google.
¿Dónde se colocan las metaetiquetas?
Dentro del elemento <head> de la página, antes de </head>. El juego de caracteres debe figurar entre las primeras líneas. En un gestor de contenidos, lo normal es introducir el título y la descripción en los campos SEO de la página.
¿Por qué Google muestra un título o una descripción distintos?
Google compone el resultado para cada búsqueda. Si considera que un encabezado o un pasaje de la página se ajusta mejor a la consulta, o si el título es muy largo, está saturado de palabras clave o se repite en muchas páginas, utiliza su propio texto.
¿Se envían mis datos a un servidor?
No. La herramienta funciona por completo en tu navegador. Lo que introduces no se sube, no se registra y no se guarda en nuestros servidores.
Más herramientas SEO y web gratuitas
Genera etiquetas y archivos, comprueba códigos de estado, redirecciones, DNS y certificados: gratis y sin cuenta.