Saltar al contenido
DEV-TOOL

Generador de Meta Tags — HTML, JSX, Astro, Svelte

Title, Description, Open Graph, Twitter Card, Schema.org JSON-LD y hreflang — cuatro salidas para frameworks (HTML, JSX, Astro, Svelte) con vista previa en directo en cuatro canales.

Runs locally in your browser Every tag is generated in your browser. No URL is sent to a third-party server, no input is stored, no trackers.
AEO preset: FAQPage for AI search Loads three FAQPage entries that ChatGPT, Perplexity, and Google AI Overviews are more likely to cite.

Inputs

Basics
Open Graph
Twitter Card
Advanced

Live preview

Browser tab
Your page title
Google SERP
example.com Your page title Your meta description appears here — describes the page in 140–220 characters.
Facebook card
1200 × 630
example.com Your page title Your meta description appears here — describes the page in 140–220 characters.
Twitter card
1200 × 630
Your page title Your meta description appears here — describes the page in 140–220 characters. example.com

Output

<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">

Cómo funciona

  1. 01

    Text oder Code einfügen

    Füge deinen Inhalt in das Eingabefeld ein oder tippe direkt.

  2. 02

    Automatische Verarbeitung

    Das Tool verarbeitet den Inhalt sofort und zeigt das Ergebnis.

  3. 03

    Ergebnis kopieren

    Kopiere das Ergebnis mit einem Klick in die Zwischenablage.

Privacidad

Alle Berechnungen laufen direkt in deinem Browser. Keine Daten werden auf Server übertragen.

Produce etiquetas SEO íntegramente en el navegador. Title y Description con validador de longitud (30 a 60 / 140 a 220 caracteres), Open Graph con indicación de relación 1,91:1, Twitter Card con elección de tipo de tarjeta. Vista previa en directo en cuatro canales: pestaña del navegador, página de resultados de Google, tarjeta de Facebook y tarjeta de Twitter.

01 — Cómo usarlo

¿Cómo usar esta herramienta?

  1. Introduzca Title, Description y URL canónica — el validador muestra en directo la longitud y el estado de la URL.
  2. Complete Open Graph y Twitter Card en el mismo bloque: URL de imagen absoluta, 1200 × 630 px recomendados.
  3. Compruebe simultáneamente en la vista previa la pestaña del navegador, la SERP de Google, la tarjeta de Facebook y la tarjeta de Twitter.
  4. Elija la pestaña de salida — HTML, JSX, fragmento Astro o `<svelte:head>` de Svelte — y copie con un clic.
  5. Para sitios multilingües, abra la pestaña hreflang e introduzca los idiomas más `x-default`.

¿Qué hace el generador de Meta Tags?

El generador produce cuatro formatos de salida en paralelo: HTML completo, JSX conforme a React (con etiquetas autocerradas), fragmento Astro (para insertar en <head> o en <Fragment slot="head">) y bloque <svelte:head> de Svelte. Trabaje en un único formulario y copie exactamente la sintaxis que encaja con su stack. La vista previa en directo muestra simultáneamente cómo se verá su página en la pestaña del navegador, en la SERP de Google, en una tarjeta de Facebook y en una Twitter Card — antes de desplegar.

Tres propiedades distinguen la herramienta de la competencia analizada:

  • 100 % en el cliente + Schema.org JSON-LD en la misma herramienta: siete competidores analizados generan etiquetas pero solo uno incluye marcado de esquema — y usa el formato itemprop obsoleto directamente en el HTML. Entregamos JSON-LD moderno en una pestaña dedicada para Article, WebSite, Product, FAQPage, HowTo y Organization. JSON-LD es desde hace años el estándar de marcado de esquema en Google, Bing y la propia Schema.org.
  • Selector de copia multi-framework: el desarrollo web vive hoy entre stacks. Los proyectos React esperan JSX con autocierre />, los sitios Astro necesitan imports de fragmentos, los componentes Svelte esperan el envoltorio <svelte:head>. Producimos las cuatro salidas a partir de la misma entrada — ningún competidor lo hace.
  • Constructor hreflang + preajuste AEO FAQPage integrados: en la competencia, hreflang vive en herramientas especializadas aparte. Lo integramos como pestaña en la misma interfaz, con x-default obligatorio y validación de URL por línea. El preajuste AEO carga tres entradas FAQPage para la optimización de buscadores de IA — importante porque Google desautorizó los Rich Snippets de FAQ en la SERP clásica en mayo de 2026, pero el esquema FAQPage sigue siendo valioso para los buscadores de IA.

