Generador de meta etiquetas
Genera en el navegador un conjunto completo de meta tags HTML para cualquier página. Introduce el título, la descripción, la URL canónica, la imagen para compartir y el nombre del sitio, y la herramienta arma las etiquetas de búsqueda, las etiquetas Open Graph para Facebook y LinkedIn, y las Twitter Card para X. La vista previa en tiempo real muestra cómo se leerá el enlace en resultados de Google y cómo se desplegará como tarjeta social, para ajustar texto e imagen antes de publicar. Puedes copiar el fragmento head listo para pegar o descargarlo como HTML; lo que escribes no sale de esta página.
- Genera juntos título, descripción, Open Graph y Twitter Card
- Previsualiza el resultado de Google y las tarjetas de Facebook y X mientras escribes
- Configura URL canónica, imagen para compartir, locale, color de tema y regla robots
- Copia el fragmento head o descárgalo como HTML, todo localmente en el navegador
Aquí aparece tu meta descripción como un resumen breve y legible de la página.
Resumen
Unos pocos campos se convierten en un fragmento head completo, con etiquetas de búsqueda, Open Graph y Twitter Card en un solo bloque, junto con vistas previas en tiempo real para revisar cómo se leerá la página antes de publicarla.
- 01
Fragmento head completo
Genera título, meta descripción, enlace canónico, etiquetas Open Graph y Twitter Card en un solo bloque, ordenado por grupos y con comentarios para pegarlo limpiamente en el head de cualquier página.
- 02
Open Graph para enlaces enriquecidos
Configura og:title, og:description, og:image, og:url, og:type, og:site_name y og:locale para que Facebook, LinkedIn, Slack y otras plataformas muestren una tarjeta completa en lugar de un enlace desnudo.
- 03
Compatible con Twitter Card
Elige una tarjeta de resumen o de imagen grande y completa título, descripción, imagen y cuentas del sitio y del autor para que el enlace se renderice como tarjeta en X.
- 04
Vistas previas de búsqueda y redes
Cambia entre las vistas de Google, Facebook y X para ver de forma aproximada cómo se distribuirán el título, la descripción, el dominio y la imagen antes de que la página sea rastreada o compartida.
- 05
Guía de longitud
Los contadores del título y la descripción cambian de color cuando superas las longitudes que los buscadores y las tarjetas sociales suelen recortar, para mantener lo importante dentro del área visible.
- 06
Canónica, robots y color de tema
Añade una URL canónica para consolidar páginas duplicadas, alterna la regla robots entre index y noindex, y define un color de tema para la interfaz del navegador móvil.
- 07
Salida escapada de forma segura
Los valores con ampersands, corchetes angulares o comillas se escapan según las reglas de atributos HTML, de modo que un título con signos de puntuación no rompa las etiquetas ni la página.
- 08
Copia o descarga local
Copia el fragmento al portapapeles o descárgalo como archivo HTML. Todo ocurre dentro de la pestaña del navegador y esta página no envía nada al servidor.
Cómo usarla
Rellena los campos de la izquierda y las vistas previas y el fragmento de la derecha se actualizan al instante. Ajusta hasta que el resultado de búsqueda y las tarjetas sociales se lean como esperas.
- 01
Introduce el título y la descripción de la página, observando los contadores de caracteres.
- 02
Añade la URL canónica, el nombre del sitio y una URL de imagen para compartir para obtener tarjetas sociales enriquecidas.
- 03
Elige el tipo Open Graph y el estilo de Twitter Card que correspondan a la página.
- 04
Abre Avanzado para definir locale, color de tema, autor, palabras clave, cuentas o una regla noindex.
- 05
Cambia entre las vistas de Google, Facebook y X para comprobar cómo aparecerá el enlace.
- 06
Copia el fragmento head o descárgalo como HTML, y pégalo en el head de tu página.
Detalles
No todas las etiquetas tienen el mismo peso. Un título y una descripción breves y precisos, junto con una buena imagen para compartir, resuelven la mayor parte del trabajo; el resto son ajustes para cada plataforma.
- Define siempre un título y una descripción claros, porque determinan tanto el resumen de búsqueda como el texto de la tarjeta social.
- Prepara una imagen para compartir de unos 1200 × 630 píxeles para que las tarjetas de imagen grande no se recorten ni se vean borrosas.
- Configura la URL canónica como la dirección preferida de la página para evitar dividir señales entre URLs duplicadas.
- Añade og:site_name y una cuenta de Twitter para que el contenido compartido se atribuya claramente a tu marca.
- Usa el tipo article para publicaciones y el tipo website para páginas de inicio y landing pages.
- Define una regla noindex para staging, páginas de agradecimiento o páginas de poco contenido que no quieres en resultados de búsqueda.
Casos de uso
Los meta tags deciden cómo se ve una página en el momento en que se descubre o se comparte, por eso son importantes para casi cualquier sitio o aplicación pública.
-
Blogs y páginas de artículos
Personaliza título, descripción e imagen de cada publicación para que se lea bien tanto en resultados de búsqueda como en tarjetas sociales.
-
Landing pages de marketing
Controla con precisión cómo aparece una URL de campaña cuando se pega en chats, se publica en redes o aparece en buscadores.
-
Páginas de producto y precios
Añade títulos e imágenes Open Graph precisos para que los enlaces de producto compartidos se muestren como tarjetas limpias, no como URLs sueltas.
-
Documentación y changelogs
Define URLs canónicas y descripciones consistentes en muchas páginas para que los buscadores indexen la versión correcta.
-
Aplicaciones de una sola página
Genera etiquetas head estáticas para colocarlas en la página base, de modo que rastreadores y analizadores de enlaces lean metadatos reales.
-
Revisión rápida de tarjetas sociales
Antes de publicar, previsualiza cómo se desplegará un enlace en Google, Facebook y X, y ajusta título o imagen si hace falta.
Ver también
Los meta tags encajan naturalmente con el resto del head de un sitio. Para generar los iconos que muestran navegadores y marcadores, usa Generador de favicon y exporta ICO y el manifiesto. Para convertir el título de una página en una URL limpia que pueda usarse como enlace canónico, pásalo primero por Generador de slug . Al elegir un color de tema, puedes revisar su legibilidad con Comprobador de contraste . Si el título o la descripción contienen caracteres especiales que quieres comprobar, Codificador y decodificador de HTML muestra cómo se codifica cada uno.
Buenas prácticas
Unos buenos metadatos son honestos, específicos y consistentes. Algunos hábitos mantienen precisos los resúmenes de búsqueda y las tarjetas sociales a medida que el sitio crece.
- Escribe un título y una descripción únicos para cada página importante, en lugar de reutilizar el mismo par en todo el sitio.
- Mantén los títulos cerca de 60 caracteres y las descripciones cerca de 160 para evitar recortes.
- Usa una URL https absoluta para la imagen compartida, porque las rutas relativas suelen fallar en plataformas sociales.
- Haz que título y descripción coincidan con el contenido real de la página; los metadatos engañosos dañan la confianza y el porcentaje de clics.
- Tras publicar, vuelve a revisar la página con el depurador propio de cada plataforma, porque algunas guardan en caché la primera versión que rastrean.
Limitaciones
La herramienta genera las etiquetas; no puede rastrear tu página ni controlar cómo terminará renderizándolas cada plataforma externa.
- Las vistas previas son aproximadas; cada plataforma tiene su propio diseño, reglas de recorte e imagen, y pueden cambiar con el tiempo.
- Añadir etiquetas no fuerza un nuevo rastreo; buscadores y plataformas sociales actualizan a su propio ritmo y pueden mantener tarjetas antiguas en caché.
- La imagen para compartir debe estar en una URL pública accesible; una ruta local o privada no cargará cuando se comparta el enlace.
- Las meta keywords son ignoradas en gran medida por los principales buscadores y se incluyen solo para los pocos sistemas que aún las leen.
- Unos buenos metadatos ayudan a la presentación, pero no son un atajo de posicionamiento; la calidad del contenido y la experiencia de página siguen siendo clave.
Preguntas frecuentes
Preguntas comunes sobre Open Graph, Twitter Card, imágenes para compartir y cómo estas vistas previas se relacionan con lo que cada plataforma renderiza realmente.
¿Qué son las etiquetas Open Graph y Twitter Card?
Las etiquetas Open Graph son meta tags con el prefijo og: que indican a plataformas como Facebook, LinkedIn y Slack qué título, descripción, imagen y URL deben mostrar cuando se comparte un enlace. Las etiquetas Twitter Card cumplen el mismo papel en X. Juntas convierten un enlace plano en una tarjeta enriquecida.
¿Qué tamaño debería usar para la imagen compartida?
Una imagen de 1200 × 630 píxeles es una opción segura para tarjetas de imagen grande en la mayoría de plataformas. Usa una URL https absoluta y mantén el texto importante lejos de los bordes, porque cada plataforma puede recortar de forma algo distinta.
¿Todavía necesito una meta descripción para SEO?
Sí. Los buscadores suelen usar la meta descripción como resumen bajo el título en los resultados. Una descripción clara, precisa y alineada con la página hace que el resultado se lea mejor y puede ayudar al clic, aunque no sea un factor directo de ranking.
¿Por qué mi enlace compartido sigue mostrando la vista previa antigua?
La mayoría de plataformas guarda en caché los metadatos la primera vez que obtiene un enlace. Después de actualizar las etiquetas, usa el depurador de compartidos o inspector de enlaces de cada plataforma para forzar una actualización y que se lean el nuevo título, descripción e imagen.
¿Para qué sirve la URL canónica?
Cuando el mismo contenido puede verse desde varias direcciones, el enlace canónico indica a los buscadores cuál es la versión preferida de la página. Ayuda a consolidar señales en una sola URL y evita confusión por contenido duplicado.
¿Se envía mi contenido a un servidor?
No. El generador funciona completamente dentro de la pestaña del navegador. Los valores que introduces, las vistas previas, el fragmento generado y cualquier archivo descargado no se envían a un servidor desde esta página.
Herramientas relacionadas
Usa la categoría de generadores cuando necesites meta tags junto con favicons, slugs, IDs, texto de relleno u otros flujos de construcción de sitios.