Generador de meta tags y Open Graph con vista previa

Las etiquetas del <head>, escritas y revisadas en un solo sitio

Este generador de meta tags prepara las líneas que van en el <head> de una página: título, meta description, URL canónica, indicaciones para los robots, idioma, viewport, color del navegador, favicon y las etiquetas Open Graph, que deciden cómo se ve un enlace compartido. Mientras escribes se redibujan cuatro vistas previas: un resultado de búsqueda, una tarjeta con imagen grande, una tarjeta compacta y un mensaje con el enlace.

El código se escapa automáticamente. Un título como Ofertas & precios: "Top" < 30 € se convierte en <title>Ofertas &amp; precios: "Top" &lt; 30 €</title>, y dentro de los atributos content las comillas pasan a ".

Cómo se usa

1. Rellena «Título (etiqueta title)» y «Meta description». Debajo de cada campo, un contador muestra los caracteres y un ancho aproximado en píxeles.
2. Escribe la «URL canónica» y ajusta «Indexación (robots)» y «Enlaces de la página (robots)».
3. Si tu web tiene varios idiomas, completa «Versiones en otros idiomas»: una línea por versión, por ejemplo en https://www.example.com/en/.
4. En la parte de compartir, elige el «Tipo de contenido», la «Tarjeta para compartir» (summary_large_image para imagen grande, summary para miniatura), la dirección y el tamaño de la imagen, el nombre del sitio y og:locale (por ejemplo es_ES o es_MX).
5. Revisa «Puntos que revisar», pulsa «Copiar el código» y pégalo en el <head> de tu página.

Para partir de una página publicada, abre «Leer las etiquetas de una página existente», pega su código fuente y pulsa «Leer etiquetas»: el formulario se rellena solo. No se envía nada: todo ocurre en tu navegador.

Para qué sirve cada etiqueta

El title es la línea en la que se hace clic en un resultado de búsqueda y el nombre de la pestaña. La meta description es el resumen que aparece debajo. Los buscadores cortan ambos textos según un ancho en píxeles, no según un número fijo de caracteres, y a veces los reescriben. Las referencias de la herramienta (unos 50 a 60 caracteres para el título y 150 a 160 para la descripción) son órdenes de magnitud, no una norma oficial. El ejemplo incluido, «Mermelada de naranja amarga casera: receta en 4 pasos», tiene 53 caracteres y su descripción 146: los dos entran en las referencias.

La URL canónica indica la dirección de referencia cuando la misma página responde en varias direcciones. La etiqueta robots con noindex saca la página de los resultados; nofollow pide no seguir sus enlaces.

Las etiquetas Open Graph (og:title, og:description, og:image…) las leen las redes sociales y las aplicaciones de mensajería cuando alguien pega un enlace. Si dejas vacíos el título y la descripción para compartir, se reutilizan los de la página.

Imagen para compartir y prueba de la vista previa

Una imagen de 1200 × 630 píxeles, en formato 1,91:1, va bien para las tarjetas grandes. Si escribes 960 × 504, la herramienta avisa de que puede verse borrosa; con 1080 × 1350, advierte de que se recortará. La herramienta no descarga esa dirección: solo dibuja su hueco. Para ver una imagen real, usa «Probar una imagen de tu dispositivo»: el archivo aparece en las vistas previas sin salir de tu ordenador y se rellenan su ancho y su alto.

Estas vistas previas son maquetas genéricas. Cuando la página esté publicada, prueba el enlace pegándolo en un chat privado. Las plataformas suelen guardar la vista previa antigua unos días, y algunas ofrecen una herramienta para actualizarla.

Preguntas frecuentes

¿Hay que añadir la metaetiqueta keywords?

No. Los grandes buscadores la ignoran desde hace años, por eso la herramienta no la incluye.

¿Por qué mi título aparece cambiado en los resultados?

Los buscadores pueden sustituir un título demasiado largo, vago o que no encaja con el contenido.

Sigue saliendo la vista previa antigua después del cambio, ¿es normal?

Sí. Las plataformas guardan en caché las vistas previas de los enlaces. Comprueba que las nuevas etiquetas ya están publicadas y espera a que su robot vuelva a pasar.