Meta Tags, SEO y Buenas Practicas

Las meta tags son información invisible en el <head> que le dicen al navegador y a los buscadores cómo tratar tu página. El viewport meta tag es esencial para que tu sitio se vea bien en móviles. La meta description es lo que Google muestra debajo del título en los resultados de búsqueda.

SEO (Search Engine Optimization) es el arte de hacer que tu página aparezca en los primeros resultados de Google. El HTML correcto es la base del SEO: títulos descriptivos, meta descriptions, headings jerárquicos (h1 → h2 → h3), imágenes con alt, URLs limpias y HTML semántico.

<head>
  <!-- Obligatorios -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Tienda Online | Productos de Calidad</title>
  
  <!-- SEO -->
  <meta name="description" content="Encuentra los mejores productos online con envío gratis a todo el país.">
  <meta name="keywords" content="tienda online, productos, envío gratis">
  <link rel="canonical" href="https://mitienda.com/">
  
  <!-- Redes Sociales (Open Graph) -->
  <meta property="og:title" content="Mi Tienda Online">
  <meta property="og:description" content="Los mejores productos online">
  <meta property="og:image" content="https://mitienda.com/portada.jpg">
  <meta property="og:url" content="https://mitienda.com/">
  <meta property="og:type" content="website">
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  
  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/apple-icon.png">
  
  <!-- CSS externo -->
  <link rel="stylesheet" href="styles.css">
</head>

Checklist de buenas prácticas HTML:

• Siempre declara DOCTYPE y charset UTF-8 • Un solo <h1> por página, luego h2 → h3 en orden • Atributo alt en TODAS las imágenes • Usa etiquetas semánticas (header, main, footer, nav, article) • Incluye viewport meta para responsive • Escribe meta description para SEO (máximo 160 caracteres) • Valida tu HTML en validator.w3.org • Indenta tu código (2 o 4 espacios) para legibilidad