Lección 21. Metaetiquetas y SEO básico.
Las metaetiquetas proporcionan información importante sobre tu sitio web a los navegadores, buscadores y redes sociales. No aparecen visualmente en la página, pero afectan directamente al SEO, al comportamiento del navegador y a cómo tu sitio se comparte.
No aparecen visualmente en la página, pero afectan directamente al SEO, al comportamiento del navegador y a cómo tu sitio se comparte.
Todas estas etiquetas se colocan dentro del elemento head de tu .HTML.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descripción del sitio">charset="UTF-8" -> Permite usar acentos y caracteres especiales.
viewport -> Hace que la página sea responsive en celulares.
description -> Texto que aparece en Google bajo el título del sitio.
Una buena descripción mejora tu visibilidad en buscadores y aumenta el CTR (cantidad de clicks que recibe tu sitio).
Open Graph (para compartir en redes)._
Open Graph es un conjunto de metaetiquetas que usan plataformas como Facebook, WhatsApp, Twitter y muchas otras para mostrar una tarjeta visual cuando compartes un enlace.
<meta property="og:title" content="Mi sitio">
<meta property="og:description" content="Descripción">
<meta property="og:image" content="imagen.jpg">Donde:
og:title — Título mostrado al compartir.
og:description — Texto descriptivo del enlace.
og:image — Imagen de vista previa (muy importante).
Nota: Si no usas Open Graph, las redes elegirán información al azar y la vista previa podría verse mal.
Favicon._
El favicon es el pequeño ícono que aparece en la pestaña del navegador. Ayuda a identificar tu sitio y le da un aspecto más profesional y confiable.
<link rel="icon" href="/favicon.png">Puedes usar formatos como .png, .ico o .svg.
Nota: Las metaetiquetas son una parte esencial de cualquier proyecto profesional, ayudando a que tu sitio sea más accesible, más visible en Google y con mejor apariencia al compartirlo.