El <head> de una página HTML es invisible para los usuarios pero lo lee todo lo demás: motores de búsqueda, scrapers de redes sociales, navegadores y bots. Hacerlo mal te cuesta posicionamiento y previsualizaciones sociales feas. Hacerlo bien son quizás 30 líneas de marcado que escribes una vez y casi nunca vuelves a tocar. Esto es lo que esas 30 líneas deberían contener.

Los imprescindibles absolutos

Dos etiquetas que deben estar en cada página, sin excepciones:

html
<!-- Character encoding: always first, always UTF-8 -->
<meta charset="UTF-8">

<!-- Viewport: required for responsive design to work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

La declaración charset debe aparecer dentro de los primeros 1024 bytes del documento para que el navegador pueda determinar la codificación antes de analizar el resto. UTF-8 maneja todos los idiomas y emojis del mundo — no hay razón para usar otra cosa. La meta etiqueta viewport le dice a los navegadores móviles que no hagan zoom para mostrar un diseño de escritorio. Sin ella, la indexación mobile-first de Google penalizará tu página.

Título y meta descripción

Estos dos afectan directamente las tasas de clic desde los resultados de búsqueda:

html
<!-- Title: shown in browser tab and search result headlines -->
<title>HTML Forms Guide — Input Types, Validation & Accessibility | DevTools</title>

<!-- Meta description: shown as snippet text in search results -->
<meta
  name="description"
  content="A complete guide to HTML form input types, constraint validation, label association, and building accessible forms. Real examples with no library dependencies."
>
  • Longitud del título. Mantenlo por debajo de 60 caracteres para que no se trunque en los SERPs. Coloca las palabras clave más importantes al principio — los motores de búsqueda dan más peso al inicio.
  • Formato del título. Un patrón común: Tema Principal — Info Secundaria | Marca. La marca al final mantiene el contenido útil al frente.
  • Longitud de la meta descripción. Google trunca alrededor de 155–160 caracteres. Escríbela para que la lea un humano, no rellena con palabras clave — no afecta directamente al ranking, pero sí influye en si la gente hace clic.
  • Unicidad. Cada página necesita un título y una descripción únicos. Los títulos duplicados en tu sitio confunden a los motores de búsqueda sobre qué página clasificar para una consulta determinada.

Open Graph — Previsualizaciones para compartir en redes sociales

Cuando alguien comparte tu URL en LinkedIn, Slack, Facebook o Discord, esas plataformas rastrean tus etiquetas Open Graph para construir la tarjeta de vista previa. Sin ellas, la previsualización está vacía o es fea. Con ellas, tiene un aspecto profesional:

html
<!-- Open Graph: controls how pages appear when shared on social media -->
<meta property="og:type"        content="article">
<meta property="og:title"       content="HTML Forms Guide — Input Types, Validation & Accessibility">
<meta property="og:description" content="Build forms that work for everyone using HTML's built-in input types, constraint validation, and accessibility features.">
<meta property="og:url"         content="https://devtools.example.com/blog/html/html-forms-guide">
<meta property="og:image"       content="https://devtools.example.com/og/html-forms-guide.png">
<meta property="og:image:width"  content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name"   content="DevTools Blog">
  • og:type. Usa article para publicaciones de blog. Usa website para páginas de inicio y de categorías. El tipo afecta cómo algunas plataformas muestran la tarjeta.
  • og:image. La etiqueta OG más importante para el impacto visual. Apunta a 1200×630px (el tamaño de imagen Open Graph canónico). PNG o JPEG funcionan ambos. Facebook y LinkedIn requieren al menos 200×200px.
  • og:url. Establécelo en la URL canónica de la página — no la URL a la que llegó el usuario, que puede incluir parámetros UTM.
  • og:title vs <title>. Pueden diferir. Tu <title> HTML está optimizado para la búsqueda; tu og:title puede ser un poco más humano e impactante ya que es para el contexto social.
Prueba tus etiquetas OG usando el Sharing Debugger de Facebook o el Post Inspector de LinkedIn antes de publicar. Almacenan en caché los datos OG de forma agresiva, y el depurador te permite forzar una actualización.

Etiquetas Twitter Card

Twitter/X tiene su propio conjunto de etiquetas que funcionan de forma similar a Open Graph. Si hay etiquetas OG presentes, Twitter recurre a ellas para algunos campos — pero igualmente deberías establecer las específicas de Twitter para obtener los mejores resultados:

