Apuntes sobre Html2

Cuando uno enseña, dos aprenden.

Metadatos y SEO

El <head> es la parte invisible de una página HTML. No renderiza contenido en pantalla, pero contiene instrucciones esenciales para el navegador: cómo interpretar el documento, cómo presentarlo, qué recursos cargar, y qué información dar a los buscadores y las redes sociales cuando encuentran o comparten la página.

Todo lo que va en el <head> afecta a cómo la página es procesada, indexada y percibida, aunque el visitante nunca lo vea directamente.

<!DOCTYPE html>

Técnicamente no es parte del <head>, sino la primera línea del documento, antes incluso del <html>:

<!DOCTYPE html>
<html lang="es">
<head>
    ...
</head>

Su función es activar el modo estándar del navegador. Sin él, el navegador entra en Quirks Mode: imita el comportamiento de los navegadores de los años 90 para no romper webs antiguas, con interpretaciones del CSS distintas a las actuales. Con <!DOCTYPE html>, el navegador aplica las especificaciones modernas.

Para declarar que nuestro documento sigue el estandard HTML5 basta con esta simple instrucción. En versiones de HTML anteriores era necesario especificar una DTD concreta ("Document Type Definition"); hoy no es necesario.

Codificación: charset

<meta charset="UTF-8">

Indica al navegador qué codificación de caracteres usar para leer el documento. UTF-8 cubre prácticamente todos los caracteres de todos los idiomas del mundo: acentos, ñ, caracteres chinos, árabes, emojis. Si no se declara, el navegador intenta adivinarlo y puede equivocarse, mostrando caracteres extraños.

Debe ser el primer elemento dentro del <head>, antes del <title>, porque el navegador necesita saber la codificación antes de intentar leer el resto del documento.

<title>

<title>Manual de HTML y CSS | Ignit</title>

El título aparece en la pestaña del navegador, en los resultados de búsqueda de Google y en los marcadores. Es el elemento de SEO más importante de la página: Google lo usa como el enlace principal en los resultados.

Algunas reglas prácticas:

  • Entre 50 y 60 caracteres: más y Google lo recorta en los resultados.
  • Describe el contenido de esa página concreta, no del sitio en general.
  • Si incluyes la marca, ponla al final separada por un guion o barra vertical: Título de la página | Nombre del sitio.
  • Cada página debe tener un título único.

Descripción y palabras clave

<meta name="description" content="Aprende HTML y CSS desde cero con ejemplos prácticos y explicaciones claras.">

La descripción aparece como el texto bajo el título en los resultados de búsqueda. No afecta directamente al ranking (Google decide si usarla o sustituirla por un fragmento del contenido), pero sí afecta al porcentaje de clicks: una descripción bien escrita es el reclamo que convence al usuario de entrar.

Entre 120 y 160 caracteres es el rango adecuado. Cada página debería tener la suya propia y descriptiva del contenido específico.

<meta name="keywords" content="HTML, CSS, tutorial, web">

Las palabras clave fueron relevantes en los años 90. En la actualidad y desde hace mucho tiempo, Google las ignora por completo (demasiado fácil de manipular). Bing les da un peso mínimo. Puedes incluirlas, pero no esperes ningún beneficio real en tráfico.

Instrucciones para robots

<meta name="robots" content="index, follow">

Indica a los rastreadores de buscadores qué hacer con la página:

  • index / noindex: si deben incluir la página en el índice de búsqueda.
  • follow / nofollow: si deben seguir los enlaces de la página.
  • noarchive: no guardar una copia en caché.
  • nosnippet: no mostrar descripción en los resultados.

index, follow es el comportamiento por defecto: no hace falta declararlo. Úsalo cuando necesites lo contrario: páginas de administración, resultados de búsqueda interna, páginas duplicadas o en construcción que no deben aparecer en Google.

URL canónica

<link rel="canonical" href="https://www.ejemplo.com/manual/html/">

Cuando el mismo contenido es accesible desde varias URLs (con y sin www, con parámetros de seguimiento, versiones HTTP y HTTPS, con y sin barra final), los buscadores no saben cuál es la "oficial" y pueden penalizar el sitio por contenido duplicado.

La URL canónica le dice a Google cuál es la versión preferida. Deben usarla todas las variantes para apuntar a la misma URL definitiva.

Open Graph: redes sociales

Cuando alguien comparte un enlace en Facebook, WhatsApp, LinkedIn o Twitter/X, la red social lee unas etiquetas especiales del <head> para construir la vista previa: título, descripción, imagen. Sin ellas, la red social improvisa con lo que encuentre, con resultados impredecibles.

El estándar Open Graph (creado por Facebook, adoptado por casi todos) usa el atributo property:

<meta property="og:title" content="Manual de HTML y CSS">
<meta property="og:description" content="Aprende HTML y CSS desde cero con ejemplos prácticos.">
<meta property="og:image" content="https://www.ejemplo.com/img/og-manual.jpg">
<meta property="og:url" content="https://www.ejemplo.com/manual/html/">
<meta property="og:type" content="website">

La imagen (og:image) es la más importante visualmente. Debe ser de al menos 1200×630 píxeles para verse bien en todos los contextos. Una imagen pequeña o ausente hace que el enlace compartido parezca poco cuidado.

Twitter/X tiene su propio sistema, aunque también lee Open Graph como respaldo:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Manual de HTML y CSS">
<meta name="twitter:description" content="Aprende HTML y CSS desde cero.">
<meta name="twitter:image" content="https://www.ejemplo.com/img/og-manual.jpg">

Favicon

El favicon es el pequeño icono que aparece en la pestaña del navegador, en los marcadores y en la pantalla de inicio del móvil cuando se guarda la página. Se vincula con <link>:

