Cómo usar: Generador de Meta Tags
- Escribe el título de la página, la meta description y la URL canónica. Los contadores te avisan antes de que Google los corte.
- Añade la imagen de Open Graph, el nombre del sitio y el idioma, y elige un tipo de card de X. Las vistas previas de Google, Facebook y X se actualizan mientras escribes.
- Define las directivas de robots, el color del tema y las rutas de los iconos si los necesitas.
- Copia la salida <head> completo para un sitio programado a mano, o cambia a código personalizado de Webflow para obtener solo las etiquetas que Webflow no genera desde sus ajustes.
¿Qué son los meta tags?
Los meta tags son elementos HTML dentro del <head> de una página que describen la página a los navegadores, los buscadores y las redes sociales. No se ven en la página en sí, pero determinan cómo aparece en los resultados de Google, cómo se muestra un enlace al compartirlo en Slack, LinkedIn o WhatsApp, si la página puede indexarse y cómo se adapta a un teléfono.
Las etiquetas que realmente importan
| Etiqueta | La usan | Función |
|---|---|---|
<title> | Google, pestañas del navegador | El titular clicable en los resultados de búsqueda; una señal de relevancia confirmada. |
meta description | Google, Bing | Suele usarse como fragmento bajo el título; afecta al porcentaje de clics, no al posicionamiento. |
link rel="canonical" | Google, Bing | Indica la URL preferida cuando el mismo contenido es accesible en varias direcciones (parámetros, barras finales, http/https). |
meta robots | Todos los rastreadores principales | noindex saca una página de los resultados; max-image-preview:large permite miniaturas de imagen grandes en Discover. |
og:* | Facebook, LinkedIn, Slack, Discord, iMessage… | El protocolo Open Graph: título, descripción, imagen y tipo de un enlace compartido. |
twitter:* | X | Diseño de la card (summary o summary_large_image) y atribución de cuenta; recurre a las etiquetas og: si faltan. |
viewport, charset | Navegadores | Escalado correcto en móvil y codificación de texto. |
La antigua etiqueta meta keywords no se genera a propósito: Google la ignora desde hace más de una década y solo revela tu estrategia de palabras clave a la competencia.
Errores comunes que este generador evita
- URLs relativas en og:image. Los rastreadores de redes sociales necesitan una URL absoluta
https://. Añadeog:image:widthyog:image:heightpara que la imagen se vea en el primer compartir y no después de un nuevo rastreo. - Noindex junto con canonical. Apuntar un canonical a otra URL y a la vez usar
noindexenvía señales contradictorias; elige una. - Comillas sin escapar. Una
"dentro de una descripción rompe el atributo. Todos los valores se escapan como HTML en la salida. - Etiquetas duplicadas. Plataformas como Webflow, los plugins SEO de WordPress o Shopify ya generan muchas etiquetas. Añadir a mano un segundo
<title>oog:imageobliga a los rastreadores a adivinar cuál prevalece.
Webflow: campos de ajustes frente a código personalizado
Webflow escribe por ti el título, la descripción, el título/descripción/imagen de Open Graph, el canonical, el charset y el viewport a partir de los ajustes de Página y del Sitio, así que pegar un head completo en el código personalizado los duplicaría. Elige Código personalizado de Webflow arriba y la salida solo contendrá lo que Webflow no puede definir de forma nativa: directivas de robots, theme-color, og:site_name, og:locale, identificadores de cuenta de X e iconos adicionales. En las páginas de plantillas CMS, el mismo cuadro de código personalizado acepta campos CMS insertados. Tras publicar, verifica la salida real con el Meta Tag Checker y el Open Graph Checker, o diseña una imagen para compartir con el OG Image Generator.
También se busca como: meta tags, generador og tags, generador open graph, generador twitter card, meta tags html, etiquetas seo, meta tags redes sociales, meta tags webflow.
Herramientas que combinan con: Generador de Meta Tags
- Vista previa SERP — Escribe un title y una meta description y comprueba exactamente dónde es probable que Google los corte, medido en píxeles y no solo en caracteres, tanto en escritorio como en móvil.
- Generador de favicons — Crea un paquete completo de favicones a partir de un logotipo, una letra o un emoji: un archivo favicon.ico con varios tamaños, un icono táctil de Apple, iconos para Android y PWA, un webclip de Webflow, el manifiesto web y las etiquetas HTML para pegar.
- Generador de marcado Schema — Elige un tipo de esquema, rellena el formulario y copia el código JSON-LD listo para pegar.
- Guía sobre el archivo robots.txt — Las reglas de robots.txt son breves, pero es fácil malinterpretarlas.
Preguntas frecuentes
¿Los meta tags siguen importando para el SEO?
¿Qué tamaño debe tener una imagen de Open Graph?
¿Necesito las etiquetas de Open Graph y de Twitter?
og:title, og:description y og:image como alternativa, así que solo necesitas twitter:card (y opcionalmente twitter:site) además de Open Graph.