Curso HTML 15. SEO on-page con HTML

15. SEO on-page con HTML

El SEO on-page consiste en optimizar cada página de un sitio web mediante el uso correcto de código HTML y contenido. A continuación se detallan los elementos fundamentales, buenas prácticas y ejemplos de implementación.

1. Metaetiquetas esenciales

Las metaetiquetas ofrecen información a buscadores y navegadores. Las más importantes son:

<title>: Define el título que aparece en los resultados de búsqueda.
<meta name=’description’>: Resumen breve de la página.
<meta name=’robots’>: Indica si indexar o seguir enlaces.
<meta name=’viewport’>: Optimiza la visualización en dispositivos móviles.

  
  
  <title>Guía Completa de SEO On-Page</title>
  <meta name='description' content='Aprende las claves del SEO on-page para mejorar tu posicionamiento con ejemplos y buenas prácticas.'>
  <meta name='robots' content='index, follow'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>

2. Estructura semántica con HTML5

La semántica mejora la comprensión del contenido por parte de los motores de búsqueda:

<header>: Cabecera del documento o sección.
<nav>: Navegación principal.
<main>: Contenido central y único de la página.
<article>: Bloque autocontenido (blog posts, noticias).
<section>: Sección temática dentro de un artículo o página.
<aside>: Información complementaria (sidebar, widgets).
<footer>: Pie de página general o de sección.

  
  <header>
    <h2>Mi Sitio Web</h2>
    <nav>
      <ul>
        <li><a href='/'>Inicio</a></li>
        <li><a href='/blog'>Blog</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h3>Título de la Entrada</h3>
      <p>Contenido del artículo...</p>
    </article>
  </main>

  <aside>
    <p>Enlaces relacionados y anuncios.</p>
  </aside>

  <footer>
    <p>© 2024 Mi Sitio Web</p>
  </footer>

3. Jerarquía de encabezados (h2–h6)

Los encabezados deben seguir un orden lógico. Importante:

Solo un <h1> por página.
Subsecciones: <h2>, <h3>… hasta <h6>.

4. Atributos alt y title en imágenes

El atributo alt aporta contexto semántico y accesibilidad. title brinda información adicional.

  
  <img src='seo-diagram.png'
       alt='Diagrama de SEO On-Page: meta, semántica, enlaces'
       title='SEO On-Page explicado visualmente'
       loading='lazy'>

5. Enlaces internos y externos

Los enlaces enriquecen la relevancia temática:

Anchors descriptivas: evita “haz clic aquí”.
rel='nofollow' o rel='sponsored' para enlaces de pago o publicidad.
rel='noopener noreferrer' en enlaces que abren en nueva pestaña.

  
  <a href='/guia-seo-on-page' title='Guía detallada de SEO On-Page'>
    Aprende más sobre SEO On-Page
  </a>

  <a href='https://patrocinador.com' target='_blank'
     rel='noopener noreferrer sponsored'>
    Ver sitio del patrocinador
  </a>

6. Canonical y contenido duplicado

Evita penalizaciones por contenido duplicado indicando la URL canónica:

  
  <link rel='canonical' href='https://tusitio.com/pagina-principal'>

7. Datos estructurados con schema.org

Los motores de búsqueda usan JSON-LD para enriquecer resultados con rich snippets:

  
  <script type='application/ld+json'>
  {
    '@context': 'https://schema.org',
    '@type': 'Article',
    'headline': 'Guía Completa de SEO On-Page',
    'author': {
      '@type': 'Person',
      'name': 'María SEO'
    },
    'datePublished': '2024-06-15',
    'image': 'https://tusitio.com/img/seo-guide.jpg',
    'publisher': {
      '@type': 'Organization',
      'name': 'Mi Agencia SEO',
      'logo': {
        '@type': 'ImageObject',
        'url': 'https://tusitio.com/logo.png'
      }
    }
  }
  </script>

8. Optimización de URLs

Buenas prácticas:

URLs limpias y cortas.
Uso de guiones medios (-), evitar guiones bajos (_).
Palabras clave relevantes.
Minúsculas y sin caracteres especiales.

9. Open Graph y Twitter Cards

Mejoran la presentación al compartir en redes sociales:

  
  <meta property='og:title' content='Guía de SEO On-Page'>
  <meta property='og:description' content='Mejora el posicionamiento de tu web con estas técnicas de SEO on-page.'>
  <meta property='og:image' content='https://tusitio.com/img/seo-og.jpg'>
  <meta property='og:url' content='https://tusitio.com/seo-on-page'>
  <meta name='twitter:card' content='summary_large_image'>
  <meta name='twitter:title' content='Guía de SEO On-Page'>
  <meta name='twitter:description' content='Aprende las mejores prácticas de SEO on-page paso a paso.'>
  <meta name='twitter:image' content='https://tusitio.com/img/seo-twitter.jpg'>

10. Rendimiento y accesibilidad

Velocidad y accesibilidad influyen en el ranking:

Imágenes optimizadas y lazy loading.
Evitar bloqueos de renderizado (scripts en footer o async/defer).
Estructura ARIA para lectores de pantalla.

Implementando estos elementos y prácticas en tu código HTML lograrás un SEO on-page robusto, mejorando visibilidad, experiencia de usuario y conversión.