Softonic

Generador de Meta Tags

Paso 1 / 3
SEO básico
0/60
0/160
Robots
Siguiente

Completa un formulario, título de la página, descripción, URL canónica, imagen social, autor, nombre del sitio, cuenta de Twitter, y el generador emite un bloque de meta tags listo para pegar que cubre lo básico de SEO, Open Graph (para Facebook, LinkedIn, Discord, Slack), Twitter Card, favicon/icono de Apple touch y JSON-LD opcional de Schema.org para Artículo o Producto. Útil cuando estás configurando un sitio estático a mano o añadiendo metadatos a un CMS que solo expone un editor de <head> en bruto.

Cómo construir el fragmento de encabezado

  1. 1

    Ingresa los metadatos de la página

    Título, descripción, URL canónica, autor, nombre del sitio.

  2. 2

    Añade la URL de la imagen social

    Usada para `og:image` y `twitter:image`. 1200×630 es ideal.

  3. 3

    Elige opciones

    Tipo de tarjeta de Twitter, directivas de robots, color del tema, tipo de Schema.org.

  4. 4

    Copia la salida

    Un bloque de etiquetas HTML `<meta>` listo para pegar entre `<head>...</head>`.

Lo que produce el generador

<!-- Meta Primaria -->
<title>Título de la página, Nombre del sitio</title>
<meta name="description" content="Un resumen de 150 caracteres del contenido de la página.">
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Título de la página">
<meta property="og:description" content="Misma descripción o una optimizada para social">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Nombre del sitio">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@siteaccount">
<meta name="twitter:creator" content="@authoraccount">
<meta name="twitter:title" content="Título de la página">
<meta name="twitter:description" content="Descripción">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

<!-- Iconos -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#0b5ed7">

Guía campo por campo

  • Título: 50–60 caracteres. Incluye la palabra clave principal. Coloca la marca al final: Título de la página, Marca.
  • Descripción: 140–160 caracteres. Se lee bien de forma aislada. Evita contenido repetitivo en las páginas.
  • Canónica: URL absoluta, incluyendo https://. Coincide con og:url.
  • Imagen OG: mínimo 1200×630 px (la relación preferida por Facebook 1.91:1). JPG o PNG. Menos de 8 MB.
  • Tarjeta de Twitter: summary_large_image si tienes una buena imagen; summary para miniatura pequeña.
  • Robots: index, follow para páginas públicas; noindex, nofollow para contenido de prueba o delgado.

Extras opcionales

  • JSON-LD para Artículo o Producto permite a Google mostrar resultados enriquecidos (autor, fecha de publicación, precio, estrellas de reseña).
  • theme-color colorea el marco del navegador en Android Chrome y iOS Safari.
  • og:locale para sitios multilingües (por ejemplo, en_US, es_ES).
  • Extras de og:type=article: article:published_time, article:author, article:section, article:tag.

Errores comunes que este generador previene

  • Olvidar la etiqueta viewport. Tu página se muestra en ancho de escritorio en móvil, nivel de zoom 0.3.
  • Títulos diferentes en <title>, og:title y twitter:title. Tarjetas de compartir inconsistentes.
  • URLs de imagen relativas en og:image. Facebook no puede resolverlas; la tarjeta no se renderiza.
  • Falta og:type. Los valores predeterminados funcionan, pero Facebook prefiere un valor explícito.

Preguntas frecuentes

Técnicamente Twitter recurre a Open Graph si sus propias etiquetas están ausentes, así que si solo configuras OG, Twitter aún renderizará una tarjeta. Añadir etiquetas específicas de Twitter te permite personalizar la experiencia (por ejemplo, diferente relación de aspecto de imagen).

1200×630 px (1.91:1). Facebook y LinkedIn lo muestran a tamaño completo; Twitter lo recorta para la tarjeta de resumen. No pongas contenido crítico en los bordes, el 60% central es la zona segura.

No. Las páginas se clasifican bien sin él. JSON-LD habilita características de resultados enriquecidos (tarjetas de recetas, acordeones de FAQ, listados de productos) cuando el tipo de contenido coincide con un esquema de Schema.org. Agrégalo donde encaje.

Entre <head> y </head> en tu HTML, antes de cualquier hoja de estilo o script externo que pueda retrasar el parser al alcanzarlas.

No. Todo se genera localmente en tu navegador.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Generador de EditorConfig

Genera un archivo .editorconfig con tu estilo y tamaño de indentación, fin de línea, charset y reglas de espacios para un formato consistente en IDEs y editores.

Herramienta disponible en otros idiomas