html
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:site"        content="@devtoolsblog">
<meta name="twitter:creator"     content="@alicechen_dev">
<meta name="twitter:title"       content="HTML Forms Guide — Real Examples, No Libraries">
<meta name="twitter:description" content="Everything you need for HTML forms: input types, validation, accessibility. Working code throughout.">
<meta name="twitter:image"       content="https://devtools.example.com/og/html-forms-guide.png">
<meta name="twitter:image:alt"   content="Screenshot showing a styled HTML form with accessible error messages">

summary_large_image te da la tarjeta grande estilo banner. summary te da una pequeña miniatura cuadrada. La etiqueta twitter:image:alt se olvida con frecuencia pero importa — es el texto alternativo para la imagen de la tarjeta, importante para los usuarios de Twitter que dependen de lectores de pantalla.

URL canónica

Si el mismo contenido es accesible en múltiples URLs (con o sin barra diagonal final, con parámetros UTM, HTTP vs HTTPS, www vs sin www), necesitas una etiqueta canónica para indicar a los motores de búsqueda cuál versión es la "real":

html
<!-- Canonical: tells search engines which URL is the authoritative version -->
<link rel="canonical" href="https://devtools.example.com/blog/html/html-forms-guide">

La URL canónica siempre debe ser la URL absoluta completa, incluido el protocolo. Sin una etiqueta canónica, Google tiene que adivinar — y podría elegir una versión diferente de tu página a la que pretendías, repartiendo tus señales de ranking entre múltiples URLs.

Meta etiqueta robots

La meta etiqueta robots le dice a los rastreadores de motores de búsqueda qué pueden hacer con una página. La mayoría de las páginas no la necesitan — el comportamiento por defecto es indexar y seguir enlaces. Pero la necesitarás en casos específicos:

html
<!-- Default (you don't need to write this, but it's the implicit behaviour) -->
<meta name="robots" content="index, follow">

<!-- Don't index this page (e.g. admin pages, thank-you pages) -->
<meta name="robots" content="noindex, follow">

<!-- Don't follow links on this page (rare) -->
<meta name="robots" content="index, nofollow">

<!-- Don't index, don't follow, don't cache, don't show snippet -->
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet">

Buenos candidatos para noindex: páginas de resultados de búsqueda, páginas de categorías filtradas con contenido escaso, páginas de cuentas de usuario, páginas de confirmación de pedidos, entornos de staging. Si estás bloqueando con robots.txt, ten en cuenta que noindex en la meta etiqueta es más fiable — Google lo respeta incluso al acceder a la página directamente.

hreflang para sitios multilingües

Si tu sitio tiene contenido en varios idiomas, hreflang indica a los motores de búsqueda qué versión de una página mostrar a los usuarios en diferentes idiomas. Sin él, Google elige una versión y tus páginas en idiomas no ingleses podrían no clasificar nunca en sus mercados objetivo:

html
<!-- hreflang: tells Google which language version to show per region -->
<link rel="alternate" hreflang="en"    href="https://example.com/blog/html-forms">
<link rel="alternate" hreflang="es"    href="https://example.com/es/blog/html-forms">
<link rel="alternate" hreflang="fr"    href="https://example.com/fr/blog/html-forms">
<link rel="alternate" hreflang="de"    href="https://example.com/de/blog/html-forms">
<link rel="alternate" hreflang="x-default" href="https://example.com/blog/html-forms">

x-default es el fallback para usuarios cuyo idioma no coincide con ninguna región específica. Cada página en el conjunto hreflang debe incluir la lista completa, incluyendo una entrada con referencia propia. Es verboso, pero que falte cualquier entrada hace que Google ignore toda la anotación.

Datos estructurados con JSON-LD

Los datos estructurados en formato JSON-LD permiten a Google mostrar resultados enriquecidos — valoraciones con estrellas, metadatos de artículos, FAQs, pasos de tutoriales — directamente en los resultados de búsqueda. Para un artículo de blog, este es el esquema mínimo útil:

html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML Forms Guide — Input Types, Validation & Accessibility",
  "description": "A complete guide to HTML form input types and built-in validation.",
  "author": {
    "@type": "Person",
    "name": "Alice Chen",
    "url": "https://devtools.example.com/authors/alice-chen"
  },
  "publisher": {
    "@type": "Organization",
    "name": "DevTools Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://devtools.example.com/logo.png"
    }
  },
  "datePublished": "2026-04-16",
  "dateModified": "2026-04-16",
  "image": "https://devtools.example.com/og/html-forms-guide.png",
  "url": "https://devtools.example.com/blog/html/html-forms-guide"
}
</script>

