Configura

Rellena los detalles de tu página. Deja los campos Open Graph y Twitter en blanco para heredar de los campos básicos.

SEO básico

URL de la página

Título de la página

0/60

Meta descripción

0/160

Idioma (html lang)

Robots

Autor

Color de tema

Open Graph

Tipo OG

Nombre del sitio

Título OG

Descripción OG

URL de imagen OG

Twitter Card

Tipo de tarjeta

Identificador Twitter/X

URL de imagen Twitter

HTML generado

Copia estas etiquetas en el elemento head de tu página.

head-meta.html

<!-- Basic SEO -->
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#0F172A">

<!-- Open Graph -->
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">

10 líneas

Tu robots.txt está listo — pero es solo una de 99+ señales SEO.

Ejecutar auditoría gratuita →

¿Qué son los meta tags y por qué importan?

Los meta tags son elementos HTML dentro del <head> de una página que describen el documento a las máquinas: motores de búsqueda, plataformas sociales, navegadores y sistemas operativos. El cuerpo de una página es lo que ven los humanos; el head es lo que leen los bots, crawlers e integraciones de plataformas. Los meta tags deciden cómo se indexa tu página, cómo se despliega en enlaces compartidos, qué color toma la interfaz del navegador móvil y si el dispositivo interpreta números de teléfono y direcciones de correo como enlaces pulsables.

La mayoría de meta tags pertenece a uno de cuatro roles. Las etiquetas técnicas como charset y viewport indican al navegador cómo analizar y maquetar el documento; sin ellas, el renderizado falla de maneras predecibles. Las etiquetas SEO como title, description, canonical, robots y hreflang informan a los motores de búsqueda qué es la página y cómo tratarla en su índice. Las etiquetas sociales como la familia og: de Open Graph y la familia twitter: de Twitter Card controlan cómo se renderiza la página cuando su URL se pega en un chat, publicación o enlace compartido. Las etiquetas de branding y UX como theme-color, apple-touch-icon y format-detection controlan cómo la página se integra con el sistema operativo del dispositivo.

La historia es por capas. La especificación original HTML 4 definió <meta> para pares nombre-valor genéricos. Open Graph fue publicado por Facebook en 2010 para dar a las plataformas de compartición un modo estándar de extraer una vista previa limpia. Twitter Card llegó en 2012 con su propio espacio de nombres porque Open Graph por sí solo no cubría las variaciones de producto de Twitter. Apple, Microsoft y la comunidad PWA añadieron sus propias familias de etiquetas para iconos, interfaz móvil y mejora progresiva. El resultado es una sección head que puede superar las cuarenta líneas en una página bien etiquetada, con cada etiqueta sirviendo a un consumidor específico.

El impacto en el mundo real se acumula. Un canonical faltante divide la autoridad de enlace entre URLs duplicadas. Un og:image faltante o incorrecto convierte los enlaces compartidos en bloques sin estilo que la gente ignora al hacer scroll. Un viewport faltante hace que la página se renderice a ancho de escritorio en un teléfono, activando la penalización de compatibilidad móvil de Google y arruinando los Core Web Vitals. Ninguno de estos problemas es catastrófico por sí solo, pero juntos dejan sobre la mesa tráfico y engagement significativos.

Cómo usar este generador

El formulario está agrupado por familia de etiquetas, para que puedas rellenar solo las secciones que necesitas sin desplazarte por campos irrelevantes.

Paso 1 — Rellena el núcleo SEO. Introduce el título de la página, la meta descripción, la URL canonical y el idioma. Estos cuatro campos cubren las etiquetas que afectan al posicionamiento y al CTR, por lo que incluso una configuración meta mínima debería incluirlos.

Paso 2 — Añade vistas previas sociales. Establece el título Open Graph, la descripción y la URL de la imagen. El generador los copia tanto en las etiquetas og: como en las twitter: por defecto, ya que el 90 % de las páginas quieren el mismo contenido en ambas. Sobreescribe los campos de Twitter solo cuando tengas una variante específica para esa plataforma.

