CursosEmpresasBlogLiveConfPrecios

Estructura semántica y meta tags para mejorar posicionamiento web

Clase 16 de 17 • Curso de HTML

Contenido del curso

Tomar examen
Resumen

SEO bien aplicado impulsa el alcance orgánico de un sitio sin pagar anuncios. Aquí verás cómo combinar semántica HTML, accesibilidad, meta tags, estructura clara y optimización de medios para lograr una mejor calificación en buscadores. No es un código único: son prácticas y estrategias coherentes que trabajan juntas.

¿Qué es SEO y cómo ayuda a crecer de forma orgánica?

SEO permite que los buscadores muestren tu contenido sin pago directo. Funciona cuando aplicas un conjunto de buenas prácticas: semántica, accesibilidad, estructura correcta y optimización de recursos. Es dinámico y evoluciona; en la era de la AI, las reglas cambian, por lo que conviene mantenerse al día.

  • Enfoque: llegar a más gente de forma orgánica.
  • Clave: una sola estrategia no basta; suma prácticas consistentes.
  • Efecto: mejor calificación en buscadores y mayor visibilidad.

¿Por qué la semántica y la accesibilidad influyen en SEO?

Porque ayudan a los buscadores y a los lectores de pantalla a entender la página. Un HTML semántico claro, con roles y ARIA labels, mejora la interpretación del contenido y la experiencia de todos.

¿Cómo optimizar el head con meta tags, título y Open Graph?

El head define idioma, codificación, mobile first, título y metadatos que los buscadores y redes sociales usan para indexar y previsualizar tu sitio.

  • Idioma con lang: indica el lenguaje principal del documento.
<html lang="es">
  • Codificación con charset UTF-8: muestra bien caracteres en español.
<meta charset="UTF-8">
  • Viewport para mobile first: crítico en móviles y calificación SEO.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Título optimizado: 50–60 caracteres, con palabras clave y único por página.
<title>Guía de SEO: semántica, accesibilidad y rendimiento</title>
  • Meta description: texto que aparece bajo el título en Google; debe reflejar el contenido real.
<meta name="description" content="Buenas prácticas de SEO con HTML semántico, accesibilidad y optimización para mejorar el posicionamiento orgánico.">
  • Meta keywords: hoy tiene menos peso, pero puede incluirse.
<meta name="keywords" content="SEO, HTML semántico, accesibilidad, meta tags">
  • Autor: atribuye el contenido a una persona o empresa.
<meta name="author" content="Tu Empresa">
  • Robots: indica a las arañas cómo tratar la página: index, follow, noindex, nofollow.
<meta name="robots" content="index, follow">
  • Canonical: evita contenido duplicado indicando la URL original.
<link rel="canonical" href="https://ejemplo.com/">
  • Open Graph para redes sociales: control de título, descripción, imagen y URL compartida.
<meta property="og:title" content="Guía práctica de SEO en HTML">
<meta property="og:description" content="Semántica, accesibilidad y meta tags para posicionar.">
<meta property="og:image" content="https://ejemplo.com/og-image.jpg">
<meta property="og:url" content="https://ejemplo.com/">
  • Favicon: refuerza la identidad visual en pestañas y dispositivos.
<link rel="icon" href="/favicon.ico" type="image/x-icon">

¿Qué estructura semántica y accesible mejora tu calificación?

Organiza el body con secciones claras, una jerarquía de encabezados correcta y enlaces descriptivos. Optimiza imágenes y videos para rendimiento y experiencia.

  • Header con logotipo enlazando al home y aria-label descriptivo.
<header>
  <a href="/" aria-label="Ir al inicio">
    <img src="/logo.svg" alt="Logotipo de la empresa" width="120" height="40">
  </a>
</header>
  • Navegación principal con nav y aria-label.
<nav aria-label="Navegación principal">
  <ul>
    <li><a href="#inicio">Inicio</a></li>
    <li><a href="#servicios">Servicios</a></li>
    <li><a href="#productos">Productos</a></li>
    <li><a href="#sobre-nosotros">Sobre nosotros</a></li>
    <li><a href="#blog">Blog</a></li>
    <li><a href="#contacto">Contacto</a></li>
  </ul>
</nav>
  • Main con un único H1 por página: regla de oro; H2/H3 para secciones.
<main>
  <h1>SEO con HTML semántico y accesible</h1>
  <article>
    <h2>Buenas prácticas de estructura</h2>
    <p>Contenido introductorio.</p>
  </article>
  • Imágenes optimizadas con alt, dimensiones y carga diferida.
<img src="/img/ejemplo.webp" alt="Descripción de la imagen" width="800" height="500" loading="lazy">
  • Enlaces internos descriptivos: evita “page” o “info”; explica el destino.
<a href="/guia-completa-seo">Guía completa de SEO en HTML</a>

  • Listas para agrupar puntos clave de forma clara.

  • Video con múltiples formatos y atributos que mejoran rendimiento.

<video controls preload="metadata" width="800">
  <source src="/video/ejemplo.webm" type="video/webm">
  <source src="/video/ejemplo.mp4" type="video/mp4">
  Tu navegador no soporta el elemento video.
</video>
  • Aside para contenido secundario, no principal.
<aside>
  <h2>Contenido relacionado</h2>
  <ul>
    <li><a href="/mejores-practicas">Mejores prácticas</a></li>
  </ul>
</aside>
  • Footer con navegaciones adicionales y aria-label específico (por ejemplo, “Enlaces del pie” y “Redes sociales”).
<footer>
  <nav aria-label="Enlaces del pie">…</nav>
  <nav aria-label="Redes sociales">…</nav>
</footer>

Habilidades y conceptos aplicados: definición de SEO y alcance orgánico; HTML semántico con header, nav, main, article, section, aside y footer; uso correcto de H1 único; accesibilidad con ARIA labels; meta tags clave (lang, charset UTF-8, viewport, title, description, keywords con menor peso, author, robots, canonical); Open Graph para compartir en redes; favicons; optimización de imágenes con alt, dimensiones y lazy loading; enlaces internos descriptivos; videos con múltiples formatos. Todo suma para mejorar la calificación y el posicionamiento.

¿Tienes dudas o un caso real que quieras optimizar? Coméntalo y afinamos juntos tu implementación.