Generador de meta etiquetas
Genera meta etiquetas de SEO, Open Graph y Twitter Card desde un formulario sencillo en tu navegador. Los detalles de tu página permanecen en tu dispositivo.
El Generador de meta etiquetas funciona por completo en tu navegador. El título, la descripción, las URLs y los demás detalles de la página que introduces nunca salen de tu dispositivo y no se sube nada a ArrayKit.
Abre el Generador de Open Graph
Acerca de Generador de meta etiquetas
El Generador de meta etiquetas convierte un breve formulario en un bloque listo para copiar de etiquetas del head HTML para motores de búsqueda y compartición social. Rellena un título, descripción, URL canónica, autor, palabras clave, directiva robots y theme-color, luego añade campos de Open Graph y Twitter Card para vistas previas enriquecidas de enlaces. Emite un conjunto limpio de etiquetas <meta> y <link>, aplica escape HTML a cada atributo para que las comillas y los ampersands sigan siendo válidos, y omite los campos que dejas en blanco. El título, la descripción y la URL de Open Graph recurren a sus equivalentes estándar, así que un título rellenado sigue alimentando tu tarjeta social. Una vista previa en vivo muestra aproximadamente cómo se ve la tarjeta antes de que pegues las etiquetas en el <head>. Está pensado para desarrolladores, gente de SEO y equipos de contenido. Todo funciona en tu dispositivo: no se sube nada sobre tu página.
Características
- Construye etiquetas de SEO: título, descripción, palabras clave, autor, robots y link canónico
- Genera etiquetas Open Graph para título, descripción, imagen, URL y tipo
- Genera etiquetas Twitter Card incluyendo el tipo de tarjeta, el sitio y el creador
- Aplica escape HTML a comillas y ampersands para que cada valor de atributo siga siendo válido
- Omite los campos en blanco para que la salida solo contenga las etiquetas que realmente fijas
- El título, la descripción y la URL de Open Graph recurren a los campos estándar
- Vista previa en vivo de la tarjeta social que aproxima cómo se renderizará el enlace
- Copia todo el bloque o descárgalo como fragmento HTML
Cómo usar Generador de meta etiquetas
- Introduce tu título, descripción y URL canónica
- Añade autor, palabras clave, robots y theme-color si los quieres
- Rellena los campos de Open Graph y Twitter Card para las vistas previas sociales
- Copia el bloque generado y pégalo en el <head> de tu página
Ejemplo
Entrada
title: My Page
description: A short summary
og:image: https://example.com/og.png
Salida
<title>My Page</title>
<meta name="description" content="A short summary" />
<meta property="og:image" content="https://example.com/og.png" />
Los campos del formulario se vuelven etiquetas <title>, <meta> y <link> para el head.
Errores comunes y solución de problemas
- La imagen de vista previa social no aparece cuando se comparte el enlace. — Usa una URL de og:image absoluta (que empiece por https://) y una imagen lo bastante grande; muchas plataformas cachean las vistas previas, así que vuelve a rastrear con el depurador de la plataforma tras los cambios.
- La descripción o el título se ven rotos porque contienen una comilla o un ampersand. — Nada que corregir: el generador aplica escape HTML a las comillas convirtiéndolas en " y a los ampersands en & automáticamente, así que pega la salida tal cual.
- Los motores de búsqueda indexan una página que querías oculta. — Fija robots en noindex, follow (o noindex, nofollow). Recuerda que las meta etiquetas robots son una petición, no un control de acceso, y solo se aplican a páginas que los rastreadores pueden alcanzar.
- Avisos de contenido duplicado en URLs similares. — Fija la URL canónica en la única dirección preferida de la página para que los motores consoliden las señales de posicionamiento en una sola URL.
Preguntas frecuentes
- ¿Qué produce el Generador de meta etiquetas?
- Produce un bloque listo para copiar de etiquetas del head HTML: un <title>, meta etiquetas <meta> de SEO estándar, un <link> canónico, más etiquetas <meta> de Open Graph y Twitter Card, construidas a partir de los valores que escribes en el formulario.
- ¿En qué se diferencian las etiquetas de Open Graph y Twitter Card de las meta etiquetas normales?
- Las etiquetas estándar como description y robots apuntan a los motores de búsqueda. Las etiquetas Open Graph (og:) controlan cómo se ve un enlace al compartirlo en Facebook, LinkedIn y similares, mientras que las de Twitter Card controlan la vista previa en X/Twitter. Esta herramienta emite las tres desde un solo formulario.
- ¿Necesito rellenar todos los campos para obtener meta etiquetas válidas?
- No. Deja cualquier campo en blanco y su etiqueta simplemente se omite de la salida. El título, la descripción y la URL de Open Graph también recurren a tu título, descripción y URL canónica estándar cuando se dejan vacíos.
- ¿El generador escapa los caracteres especiales en mi título y descripción?
- Sí. Las comillas, ampersands y corchetes angulares reciben escape HTML en cada valor de atributo (por ejemplo " pasa a " y & pasa a &), así que las etiquetas siguen siendo válidas incluso con puntuación en tu texto.
- ¿Dónde pongo las meta etiquetas generadas?
- Pega todo el bloque dentro del elemento <head> de tu página HTML, antes del cierre </head>. Puedes copiarlo o descargarlo como fragmento HTML para soltarlo en tu plantilla.
- ¿Se envía a un servidor la información de mi página?
- No. El Generador de meta etiquetas funciona por completo en tu navegador. El título, la descripción, las URLs y los demás campos que introduces nunca salen de tu dispositivo y no se suben a ArrayKit.
Herramientas relacionadas
Todas las herramientas de ArrayKit