Paso 3 — Copia el resultado y pégalo en tu <head>. El generador emite HTML5 válido, ordenado con charset y viewport primero, luego las etiquetas SEO, después las sociales y finalmente las de branding. Pega el bloque antes de cualquier hoja de estilos o script externo para que los recursos que bloquean el renderizado no retrasen la información de los meta tags.

La taxonomía completa de meta tags

Una página moderna se beneficia de muchas más etiquetas que el título y la descripción que muestran la mayoría de tutoriales. A continuación se muestra el orden de prioridad para un head limpio y completo.

Técnicas (deben ir primero)

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

charset debe aparecer en los primeros 1024 bytes del documento. Si aparece después, el navegador puede ya haber empezado a analizar con una codificación predeterminada y tener que reiniciar, lo que cuesta tiempo y puede provocar errores de visualización con caracteres no ASCII. viewport controla cómo los navegadores móviles calculan el layout inicial. Sin él, los dispositivos móviles renderizan la página a ancho de escritorio y hacen zoom para ajustarla, rompiendo los objetivos táctiles y activando la penalización de compatibilidad móvil que Google aplica desde la actualización móvil de 2015.

Núcleo SEO

<title>Palabra Clave Principal — Marca</title>
<meta name="description" content="Un resumen de 150-160 caracteres que incluye la palabra clave y una llamada a la acción.">
<link rel="canonical" href="https://ejemplo.com/ruta-de-pagina">
<meta name="robots" content="index, follow">
<link rel="alternate" hreflang="en" href="https://ejemplo.com/en/pagina">
<link rel="alternate" hreflang="es" href="https://ejemplo.com/es/pagina">

La etiqueta title es la señal SEO en página más ponderada y el titular del snippet en las SERPs. La descripción no afecta directamente al posicionamiento, pero impulsa el CTR. El canonical desambigua las URLs duplicadas creadas por parámetros de seguimiento, criterios de ordenación o paginación. La etiqueta meta robots anula el robots.txt para la página específica cuando quieres permitir el rastreo pero bloquear la indexación. Hreflang le indica a Google qué variante de idioma y región mostrar a los usuarios en diferentes búsquedas, y es imprescindible para que el SEO internacional funcione correctamente.

La cascada de títulos

Tres campos de título distintos controlan tres superficies diferentes. La etiqueta <title> llena el snippet de las SERPs y la pestaña del navegador. <meta property="og:title"> llena las tarjetas de vista previa de Facebook, LinkedIn y Slack. <meta name="twitter:title"> llena la Twitter Card. Por defecto, establece los tres con la misma cadena. Sobreescribe og:title cuando quieras una versión más larga optimizada para compartir (Facebook permite alrededor de 88 caracteres antes de truncar, mucho más que los 60 de Google). Sobreescribe twitter:title cuando quieras copy específico de plataforma para audiencias nativas de Twitter.

Open Graph (compartición)

<meta property="og:type" content="website">
<meta property="og:title" content="Título de la página para redes sociales">
<meta property="og:description" content="Descripción para redes sociales.">
<meta property="og:url" content="https://ejemplo.com/pagina">
<meta property="og:image" content="https://ejemplo.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Ejemplo">
<meta property="og:locale" content="es_ES">

Las dimensiones de la imagen importan. Facebook, LinkedIn y la mayoría de consumidores de Open Graph esperan una imagen de 1200 por 630 con una relación de aspecto 1.91:1. Enviar una imagen más pequeña hace que la plataforma recurra a un layout de miniatura pequeña en lugar de una tarjeta hero. Enviar una imagen con la relación de aspecto incorrecta provoca un recorte que a menudo corta texto o caras. Las pistas de anchura y altura permiten a los crawlers reservar espacio y cargar de forma asíncrona, evitando un cambio de layout en la vista previa.

Twitter Card (compartición)

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Título de la página para Twitter">
<meta name="twitter:description" content="Descripción para Twitter.">
<meta name="twitter:image" content="https://ejemplo.com/twitter.png">
<meta name="twitter:site" content="@tuusuario">

