Generador de Meta Tags: crea meta tags SEO

¿Qué es el Generador de Meta Tags?

Uso esta herramienta cada vez que voy a publicar una página nueva y quiero ver cómo se verá realmente en Google, Facebook y Twitter antes de subirla. La herramienta produce el bloque HTML completo de meta tags (SEO básico, Open Graph, Twitter Card) y muestra vistas previas pixel-perfect de cada plataforma una junto a otra. Rellena la pestaña Input, copia desde Output y verifica en Preview.

Características principales

La herramienta genera tres bloques de tags a partir de un único conjunto de inputs. El bloque SEO básico cubre <meta name="title">, <meta name="description">, <meta name="keywords">, <meta name="author">, <meta name="robots"> y <link rel="canonical">. El bloque Open Graph cubre og:title, og:description, og:type, og:url, og:image, og:site_name y og:locale, con opciones de tipo para website, article, product, video y music. El bloque Twitter Card cubre twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description y twitter:image, soportando tarjetas Summary y Summary Large Image.

Los contadores de caracteres te guían hacia las longitudes correctas. Title muestra actual/60 y se vuelve verde en el rango 30–60, amarillo bajo 30, rojo sobre 60. Description usa el mismo esquema con un objetivo de 120–160. Tres vistas previas en vivo se actualizan mientras escribes: una vista SERP de Google con el azul de enlace real (#1a0dab), URL en verde (#006621) y description en gris (#545454); una vista de Facebook que renderiza la tarjeta 1.91:1 con la imagen OG que proporciones; y una vista de Twitter Card que cambia entre Summary y Summary Large Image según tu configuración.

El dropdown Robots ofrece las cuatro combinaciones de directivas estándar: index, follow (por defecto), index, nofollow, noindex, follow y noindex, nofollow. La pestaña Output divide Basic, Open Graph y Twitter en secciones separadas con botones de copia individuales, más un Copy All para el bloque combinado.

Cómo usar el Generador de Meta Tags

Paso 1: rellena la pestaña Input

Abre el Próximamente: Generador de Meta Tags. La herramienta abre en la pestaña Input, que tiene tres secciones.

Sección SEO básico:

• Title: el título de tu página. El contador de caracteres se actualiza en tiempo real. Mantenlo entre 30–60 caracteres (verde) para evitar truncamiento en resultados de búsqueda. Ejemplo: TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole (53 caracteres, verde).
• Description: tu meta description. Apunta a 120–160 caracteres (rango verde) para visualización completa. Ejemplo: TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75. (137 caracteres, verde).
• Keywords: palabras clave separadas por comas. Los motores de búsqueda modernos ignoran este tag en gran medida, pero no daña incluirlo. Ejemplo: hiking boots, trail running, waterproof boots, vibram outsole.
• Author: nombre opcional del autor.
• Robots: elige una de las cuatro combinaciones de directivas robots. Deja index, follow para contenido público. Usa noindex, nofollow para páginas privadas, áreas de admin o contenido duplicado que no quieres indexar.
• Canonical URL: la URL preferida para esta página. Introduce la URL absoluta completa (ej. https://example.com/products/trailmaster-pro).

Paso 2: configura los tags Open Graph

Desplázate a la sección Open Graph:

• OG Type: selecciona "website" para páginas principales y generales, "article" para entradas de blog, "product" para páginas de e-commerce.
• OG Site Name: el nombre de tu sitio (ej. "TrailMaster Outdoor Gear").
• OG Image: la URL completa de la imagen para compartir. Facebook recomienda 1200×630 píxeles. Si proporcionas una URL accesible, la vista previa de Facebook renderiza la imagen real.
• OG URL: la URL canónica para Open Graph, normalmente la misma que tu URL canónica.

Paso 3: configura los tags de Twitter Card

Desplázate a la sección Twitter Cards:

• Twitter Card Type: "Summary" muestra un thumbnail cuadrado pequeño. "Summary Large Image" muestra una imagen 2:1 grande, mejor opción para la mayoría de contenido con activos visuales.
• Twitter Site: el username de Twitter/X del sitio (ej. @trailmaster).
• Twitter Creator: el username de Twitter/X del autor del contenido.

Paso 4: revisa la pestaña Output

Haz clic en la pestaña Output. Tres secciones muestran los tags generados:

Ejemplo de tags básicos:

<meta name="title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta name="description" content="TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75." />
<meta name="keywords" content="hiking boots, trail running, waterproof boots, vibram outsole" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/products/trailmaster-pro" />

Ejemplo de tags Open Graph:

<meta property="og:type" content="product" />
<meta property="og:url" content="https://example.com/products/trailmaster-pro" />
<meta property="og:title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta property="og:description" content="TrailMaster Pro boots combine a Vibram outsole..." />
<meta property="og:image" content="https://example.com/images/trailmaster-og.jpg" />
<meta property="og:site_name" content="TrailMaster Outdoor Gear" />
<meta property="og:locale" content="en_US" />

Haz clic en Copy All para obtener el bloque completo de tags listo para pegar en tu <head>.

Paso 5: verifica en la pestaña Preview

Cambia a la pestaña Preview. Se renderizan tres vistas previas en vivo:

• Vista previa SERP de Google: muestra el title en azul, la URL canónica en verde y la description truncada a dos líneas en gris. Coincide con el formato de resultado de búsqueda de escritorio. Si tu title supera 60 caracteres, se trunca visualmente, una señal clara para acortarlo.
• Vista previa de tarjeta Facebook: muestra la imagen OG (si está disponible y se puede cargar), dominio del sitio en mayúsculas, title en negrita y description.
• Vista previa de Twitter Card: muestra el formato twitter:card (Small o Large Image), el dominio URL, title y description. La imagen de vista previa viene de twitterImage si está configurada, o de ogImage como fallback.

Ejemplos prácticos

Ejemplo 1: entrada de blog

Para una entrada de blog titulada "10 Best Hikes in the Scottish Highlands":

• Title: 10 Best Hikes in the Scottish Highlands - Complete Guide (53 chars, verde)
• Description: The 10 most rewarding hiking routes in the Scottish Highlands, from Ben Nevis to the Isle of Skye. Trail grades, maps, and kit lists included. (143 chars, verde)
• OG Type: article
• Robots: index, follow

La vista SERP confirma que el title cabe sin truncamiento y la description llena las dos líneas disponibles.

Ejemplo 2: página de producto e-commerce

Para una página de producto, el OG type se configura a "product" y se proporciona una URL de imagen. La vista de Facebook renderiza la imagen del producto en proporción 1.91:1 con el nombre del sitio, title del producto y description. La Twitter Large Image Card muestra la misma imagen con recorte 2:1.

Ejemplo 3: página de staging privada

Para una página de entorno staging que no está lista para indexación, configura Robots a noindex, nofollow. El output generado incluye <meta name="robots" content="noindex, nofollow" />, indicando a los crawlers de motores de búsqueda que no indexen ni sigan enlaces en esta página aunque la descubran.

Consejos y buenas prácticas

• Sincroniza OG URL y URL canónica: usa la misma URL absoluta para og:url y el tag canónico <link>. Las discrepancias pueden hacer que el sharing social referencie la URL incorrecta.
• Longitud del title y truncamiento: Google trunca títulos que se renderizan más anchos que aproximadamente 600px en resultados de escritorio. El objetivo de 30–60 caracteres es un proxy fiable; verde significa que estás dentro de límites seguros.
• Dimensiones de imagen OG: la herramienta genera el tag og:image para cualquier URL pero no valida dimensiones. Usa una imagen 1200×630 píxeles para Facebook y 1200×600 para Twitter Large Image Cards.
• twitter:image hace fallback a og:image: en la pestaña Preview, la Twitter Card usa tu twitter:image si está disponible, si no usa og:image. Solo configura un twitter:image separado si quieres imágenes sociales diferentes por plataforma.
• Tag meta keywords: el tag <meta name="keywords"> se genera pero es ignorado por Google y Bing desde 2009. Inclúyelo por completitud pero no inviertas tiempo optimizándolo.

Problemas comunes y solución

El contador de title muestra rojo pero la description está bien: el title pasa de 60 caracteres. Acórtalo o mueve detalle a la description. El contador de title muestra actual/60 (long) en rojo como indicador claro.

El contador de description muestra amarillo: la description está bajo 120 caracteres. Google puede sustituirla por su propio snippet desde el contenido de tu página. Añade 20–40 caracteres más de contenido relevante.

La imagen OG no aparece en la vista de Facebook: la pestaña Preview carga la URL de imagen real en un tag <img>. Si la URL no es accesible públicamente desde tu navegador (ej. una URL de desarrollo local), el área de imagen muestra el placeholder "No image". El tag se genera correctamente en el output.

La vista de Twitter solo muestra una tarjeta pequeña aunque haya imagen grande: el Twitter Card Type está en "Summary" en vez de "Summary Large Image." Cambia el dropdown Twitter Card Type a "Summary Large Image" para ver la vista 2:1.

Los tags generados aparecen vacíos en la pestaña Output: rellena al menos title y description en la pestaña Input. La salida solo incluye campos no vacíos; un campo title vacío no produce tag title.

Privacidad y seguridad

Generador de Meta Tags se ejecuta enteramente en tu navegador. La generación de tags usa el hook useMemo de React para computar el output reactivamente desde tu input, sin viaje al servidor. Si proporcionas una URL de imagen OG, la pestaña Preview carga esa imagen directamente desde la URL fuente sin proxy. Los miembros Supporter pueden guardar y restaurar presets nombrados usando almacenamiento IndexedDB local.

Preguntas frecuentes

¿Cuáles son las longitudes óptimas de caracteres para title y description?

La herramienta usa 30–60 caracteres para title (rango verde) y 120–160 caracteres para description (rango verde). Coinciden con los límites típicos de ancho en píxeles renderizados que Google usa para snippets SERP. Titles bajo 30 caracteres (amarillo) pueden considerarse delgados; sobre 60 (rojo) pueden truncarse. Descriptions bajo 120 (amarillo) pueden hacer que Google use su propio extracto; sobre 160 (rojo) se truncan.

¿La herramienta genera todas las propiedades Open Graph?

La herramienta genera los tags OG principales: og:type, og:url, og:title, og:description, og:image, og:site_name y og:locale. No genera tags específicos de artículo como article:published_time ni de producto como product:price. Para esos, los añades manualmente tras copiar el output generado.

¿Qué valores OG locale están disponibles?

El locale OG por defecto es en_US. El campo locale es entrada de texto donde puedes escribir cualquier código locale válido (ej. fr_FR, de_DE, ja_JP). La herramienta no restringe este campo a un dropdown.

¿Qué tipos de Twitter Card soporta la herramienta?

La herramienta genera summary (thumbnail cuadrado pequeño, title, description y nombre del sitio) y summary_large_image (imagen 2:1 a ancho completo con title, description y nombre del sitio). No soporta los tipos deprecados app y player.

¿Puedo copiar solo los tags Open Graph sin los SEO básicos?

Sí. La pestaña Output muestra tres secciones separadas (Basic, Open Graph, Twitter), cada una con su propio botón de copia. Haz clic en el botón de copia de la sección Open Graph para copiar solo esos tags. Usa "Copy All" para todo combinado.

¿Cómo añado los tags generados a mi sitio?

Pega los tags copiados dentro de la sección <head> de tu HTML. Si usas un CMS como WordPress, Shopify o Webflow, pégalos en el campo de código <head> personalizado en la configuración de tu tema o usa un plugin SEO que acepte meta tags personalizados. Para frameworks como Next.js, pega en el componente <Head> o usa la API metadata.

Herramientas relacionadas

• Próximamente: Analizador SEO de Página: audita los meta tags actuales, estructura de headings y señales SEO on-page de una página existente para identificar huecos que tus nuevos meta tags deberían cubrir.
• Próximamente: Vista Previa SERP: herramienta dedicada de vista previa SERP para ajustar visualización de title y description antes y después de actualizar tus meta tags.
• Próximamente: Generador de Schema: añade markup de datos estructurados junto con tus meta tags para habilitar resultados enriquecidos en Google Search para artículos, productos, eventos y más.

Prueba el Generador de Meta Tags ahora: Próximamente: Glyph Widgets Generador de Meta Tags