<!-- Favicon básico (ICO, compatible con todo) -->
<link rel="icon" href="/favicon.ico">

<!-- PNG moderno -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<!-- Icono para pantalla de inicio en iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

El formato .ico sigue siendo el más compatible. Para sitios modernos, lo habitual es generar un conjunto de tamaños con herramientas como realfavicongenerator.net a partir de una imagen SVG o PNG de alta resolución.

El atributo lang

El atributo lang en el elemento <html> declara el idioma principal del contenido:

<html lang="es">         <!-- español -->
<html lang="es-MX">      <!-- español de México -->
<html lang="en">         <!-- inglés -->
<html lang="ca">         <!-- catalán -->

Los lectores de pantalla usan esta información para seleccionar la voz y la pronunciación correctas. Los buscadores la usan para indexar el contenido en el idioma adecuado. También activa la corrección ortográfica del navegador en el idioma correcto.

Si una sección de la página está en otro idioma, el atributo lang puede aplicarse también a elementos individuales:

<p>Como diría un francés: <span lang="fr">C'est la vie</span>.</p>

Recursos externos en el <head>

El <head> no es solo para metadatos: también es donde se carga cualquier recurso externo que la página necesita antes de renderizarse. Los más habituales son las tipografías y las hojas de iconos.

Google Fonts — ya lo usaste en la lección de estilos. En producción, la forma recomendada incluye un <link rel="preconnect"> para avisar al navegador que va a necesitar esa conexión antes de que descubra el <link> real:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">

Font Awesome es una biblioteca de iconos muy usada. Se carga igual, desde su CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

Después puedes usar los iconos como elementos HTML vacíos con clases específicas: <i class="fa-solid fa-envelope"></i>.

CDN (Content Delivery Network) es una red de servidores distribuidos geográficamente que sirven archivos desde el servidor más cercano al usuario. La mayoría de librerías populares (Bootstrap, Font Awesome, jQuery) ofrecen CDNs públicas y gratuitas. La ventaja es la velocidad y el caché compartido: si el usuario ya visitó otra página que usa el mismo CDN, el archivo ya está en su caché local.

El orden de los <link> importa: las hojas de estilo propias siempre después de las externas, para que tus reglas puedan sobreescribir las de la librería si hace falta.

El <head> completo

Un <head> bien construido para una página de producción:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Manual de HTML y CSS | Ignit</title>
    <meta name="description" content="Aprende HTML y CSS desde cero con ejemplos prácticos y explicaciones claras.">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://www.ignit.xyz/apuntes/html2/">

    <!-- Open Graph -->
    <meta property="og:title" content="Manual de HTML y CSS">
    <meta property="og:description" content="Aprende HTML y CSS desde cero con ejemplos prácticos.">
    <meta property="og:image" content="https://www.ignit.xyz/img/og-manual.jpg">
    <meta property="og:url" content="https://www.ignit.xyz/apuntes/html2/">
    <meta property="og:type" content="website">

    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

    <!-- Tipografía externa -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">

    <!-- Hoja de estilos propia (siempre después de las externas) -->
    <link rel="stylesheet" href="/css/estilos.css">
</head>

Recapitulación

  • <!DOCTYPE html> activa el modo estándar del navegador. Sin él, el navegador entra en Quirks Mode.
  • <meta charset="UTF-8"> debe ser el primer elemento del <head>. UTF-8 cubre todos los caracteres modernos.
  • <title> es el elemento de SEO más importante: aparece en los resultados de búsqueda. 50-60 caracteres, único por página.
  • description no afecta al ranking pero sí al porcentaje de clics. 120-160 caracteres.
  • keywords es ignorado por Google. Puedes omitirlo.
  • robots controla la indexación. index, follow es el defecto; solo decláralo cuando quieras lo contrario.
  • canonical indica la URL preferida cuando el mismo contenido es accesible desde varias direcciones.
  • Las etiquetas Open Graph (og:title, og:description, og:image) controlan la vista previa al compartir en redes sociales.
  • El favicon se vincula con <link rel="icon">. Genera varios tamaños para cubrir todos los contextos.
  • lang en el elemento <html> declara el idioma del contenido. Importante para accesibilidad y SEO.
  • Los recursos externos (tipografías, iconos, librerías) se cargan en el <head> con <link>. Las hojas de estilo propias van siempre después de las externas. preconnect anticipa la conexión para acelerar la carga.

Tu proyecto

Completa el <head> de proyecto.html con los metadatos adecuados. Sustituye los valores de ejemplo por los tuyos:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laura Suárez — Arquitecta</title>
    <meta name="description" content="Portfolio de Laura Suárez, arquitecta especializada en vivienda residencial. Madrid.">
    <meta name="robots" content="index, follow">

    <!-- Open Graph: previsualización al compartir en redes sociales -->
    <meta property="og:title" content="Laura Suárez — Arquitecta">
    <meta property="og:description" content="Portfolio de proyectos residenciales y de rehabilitación en Madrid.">
    <meta property="og:image" content="imagenes/og-portfolio.jpg">
    <meta property="og:type" content="website">

    <!-- Favicon (opcional hasta que tengas uno real) -->
    <link rel="icon" href="imagenes/favicon.ico">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">

    <!-- Estilos -->
    <link rel="stylesheet" href="estilos.css">
</head>

Abre el portfolio en el navegador y verifica que el título aparece correctamente en la pestaña. Para probar las etiquetas Open Graph sin publicar, puedes usar herramientas como opengraph.xyz pegando la URL local (o la URL publicada si ya tienes hosting).

Con esto, el portfolio tiene estructura semántica, estilos con variables, layout responsive, efectos de hover y metadatos completos. Está listo para publicarse.

TOP