Meta tags, head y SEO básico con HTML - HTML desde Cero

El elemento head

El <head> es la sección de la página que contiene metadatos: información sobre la página que no se muestra visualmente pero que es crucial para navegadores, motores de busqueda y redes sociales.

<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Metadatos aquí -->
</head>
<body>
  <!-- Contenido visible aquí -->
</body>
</html>

Meta tags esenciales

charset (codificacion de caracteres)

Debe ser la primera etiqueta dentro del <head>. Define la codificacion de caracteres del documento:

<meta charset="UTF-8">

UTF-8 soporta practicamente todos los caracteres de todos los idiomas, incluyendo tildes, la ene y emojis. Siempre usa UTF-8.

viewport

Esencial para el diseño responsive. Sin esta etiqueta, las páginas se ven diminutas en dispositivos móviles:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width — El ancho del viewport igual al ancho del dispositivo
initial-scale=1.0 — Zoom inicial al 100%

title

El elemento <title> define el título de la página que aparece en la pestana del navegador y en los resultados de busqueda:

<title>Aprende HTML desde cero - Curso gratuito | Bemore Learn</title>

El título es uno de los factores SEO más importantes. Recomendaciones:

Longitud: 50-60 caracteres (Google trunca los más largos)
Formato: Contenido específico | Nombre del sitio
Único: Cada página debe tener su propio título
Descriptivo: Debe reflejar el contenido real de la página

description

La meta descripción aparece debajo del título en los resultados de busqueda:

<meta name="description"
  content="Aprende HTML desde cero con 12 lecciones prácticas, ejemplos de código
  y un proyecto final. Curso gratuito en español para principiantes.">

Longitud: 150-160 caracteres
Debe ser única para cada página
Incluye un call to action o beneficio para el usuario
Google puede ignorarla y generar su propio snippet, pero sigue siendo buena práctica

Open Graph (redes sociales)

Los meta tags de Open Graph controlan como se ve tu página cuando alguien la comparte en Facebook, LinkedIn, WhatsApp u otras redes:

<meta property="og:title" content="Curso de HTML desde cero">
<meta property="og:description" content="12 lecciones prácticas para aprender HTML.">
<meta property="og:image" content="https://tusitio.com/img/og-html.jpg">
<meta property="og:url" content="https://tusitio.com/cursos/html">
<meta property="og:type" content="website">
<meta property="og:locale" content="es_ES">
<meta property="og:site_name" content="Bemore Learn">

Recomendaciones para og:image

Tamano recomendado: 1200x630 pixeles
Tamano mínimo: 600x315 pixeles
Formato: JPG o PNG
Tamano máximo del archivo: 5MB
Usa una URL absoluta (con https://)

Twitter Cards

Similar a Open Graph, pero específico para Twitter (X):

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Curso de HTML desde cero">
<meta name="twitter:description" content="12 lecciones prácticas para aprender HTML.">
<meta name="twitter:image" content="https://tusitio.com/img/twitter-html.jpg">
<meta name="twitter:site" content="@bemorex">

Los valores de twitter:card pueden ser:

summary — Tarjeta pequeña con imagen cuadrada
summary_large_image — Tarjeta grande con imagen rectangular

Favicon e iconos

Los favicons son los iconos que aparecen en la pestana del navegador, marcadores y pantalla de inicio:

<!-- Favicon clásico (32x32) -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- Favicon SVG (moderno, escalable) -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- Icono para iOS (180x180) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Manifest para PWA -->
<link rel="manifest" href="/manifest.json">

URL canonica

La URL canonica indica a los motores de busqueda cual es la versión "oficial" de una página, evitando problemas de contenido duplicado:

<link rel="canonical" href="https://tusitio.com/cursos/html-desde-cero">

Esto es útil cuando la misma página es accesible desde multiples URLs (con parametros, con/sin www, http/https).

Precarga de recursos

Puedes indicar al navegador que precargue recursos críticos para mejorar el rendimiento:

<!-- Preconectar a dominios externos -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.ejemplo.com" crossorigin>

<!-- Precargar recursos críticos -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/styles/critical.css" as="style">

<!-- Prefetch de páginas probables -->
<link rel="prefetch" href="/cursos/css-fundamentals">

Atributo	Función
`preconnect`	Establece conexión anticipada con un dominio externo
`preload`	Descarga un recurso crítico para la página actual
`prefetch`	Descarga un recurso que probablemente se necesite pronto
`dns-prefetch`	Solo resuelve el DNS de un dominio (más ligero que preconnect)

Robots y rastreo

Puedes controlar como los motores de busqueda interactuan con tu página:

<!-- Permitir indexacion y seguimiento de enlaces (por defecto) -->
<meta name="robots" content="index, follow">

<!-- No indexar esta página -->
<meta name="robots" content="noindex">

<!-- No seguir los enlaces de esta página -->
<meta name="robots" content="nofollow">

<!-- No indexar ni seguir -->
<meta name="robots" content="noindex, nofollow">

Casos de uso comunes para noindex:

Páginas de login o registro
Páginas de resultados de busqueda internos
Páginas de agradecimiento o confirmacion

El atributo lang

El atributo lang en el <html> indica el idioma principal de la página:

<html lang="es">

Esto es crucial para:

Lectores de pantalla: Usan la pronunciacion correcta
Traductores automaticos: Saben de que idioma traducir
SEO: Google asocia la página con busquedas en ese idioma

Si tu página tiene secciones en otros idiomas, usa lang en esos elementos:

<html lang="es">
<body>
  <p>Este párrafo esta en español.</p>
  <blockquote lang="en">
    <p>This quote is in English.</p>
  </blockquote>
</body>
</html>

Práctica

Configura un head completo: Crea el <head> de una página con charset, viewport, title (50-60 caracteres), meta description (150-160 caracteres), favicon, y una URL canonica.
Anade Open Graph y Twitter Cards: Agrega las meta tags de Open Graph (og:title, og:description, og:image, og:url) y Twitter Card (twitter:card, twitter:title, twitter:image) a tu página.
Optimiza la carga de recursos: Implementa preconnect para un dominio externo de fuentes y preload para un archivo de fuentes local en formato woff2.

En la siguiente y última leccion construiremos un proyecto final aplicando todo lo aprendido en el curso.