Generador de meta tags

El <head> de una página lleva tres conjuntos de metadatos que se solapan —las etiquetas básicas que leen los buscadores, Open Graph para compartir en redes sociales y las Twitter Cards— y los tres repiten casi la misma información con tres grafías ligeramente distintas. El generador de arriba rellena los tres a partir de un único conjunto de campos.

Cómo funciona

Rellena los campos que tengas: todos son opcionales, y los que dejes vacíos se omiten en lugar de generar una etiqueta vacía. El resultado es un bloque listo para pegar, agrupado en cuatro secciones:

Básicas — <title>, <meta name="description">, una directiva robots construida a partir de las opciones de indexación y seguimiento de enlaces, y <link rel="canonical"> a partir de la URL de la página.

Open Graph — og:type (siempre website), más og:title, og:description, og:url, og:site_name y og:image para los campos que hayas rellenado.

Twitter — twitter:card, que pasa automáticamente a summary_large_image cuando aportas una imagen y se queda en summary cuando no, más twitter:site, twitter:title, twitter:description y twitter:image. Si escribes el usuario sin @ delante, se le añade.

Otras — theme-color, que tiñe la interfaz del navegador en el móvil.

Todos los valores de atributo se escapan para HTML, así que un ampersand o unas comillas en el título producen un marcado válido y no una etiqueta rota. No se envía nada a ningún sitio: la generación ocurre por completo en tu navegador.

Acertar con el contenido

Título: unos 50–60 caracteres. A partir de ahí los resultados de búsqueda lo truncan, y el corte depende del ancho en píxeles, no del número de caracteres, así que un título en mayúsculas se corta antes. Pon primero las palabras que distinguen la página y el nombre del sitio al final.

Descripción: unos 150–160 caracteres. No influye en el posicionamiento, pero es el texto comercial del resultado: escríbela para una persona que está decidiendo si hace clic. Google la ignora a menudo y genera su propio fragmento a partir de la página; es lo normal, no un fallo.

URL canónica: absoluta y autorreferenciada. Una página debe declararse canónica a sí misma, salvo que de verdad sea un duplicado de otra URL. Las URL canónicas relativas son válidas, pero son una fuente habitual de errores; usa la forma completa con https://.

Imagen: URL absoluta y con tamaño suficiente. Las imágenes de Open Graph deben medir al menos 1200×630 para mostrarse como tarjeta grande. Una ruta relativa no se resolverá cuando un rastreador remoto descargue la página, y una imagen protegida por autenticación no se mostrará en absoluto.

Robots: noindex es una instrucción de peso. Las opciones generan index, follow o noindex, nofollow. Poner noindex en una página que ya posiciona la saca de los resultados, y la etiqueta tiene que seguir siendo rastreable para que se lea la instrucción: bloquear a la vez la página en robots.txt impide que el rastreador llegue a leer el noindex.

Dónde colocarlas

Estas etiquetas van en el <head> del HTML renderizado, antes de cualquier contenido. Si tus páginas las genera un framework, usa su API de metadatos en lugar de pegar etiquetas en crudo en una plantilla: así las etiquetas viajan con la ruta, reciben los valores correctos en cada página y no pueden desincronizarse del contenido. Esta herramienta es más útil para una página estática, una landing page fuera de tu aplicación o para comprobar que el bloque que produce tu framework contiene todo lo que debe.

Las reglas estructurales del head del documento —qué puede aparecer ahí y por qué <title> es obligatorio— se explican en lo esencial de HTML5. Si la página la sirve una capa de vistas renderizada en el servidor, Spring MVC muestra en qué punto del recorrido de la petición está la plantilla que genera el head.

Herramientas relacionadas

Para ver cómo quedará de verdad el enlace al compartirlo, pega el bloque generado en la vista previa de Open Graph, que vuelve a leer las etiquetas y dibuja una maqueta de la tarjeta. Para ordenar el marcado que lo rodea, usa el formateador de HTML.