La operación sigue el principio del minimalismo refinado: insignia de privacidad arriba, formulario de entrada agrupado en Base / Open Graph / Twitter Card / Avanzado, vista previa en cuadrícula 2 × 2, pestañas de salida con botón de copia, indicadores discretos del validador por campo. Sin tracking, sin cuenta, sin ida y vuelta al servidor.

¿Qué etiquetas emite el generador?

La herramienta cubre 14 tipos de etiquetas, ordenadas por importancia SEO:

BloqueEtiqueta¿Obligatoria?Indicación
Base<title>obligatoria30 a 60 caracteres, palabra clave delante
Base<meta name="description">obligatoria140 a 220 caracteres, con USP
Base<meta name="author">opcionalnombre de persona
Base<meta name="robots">opcionalvacío = index, follow
Base<link rel="canonical">recomendadaURL https absoluta
Open Graphog:title, og:description, og:type, og:url, og:site_name, og:localeobligatoriaidéntica al title base
Open Graphog:image, og:image:altrecomendada1200 × 630 px, URL https absoluta
Twitter Cardtwitter:cardobligatoriasummary o summary_large_image
Twitter Cardtwitter:site, twitter:title, twitter:description, twitter:image, twitter:image:altrecomendadaidentificador @ opcional
Móviltheme-coloropcionalvalor hex para Chrome Android

Los indicadores del validador comprueban cada campo: longitud del title (aviso si < 30 o > 60), longitud de la description (aviso si < 140 o > 220), URL canónica (aviso si http en lugar de https, info si barra final), OG-Image (aviso si http), OG-Image-Alt (aviso si vacío con imagen colocada), theme-color (aviso si no es hex), Twitter-Site (info si lleva @ inicial).

¿Cómo funciona la generación de Schema.org JSON-LD?

En la pestaña «Schema.org JSON-LD» elija uno de los seis tipos de esquema que cubren el 95 % de los sitios. Cada tipo tiene su subformulario con campos específicos — y rellena automáticamente los campos genéricos (nombre, URL, imagen) a partir de sus entradas base:

Article sirve para entradas de blog, artículos de revista y noticias. Campos obligatorios: headline, author y datePublished. Opcional: dateModified para artículos actualizados. El autor se estructura automáticamente como objeto Person.

WebSite sirve para la página de inicio de un dominio. Entrega name, description y url. Suele usarse como esquema único en la raíz, a veces combinado con Organization y BreadcrumbList.

Product sirve para el comercio electrónico. Campos obligatorios: name, description, image. Si se establecen price y priceCurrency, se añade además un subesquema Offer con precio y moneda — Google lo aprovecha para Rich Snippets de precio. brand como objeto de marca opcional.

FAQPage entrega una lista de pares Question/Answer. Cada pregunta se convierte en un nodo Question con un subnodo acceptedAnswer. Las filas con pregunta o respuesta vacía se ignoran. El preajuste AEO carga tres entradas listas al arrancar.

HowTo entrega un instructivo numerado con position, name opcional y text obligatorio por paso. Sirve para páginas de recetas, tutoriales e instrucciones.

Organization entrega información de marca con name, url y logo opcional. Típicamente se integra como esquema único en el pie de todo el sitio o directamente en el <head> de la página Acerca de.

La herramienta produce JSON con formato y sangrado de 2 espacios y envuelve el resultado en un bloque <script type="application/ld+json"> — listo para insertar en el <head> de su página.

¿Cómo funciona la generación hreflang?

En la pestaña hreflang añada una línea por idioma con código BCP 47 y URL absoluta. Las tres líneas precargadas — de, en, x-default — son un buen punto de partida para un sitio bilingüe DE/EN. Se añaden más líneas mediante el botón + Línea (por ejemplo en-US, en-GB, de-AT, de-CH, fr, es).

