Generador de meta etiquetas

Qué es un generador de meta etiquetas

Toma lo poco que necesitan un resultado de búsqueda y una tarjeta para compartir —un título, una descripción, una URL, una imagen— y escribe las etiquetas que lo transportan: el elemento title, la meta descripción, las propiedades Open Graph que leen Facebook y LinkedIn, y los nombres de la tarjeta de Twitter. Copias el bloque en la cabecera de tu página y listo.

Este además previsualiza el resultado y lo mide. Todo ocurre en tu navegador: no se sube nada y no hay cuenta.

La medición es la parte que merece explicación, porque casi todas las demás herramientas de este tipo miden lo que no es.

Cómo usar el generador

1. Rellena los campos. Título, descripción, URL, nombre del sitio e imagen para compartir. Elige el tipo de contenido y el estilo de tarjeta de Twitter. Los campos vacíos se omiten: una etiqueta con valor vacío es peor que ninguna etiqueta.
2. Arrastra el ancho de la vista previa. La vista se redibuja y el panel te dice si tu título cabe o se corta a ese ancho. No hay un valor correcto, y ahí está justamente la cuestión.
3. Copia las etiquetas. El bloque se genera con cada valor escapado para atributo HTML, así que un ampersand en tu título o unas comillas en tu descripción no pueden romper el marcado.

La regla de los 60 caracteres mide la magnitud equivocada

El consejo está en todas partes: no pases de 60 caracteres en el título ni de 155 en la descripción. Conviene preguntarse de dónde salen esas cifras, porque la propia documentación de Google dice otra cosa. En la página que describe cómo se generan los enlaces de título, Google escribe que el título se recorta en los resultados según haga falta, «normalmente para caber en el ancho del dispositivo». El ancho del dispositivo. Ni un recuento de caracteres, ni un presupuesto fijo de píxeles: un móvil y un monitor ancho cortan en sitios distintos, así que ningún número único puede servir para ambos.

Esa misma página merece leerse por otro motivo. Enumera las fuentes de las que Google saca un enlace de título: el elemento title, el título visual principal, los encabezados, la etiqueta og:title, otro texto grande y destacado, e incluso el texto de los enlaces que apuntan a la página desde otros sitios. Tu elemento title es una entrada entre varias. Ajustarlo a un recuento de caracteres lo trata como una salida garantizada, y no lo es.

¿Cuánto vale entonces un recuento de caracteres como indicador del ancho? Lo medimos. Sesenta caracteres de Arial a 20 píxeles son 267 píxeles si son todos ele minúscula, y 1133 si son todos uve doble mayúscula: un factor de 4,2. No es una aproximación con cierto margen de error, es otra magnitud que resulta estar correlacionada.

Sobre texto real la correlación mejora, pero sigue siendo floja. En 1193 títulos reales de páginas en cinco idiomas —los de este mismo sitio, medidos sobre el HTML compilado—, el número de caracteres que cabe en un presupuesto fijo fue de 47 a 72. La regla de los «60 caracteres» acierta de media y falla hasta en una quinta parte en cualquier título concreto. Y el desacuerdo entre las dos reglas depende por completo del presupuesto de píxeles que supongas: discrepan en el 16,7 % de esos títulos a 512 píxeles, en el 5,0 % a 580 y en el 7,2 % a 600. La cifra más interesante es la del medio. La regla de caracteres luce mejor cerca de 580 píxeles porque ahí es donde caen sesenta caracteres de prosa media, lo que la convierte en una coincidencia calibrada sobre una conjetura acerca de un presupuesto que nadie publica, y no en una regla.

Por eso esta herramienta no te da un límite. Mide tu título con el motor de texto de tu propio navegador, muestra el ancho en píxeles y te deja mover tú mismo el ancho de la vista previa para ver dónde cae. Si quieres un objetivo, apunta a que el sentido sobreviva al corte, no a acertar una cifra.

Limitaciones honestas

La vista previa es una aproximación de un resultado de búsqueda, no una simulación. La maquetación de Google cambia, los resultados llevan enlaces de sitio, fechas, migas de pan e insignias que desplazan el espacio disponible, y el móvil y el escritorio difieren. Toma el control de ancho como una forma de ver cuánto margen tiene tu título, no como una predicción.

Fuera de Google nadie conoce el presupuesto, y las fuentes que citan uno discrepan entre sí en más de un 17 %: circulan 512, 580 y 600 píxeles, y también 18 y 20 píxeles de cuerpo. Esta página escoge Arial a 20 píxeles para el título por ser la combinación más citada, y dice claramente que eso es un informe y no una especificación.

La medición se hace con el canvas del navegador y no con una tabla de anchos incorporada, y esa decisión pesa más de lo que parece. Una tabla no puede aplicar kerning, y con una escritura cursiva no es solo imprecisa sino falsa: las letras árabes se unen y cambian de forma según sus vecinas, así que un texto renderizado es más estrecho que la suma de sus letras aisladas. Nuestro propio script de medición tiene exactamente ese defecto, y por eso sus cifras árabes sobrestiman el ancho, y por eso la herramienta que estás usando no funciona así.

El recuento de caracteres de aquí cuenta lo que tú llamarías caracteres, mediante segmentación por grafemas. No es lo que hacen la mayoría de los contadores. Un emoji de cohete es un carácter pero dos unidades para String.length de JavaScript; un emoji de familia formado por cuatro personas unidas por uniones de ancho cero es un carácter y once unidades; una letra acentuada escrita como base más marca combinante es un carácter y dos unidades. Si tu título lleva alguna de esas cosas, un contador hecho del modo habitual informa de un número que no cuenta nada que un lector pueda ver, y esta herramienta te enseña los dos.

Por último, las etiquetas se generan pero no se validan contra un rastreador real. Si tu imagen para compartir es accesible, tiene la proporción adecuada o está bloqueada por una regla de robots es algo que solo puede decirte una petición, y pedir tu URL exigiría un servidor, cosa que este sitio no usa para nada salvo un modelo de texto.

¿Por qué es gratis?

Escribir una docena de líneas de marcado y medir un poco de texto es trabajo que tu propia máquina hace en un milisegundo. No hay subidas, ni cuenta, ni nada que marcar con agua.

Si lo que quieres es revisar el HTML donde vas a pegarlo, el codificador de entidades HTML y el formateador de HTML de este sitio cubren ese lado, también sin subir nada.