JSON-LD va en un bloque <script type="application/ld+json"> en cualquier lugar del <head> o el <body> — el head es lo convencional. No afecta la velocidad de renderizado de la página y está completamente separado del marcado de tu página, lo que facilita generarlo en el servidor.

Qué NO usar — La meta etiqueta muerta

Una meta etiqueta que aparece en tutoriales antiguos y bases de código heredadas que genuinamente no hace nada:

html
<!-- This does nothing for modern SEO. Google stopped using it in 2009. -->
<meta name="keywords" content="html, forms, validation, accessibility">

Google anunció oficialmente en 2009 que ignora la meta etiqueta keywords debido al abuso masivo de spam. Bing y otros grandes motores de búsqueda siguieron el ejemplo. Puedes eliminarla sin ningún impacto en el SEO. El único lugar donde aún tiene algún uso es en los sistemas de búsqueda interna del sitio — y solo si tu software de búsqueda está configurado específicamente para leerla.

Una plantilla completa de head

Aquí tienes un <head> listo para producción que puedes usar como plantilla de inicio para cualquier artículo o página:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Encoding and viewport: always first -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Core SEO -->
  <title>HTML Forms Guide — Input Types, Validation & Accessibility | DevTools</title>
  <meta name="description" content="A complete guide to HTML form input types, built-in constraint validation, and accessible form patterns. Real examples, no libraries.">
  <link rel="canonical" href="https://devtools.example.com/blog/html/html-forms-guide">
  <meta name="robots" content="index, follow">

  <!-- Open Graph (Facebook, LinkedIn, Discord, Slack) -->
  <meta property="og:type"         content="article">
  <meta property="og:title"        content="HTML Forms Guide — Input Types, Validation & Accessibility">
  <meta property="og:description"  content="Build forms that work for everyone using HTML's built-in features.">
  <meta property="og:url"          content="https://devtools.example.com/blog/html/html-forms-guide">
  <meta property="og:image"        content="https://devtools.example.com/og/html-forms-guide.png">
  <meta property="og:image:width"  content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:site_name"    content="DevTools Blog">

  <!-- Twitter / X Card -->
  <meta name="twitter:card"        content="summary_large_image">
  <meta name="twitter:site"        content="@devtoolsblog">
  <meta name="twitter:title"       content="HTML Forms Guide — Input Types, Validation & Accessibility">
  <meta name="twitter:description" content="Real form examples with no library dependencies.">
  <meta name="twitter:image"       content="https://devtools.example.com/og/html-forms-guide.png">
  <meta name="twitter:image:alt"   content="An accessible HTML form with inline error validation">

  <!-- hreflang (only needed for multilingual sites) -->
  <link rel="alternate" hreflang="en" href="https://devtools.example.com/blog/html/html-forms-guide">
  <link rel="alternate" hreflang="x-default" href="https://devtools.example.com/blog/html/html-forms-guide">

  <!-- Structured data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "HTML Forms Guide",
    "author": { "@type": "Person", "name": "Alice Chen" },
    "datePublished": "2026-04-16",
    "image": "https://devtools.example.com/og/html-forms-guide.png"
  }
  </script>

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="icon" type="image/png"     href="/favicon.png">
</head>
Verifica tu implementación con el Test de resultados enriquecidos de Google para datos estructurados, y metatags.io para una vista previa rápida de cómo se verán tus tarjetas OG y Twitter cuando se compartan.

Herramientas para trabajar con HTML

Si trabajas con marcado HTML, el Formateador HTML mantiene tu <head> legible y correctamente indentado, y el Validador HTML detecta errores estructurales antes de que lleguen a producción. Para editar y previsualizar HTML en vivo, el Editor HTML te permite ver los cambios en tiempo real.

Conclusión

Las meta etiquetas que marcan la diferencia son: charset y viewport como base, un <title> y una meta description bien elaborados para los clics desde la búsqueda, las etiquetas Open Graph y Twitter Card para las previsualizaciones sociales, un enlace canonical para evitar problemas de contenido duplicado, y datos estructurados JSON-LD para los resultados enriquecidos. Olvídate de la meta etiqueta keywords — lleva 15 años muerta. Haz el resto bien y tus páginas se verán perfectas en todos los contextos en que aparezcan.

← All HTML articles Browse all categories →