hreflang=\"x-default\" es obligatoria como URL de repliegue para todos los idiomas no mapeados explícitamente. Sin x-default se arriesgan avisos en los informes de internacionalización de Google. Buena práctica: colocar x-default en la variante inglesa, ya que el inglés es el idioma de navegador más frecuente del mundo.

Cada URL se valida con el analizador nativo de URL. Las líneas inválidas se omiten silenciosamente en la salida — eso evita bloques de salida rotos mientras se escribe. La salida es una lista de etiquetas <link rel="alternate" hreflang="X" href="Y"> para insertar en el <head> de cada variante de idioma. La reciprocidad es obligatoria: cada variante debe enlazar todas las demás, de lo contrario Google ignora el clúster hreflang.

Lo que la herramienta no hace: detección automática de URL (por ejemplo mediante rastreo del sitio), ni importación CSV masiva. Ambos son material de fase 2 si aparece demanda real de usuarios.

Por qué la optimización AEO importa para la búsqueda con IA

La Answer Engine Optimization (AEO) es el concepto hermano más joven del SEO. Donde el SEO optimiza clics en resultados de Google, el AEO optimiza la probabilidad de ser citado en respuestas de IA de ChatGPT, Perplexity, Claude y Google AI Overviews. Los estudios sobre optimización para búsqueda generativa muestran que los datos FAQPage estructurados aumentan la tasa de cita entre el 41 y el 67 % — porque los modelos de IA toman de buen grado de fuentes con estructura clara de pregunta y respuesta.

Tres palancas son especialmente eficaces:

  • Esquema FAQPage con respuestas directas aptas para búsqueda por voz. Las diez primeras palabras de la respuesta deben responder directamente a la pregunta; después viene la explicación detallada. Los altavoces inteligentes y asistentes de IA leen a menudo solo las primeras frases.
  • Fuentes autoritativas enlazadas en el cuerpo (Wikipedia, normas como RFC o W3C, dominios gubernamentales). El estudio Princeton sobre GEO indica un +40 % de visibilidad gracias a citas de fuentes.
  • Estructura de esquema clara en lugar de lenguaje de marketing. Definición primero, caso de uso después, comparación al final — los modelos de IA prefieren contenido extraíble.

Google desautorizó en mayo de 2026 los Rich Snippets de FAQ en la SERP clásica. Esto no significa que el esquema FAQPage esté muerto — significa solo que desaparece el bonus en la SERP clásica. Para la búsqueda con IA, FAQPage sigue siendo uno de los tipos de esquema más importantes.

¿Qué lagunas asume la herramienta deliberadamente?

Tres cosas que el generador no hace:

  • Sin escaneo de URL ni auditoría de etiquetas existentes: competidores como metatags.io u opengraph.xyz recuperan la URL de destino en el servidor para extraer las etiquetas existentes. Eso vulnera nuestra doctrina 100 % en el cliente y envía URLs previas al lanzamiento a terceros. Si necesita las etiquetas existentes, use las herramientas de desarrollador del navegador (view-source:) o un rastreador local.
  • Sin generador de imagen OG: el generador produce etiquetas, no imágenes. Para una imagen OG necesita su propia tubería canvas o una herramienta de diseño. Una solución kittokit aparte llegará con la demanda — hasta entonces, introduzca aquí la URL de la imagen lista.
  • Sin tipos de esquema avanzados como LocalBusiness, Recipe, Event, JobPosting: estos seis tipos principales cubren el 95 % de los casos de uso. Los esquemas especializados entrarán en una herramienta propia en cuanto la demanda se note. Hasta entonces, la documentación canónica de Schema.org enumera los campos que se pueden completar a mano.
  • Sin modo masivo CSV: una herramienta, una página, un bloque de etiquetas. La generación masiva de bloques desde un CSV es fase 2 si los equipos de marketing comunican al menos diez peticiones por trimestre.

Lo que la herramienta sí entrega: cadenas HTML completas y correctamente escapadas, listas para integrar en su proceso de build. Las cuatro salidas de framework usan reglas de escape idénticas (<, >, &, ", '), por lo que no necesita una doble sanitización.

Última actualización:

También le puede interesar