Guía completa de metadatos para SEO

Qué son los metadatos y para qué sirven

Los metadatos son información sobre tu página que no se muestra en el contenido, pero que leen los buscadores, las redes sociales y las aplicaciones de mensajería. Responden a preguntas como: ¿cómo se llama esta página?, ¿de qué trata?, ¿cuál es su dirección oficial?, ¿qué imagen debe aparecer cuando alguien la comparta?

Un buen conjunto de metadatos no te garantiza posiciones, pero evita perder oportunidades: mejora cómo se ve tu resultado en el buscador, aumenta la probabilidad de clic y hace que tus enlaces compartidos se vean cuidados. Esta guía repasa los grupos principales y cómo generarlos.

Las etiquetas básicas

Van dentro de <head> y son la base de todo:

<title>Guía de Base64</title>
<meta name="description" content="Aprende qué es Base64 y cómo usarlo.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://fluxom.app/blog/posts/que-es-base64">

• title. Es lo más importante. Procura que describa el contenido en unos 50-60 caracteres para que no se corte y pon primero lo esencial.
• description. Un resumen de 120-160 caracteres que invite a hacer clic. Google puede reescribirlo, pero un buen texto aumenta las opciones de que lo use.
• viewport. Imprescindible para que la página se adapte a móviles.
• robots. Indica si debe indexarse. Los valores más usados son index, follow y noindex.
• canonical. Señala la dirección preferida cuando el mismo contenido es accesible desde varias URL, por ejemplo con parámetros de seguimiento.

Una nota sobre keywords: Google ya no la utiliza para posicionar. Puedes incluirla por compatibilidad con otros sistemas, pero no esperes efecto en el buscador. Conviene completar el head con el idioma y la codificación: <html lang="es"> ayuda a buscadores y lectores de pantalla, y <meta charset="utf-8"> evita que los acentos se vean mal. Y cada página debe tener su propio título y su propia descripción, porque repetirlos entre páginas diluye lo que cada una aporta.

OpenGraph y Twitter Cards

Cuando alguien comparte un enlace en una red social o en una app de mensajería, esas plataformas leen unas etiquetas especiales para construir la tarjeta con título, descripción e imagen. El estándar más extendido es OpenGraph, y X (Twitter) añade las suyas, las Twitter Cards, aunque si faltan usa las de OpenGraph como alternativa.

<meta property="og:title" content="Guía de Base64">
<meta property="og:description" content="Aprende qué es Base64.">
<meta property="og:url" content="https://fluxom.app/blog/posts/que-es-base64">
<meta property="og:image" content="https://fluxom.app/og-image.png">
<meta property="og:site_name" content="Fluxom">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">

Sobre la imagen, la medida recomendada es 1200 × 630 píxeles, con una URL absoluta y un peso moderado. El valor summary_large_image muestra una tarjeta grande, y summary una pequeña con miniatura.

Cómo generarlos con Fluxom

Para las etiquetas básicas, usa el Meta Tag Generator. Escribe una línea por dato en formato clave: valor. La clave title es obligatoria; description, keywords, author, robots y url son opcionales. Por ejemplo:

title: Guía de Base64
description: Aprende qué es Base64 y cómo usarlo.
author: Equipo Fluxom
url: https://fluxom.app/blog/posts/que-es-base64

Y la herramienta devuelve el bloque listo para pegar, con viewport y robots incluidos por defecto:

<title>Guía de Base64</title>
<meta name="description" content="Aprende qué es Base64 y cómo usarlo.">
<meta name="author" content="Equipo Fluxom">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://fluxom.app/blog/posts/que-es-base64">

El OpenGraph Generator funciona igual, con las claves title, description, url, image, site_name y type. Genera además las etiquetas de Twitter: elige summary_large_image si indicas una imagen y summary si no. Los caracteres especiales, como las comillas, se escapan para que el HTML siga siendo válido.

Datos estructurados con JSON-LD

Los datos estructurados explican a los buscadores qué es tu contenido: un artículo, un producto, una organización o una receta. El formato recomendado es JSON-LD, un bloque de JSON dentro de una etiqueta script que no altera lo que ve el visitante.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Guía de Base64",
  "datePublished": "2026-10-04",
  "author": { "@type": "Organization", "name": "Fluxom" }
}
</script>

Fluxom no incluye un generador de JSON-LD, pero sí tienes dos aliados. Escríbelo a partir de los tipos de schema.org y compruébalo con el JSON Validator para asegurarte de que la sintaxis es correcta. Después, verifica el resultado con las herramientas oficiales de Google y de schema.org para datos estructurados. Es el mismo enfoque que siguen las páginas de este sitio.

Robots.txt y sitemap

Estos dos archivos viven en la raíz del dominio y ayudan a los rastreadores. El generador de robots.txt acepta líneas como estas:

agent: *
disallow: /admin
allow: /blog
sitemap: https://fluxom.app/sitemap.xml

y las convierte en el formato oficial:

User-agent: *
Disallow: /admin
Allow: /blog
Sitemap: https://fluxom.app/sitemap.xml

Una advertencia importante: robots.txt no es un mecanismo de seguridad, y bloquear una ruta no la elimina del índice si otras páginas enlazan a ella. Para que una página no aparezca, utiliza noindex.

El generador de sitemap recibe una URL por línea y devuelve un XML con fecha de última modificación. Un sitemap puede contener hasta 50 000 URL y 50 MB sin comprimir; si lo superas, divídelo en varios.

Cómo hacerlo en Next.js

Si construyes con Next.js (App Router), puedes definir todo esto desde el código con export const metadata, como hacen los artículos de este blog:

export const metadata = {
  title: "Guía de Base64",
  description: "Aprende qué es Base64 y cómo usarlo.",
  alternates: { canonical: "/blog/posts/que-es-base64" },
  openGraph: { title: "Guía de Base64", type: "article" },
  twitter: { card: "summary_large_image" },
};

El framework traduce ese objeto en las etiquetas correspondientes. Los generadores de Fluxom siguen siendo útiles para sitios estáticos, para otros frameworks o para contrastar lo que genera el tuyo.

Errores frecuentes y lista de verificación

Estos son los fallos más comunes que vemos al revisar sitios:

• Todas las páginas con el mismo título y la misma descripción.
• Descripciones demasiado largas que se cortan o tan cortas que no informan.
• Imágenes de OpenGraph con URL relativa o con un tamaño inadecuado.
• Una etiqueta canonical que apunta a otra página por error.
• Una etiqueta noindex olvidada en producción tras una fase de pruebas.
• JSON-LD con errores de sintaxis, como una coma final.

Antes de publicar, comprueba que cada página tiene un título único, una descripción propia, una URL canónica, una imagen para compartir y, si procede, datos estructurados. Dedicar diez minutos a esto por página suele rendir más que muchas optimizaciones avanzadas.