Elige summary_large_image para un layout hero (la mayoría de páginas de marketing y artículos) y summary para una tarjeta compacta (contenido ligero). Twitter prefiere una imagen de 1200 por 675, ligeramente más ancha que los 1200 por 630 de Open Graph. Si reutilizas tu imagen de Open Graph, el resultado sigue funcionando, pero una imagen específica para Twitter llena la tarjeta sin letterboxing.

Branding y UX (a menudo olvidadas)

<meta name="theme-color" content="#0F172A">
<meta name="color-scheme" content="light dark">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

theme-color colorea el chrome del navegador en Android y la barra de estado en PWAs. color-scheme indica al navegador que renderice las barras de scroll y los controles de formulario en modo oscuro o claro correspondiente. format-detection con telephone=no impide que iOS Safari convierta automáticamente cadenas de dígitos con forma de número de teléfono en enlaces tel:, lo cual es crítico para números de factura, IDs de pedido y cualquier número de siete a once dígitos que no sea realmente un teléfono. Los enlaces de iconos cubren los favicons de pestañas de escritorio, los iconos de pantalla de inicio de iOS y los iconos adaptativos de Android.

Errores comunes que perjudican el SEO y la compartición

Canonical incorrecto apuntando a otra página. Una etiqueta canonical que apunta a una URL diferente le dice a Google que la URL actual es un duplicado y consolida las señales en el destino. Las páginas que deberían posicionarse desaparecen de la búsqueda porque su canonical apunta a otro sitio por error. Siempre haz una autorreferencia a menos que la página sea genuinamente un duplicado.

og:image faltante o de tamaño insuficiente. Un og:image faltante deja que la plataforma elija algo arbitrario del cuerpo, a menudo un logo o icono. Una imagen demasiado pequeña (menos de 600 píxeles de ancho) degrada la vista previa a un layout de miniatura pequeña. Ambas situaciones arruinan el engagement en enlaces compartidos y son fáciles de corregir.

Descripciones idénticas en todas las páginas. Las descripciones generadas por plantilla que solo varían en el título de la página señalan contenido de poco esfuerzo. Google las sobreescribe habitualmente con texto del cuerpo, lo que significa que la descripción en la que invertiste tiempo nunca aparece. Cada página necesita una descripción única vinculada a la intención de esa página.

Charset declarado tarde. Una etiqueta charset por debajo de los primeros 1024 bytes provoca un reinicio de codificación en algunos navegadores. El resultado es un breve destello de caracteres mal codificados antes de que la página se vuelva a pintar. Siempre coloca <meta charset="utf-8"> como primer elemento hijo del head.

Meta robots y cabecera X-Robots-Tag desincronizados. Cuando la cabecera HTTP establece noindex y la etiqueta meta establece index, gana la directiva más restrictiva y la página no se indexa. Audita ambas capas en un solo paso cuando una página misteriosamente no aparece en la búsqueda.

Theme-color en blanco en un sitio con marca oscura. El comportamiento predeterminado del navegador pinta la barra de direcciones en blanco en la mayoría de dispositivos Android. Un sitio con cabecera azul marino oscuro y barra de direcciones blanca parece roto en móvil. Establecer theme-color con el color de marca es un cambio de una línea que mejora notablemente la calidad percibida.

Twitter Card sin site ni creator. Omitir twitter:site y twitter:creator elimina la línea de atribución de la tarjeta e impide que Twitter asocie las comparticiones con tu cuenta. Ambos campos toman un handle de Twitter incluyendo el @ y deben establecerse en todas las páginas.

Casos extremos que nadie menciona

Los meta tags interactúan con las cabeceras de respuesta HTTP, y las cabeceras suelen ganar. X-Robots-Tag: noindex en la respuesta anula cualquier <meta name="robots" content="index"> en la página. Las cabeceras Content-Security-Policy pueden bloquear la carga del og:image en el crawler de vista previa, especialmente cuando la imagen se encuentra en un dominio diferente. Referrer-Policy configurado como no-referrer elimina el referrer que los crawlers de Open Graph a veces usan para verificar la solicitud, haciendo que algunas plataformas se nieguen a renderizar la vista previa. Cuando los meta tags parecen correctos en el código fuente pero la página no se comporta como se espera, audita las cabeceras de respuesta a continuación.

Generador de Meta Tags Gratuito