Generador de meta tags SEO y Open Graph
Rellena una vez y obtén el bloque de meta tags listo para HTML, Next.js o Nuxt, viendo cómo quedará tu enlace en buscadores y redes.
Importar desde el HTML de una página
Pega el <head> (o la página entera, Ctrl+U en el navegador) y se rellenarán los campos.
MACM
https://miguelacm.es/tools
Herramientas web gratis para desarrolladores | MACM
Más de 170 herramientas online gratuitas que funcionan en tu navegador: JSON, PDF, imágenes, audio y…
Título 0 / 580 px · descripción 0 / 920 px
Aproximación del diseño de cada plataforma; cada red cambia su maquetación y puede cachear la tarjeta.
- Título con buena longitud (51 caracteres).
- Descripción con buena longitud (145 caracteres).
<title>Herramientas web gratis para desarrolladores | MACM</title> <meta name="description" content="Más de 170 herramientas online gratuitas que funcionan en tu navegador: JSON, PDF, imágenes, audio y ciberseguridad. Sin registro y sin anuncios."> <link rel="canonical" href="https://miguelacm.es/tools"> <meta property="og:type" content="website"> <meta property="og:title" content="Herramientas web gratis para desarrolladores | MACM"> <meta property="og:description" content="Más de 170 herramientas online gratuitas que funcionan en tu navegador: JSON, PDF, imágenes, audio y ciberseguridad. Sin registro y sin anuncios."> <meta property="og:url" content="https://miguelacm.es/tools"> <meta property="og:site_name" content="MACM"> <meta property="og:locale" content="es_ES"> <meta property="og:image" content="https://miguelacm.es/opengraph-image"> <meta property="og:image:alt" content="Catálogo de herramientas de MACM"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Herramientas web gratis para desarrolladores | MACM"> <meta name="twitter:description" content="Más de 170 herramientas online gratuitas que funcionan en tu navegador: JSON, PDF, imágenes, audio y ciberseguridad. Sin registro y sin anuncios."> <meta name="twitter:image" content="https://miguelacm.es/opengraph-image"> <meta name="twitter:image:alt" content="Catálogo de herramientas de MACM"> <meta name="twitter:site" content="@miguelacm">
Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
Las meta tags deciden cómo aparece tu página en Google y qué tarjeta se muestra al compartir el enlace en X, WhatsApp o LinkedIn, pero escribirlas a mano es fácil de estropear: una og:image relativa que nadie puede cargar, un hreflang con guion bajo o una descripción que Google corta a la mitad. Este generador reúne todas las etiquetas en un formulario, mide el título y la descripción en píxeles como hace el buscador, muestra la tarjeta en seis plataformas y avisa de los errores más habituales. El resultado sale listo para HTML plano, para la API Metadata de Next.js o para useSeoMeta de Nuxt, y también puedes importar las etiquetas de una página que ya tengas.
Características
- ✓Title, description, canonical, robots, theme-color, favicon y apple-touch-icon
- ✓Open Graph completo con imagen, dimensiones, texto alternativo y datos de artículo
- ✓Twitter Cards summary y summary_large_image con cuentas de sitio y autor
- ✓hreflang con x-default para webs en varios idiomas
- ✓Vista previa de Google, X, Facebook y LinkedIn, WhatsApp, Discord y Slack
- ✓Longitud de título y descripción medida en píxeles, como la trunca Google
- ✓Exportación a HTML, objeto Metadata de Next.js (verificado con sus tipos) y useSeoMeta de Nuxt
- ✓Importa las etiquetas de una página existente y revisa errores: URLs relativas, proporción de imagen, hreflang o fechas
¿Cómo generar las meta tags de una página?
- 1
Rellena o importa
Escribe título, descripción, URL e imagen, o importa las etiquetas pegando el HTML de una página.
- 2
Completa redes e idiomas
Añade las cuentas de X, el tipo de contenido, los datos de artículo y las versiones en otros idiomas.
- 3
Revisa las vistas previas
Comprueba cómo queda en Google y en cada red y corrige los avisos.
- 4
Copia el código
Elige HTML, Next.js o Nuxt y pega el resultado en tu proyecto.
Preguntas frecuentes
¿Cuánto debe medir el título y la descripción?
Google no corta por caracteres sino por píxeles: el título se trunca hacia los 580 px (unos 55-60 caracteres) y la descripción hacia los 920 px (unos 150-160 caracteres). La herramienta mide el ancho real con la misma tipografía.
¿Qué tamaño debe tener la imagen Open Graph?
1200 × 630 píxeles, con proporción 1,91:1, funciona bien en Facebook, LinkedIn, X y WhatsApp. La URL debe ser absoluta y pública; indicar ancho y alto ayuda a que la tarjeta se muestre a la primera.
¿Por qué no se actualiza la tarjeta al compartir?
Las redes cachean la vista previa. Tras cambiar las etiquetas, fuerza la actualización con el Sharing Debugger de Facebook, el Post Inspector de LinkedIn o compartiendo la URL con un parámetro nuevo.
¿Cómo se usa en Next.js?
Elige la salida Next.js y pega el objeto metadata en tu page.tsx o layout.tsx del App Router. Si indicas theme-color se genera también el export viewport, que es donde Next.js lo espera desde la versión 14.
¿Siguen sirviendo las meta keywords?
No. Google las ignora desde 2009, por eso la herramienta no las genera. Lo que influye es el título, la descripción como reclamo en resultados, la canónica y el contenido.
¿Se envían mis datos o imágenes?
No. Todo ocurre en tu navegador. La imagen local solo se usa para la vista previa y nunca se sube.
Herramientas relacionadas
Incrusta Generador de Meta Tags en tu web
Integra Generador de Meta Tags en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/meta-tags-generator"
width="100%"
height="700"
frameborder="0"
title="Generador de Meta Tags — miguelacm.es"
></iframe>