Curso HTML 3.3 Metadatos: charset, viewport, title, meta

Metadatos en HTML

Los metadatos son instrucciones y datos que el navegador y los motores de búsqueda usan para procesar y mostrar tu página. Se colocan dentro de la sección <head> (aunque aquí no mostraremos la etiqueta <head> ni la declaración completa del documento). A continuación profundizamos en charset, viewport, title y otras metaetiquetas clave.

1. charset: Definir la codificación de caracteres

Establecer la codificación garantiza que caracteres especiales (acentos, símbolos, idiomas no latinos) se muestren correctamente.

Ubicación recomendada: lo primero dentro de <head>.
La forma moderna y más rápida es <meta charset='UTF-8'>.
Evita la versión http-equiv a menos que requieras compatibilidad extrema.

Detalles avanzados:

UTF-8 admite todos los caracteres de Unicode. Es la elección estándar actual.
Sin BOM (Byte Order Mark) evitas problemas de cabeceras duplicadas.
Si tu servidor envía otro encabezado Content-Type, suele prevalecer sobre la metaetiqueta.

2. viewport: Control de la ventana gráfica

Crucial para diseño responsivo en dispositivos móviles. Define cómo el contenido se escala y ajusta.

Parámetros habituales:

Parámetro	Descripción	Ejemplo
width	Ancho virtual de la página. `device-width` iguala al ancho del dispositivo.	`width=device-width`
initial-scale	Zoom inicial. `1.0` = 100 %.	`initial-scale=1.0`
maximum-scale	Zoom máximo permitido.	`maximum-scale=2.0`
user-scalable	Habilita/deshabilita zoom manual (`yes`/`no`).	`user-scalable=no`

3. title: El título de la página

El contenido de <title>:

Aparece en la pestaña del navegador y en resultados de búsqueda.
Debe ser único y descriptivo (60–70 caracteres).
Importante para SEO y accesibilidad: los lectores de pantalla lo anuncian al cargar.


Curso HTML 3.3 – Metadatos: charset, viewport, title, meta

4. Metaetiquetas genéricas

Complementan la información de la página. Estas son algunas de las más usadas:

Meta	Atributos	Función
description	`name='description'` `content='texto'`	Resumen para buscadores y redes sociales.
keywords	`name='keywords'` `content='html, metadatos, tutorial'`	Antiguo, hoy en día casi ignorado por Google.
author	`name='author'` `content='Nombre del autor'`	Nombre del responsable del contenido.
robots	`name='robots'` `content='index, follow'`	Indicaciones a motores de búsqueda.
refresh	`http-equiv='refresh'` `content='5; URL=otra.html'`	Recarga o redirección automática.

Metaetiquetas para redes sociales (Open Graph, Twitter Cards)

Extienden la información cuando la URL se comparte:

Buenas prácticas finales

Coloca siempre <meta charset> al inicio del <head>.
Mantén <title> corto y relevante.
Usa description única para cada página.
Asegura que viewport esté presente en sitios responsivos.
Actualiza meta Open Graph si optimizas la previsualización en redes.

Con esto tienes una visión profunda sobre cómo gestionar los metadatos vitales en HTML y garantizar una correcta presentación, accesibilidad y posicionamiento en buscadores y redes sociales.