SEO: Cómo estructurar el HTML para mejorar el posicionamiento

Tener un sitio web bien estructurado para SEO ayuda a mejorar la visibilidad en los motores de búsqueda. Por ello es importante optimizar la estructura HTML del sitio para permitir que los motores de búsqueda puedan indexar nuestra web.

Estructura Semántica

La estructura semántica en HTML se refiere al uso de etiquetas que describen el propósito y el contenido de los elementos en una página web. Las etiquetas semánticas son descriptivas y aportan significado sobre el rol que juega cada sección en la página.

Entre las etiquetas semánticas mas usadas tenemos:

<header>: agrupa el encabezado de la página y contiene el título o menú de navegación.
<nav>: agrupa la navegación, donde se colocan los enlaces principales del sitio.
<article>: contenido independiente, como un artículo o una publicación de blog.
<section>: divide una página en varias secciones lógicas para mostrar contenido.
<aside>: permite definir contenido relacionado con el contenido, como una barra lateral.
<footer>: contiene el pie de la página y muestra: contacto, copyright o enlaces.

Una estructura semántica de ejemplo sería:


<header>
    <h1>Site Title</h1>
</header>
<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>
<section>
    <article>
        <h2>Welcome</h2>
        <p>Content to new users... </p>
    </article>
</section>
<aside>
    <p>More links and info.</p>
</aside>
<footer>
     <p>Copyright © 2024 Site Name</p>
</footer>

Uso de Encabezados

Las etiquetas de encabezados sirven para estructurar el contenido. La etiqueta <h1> debe ser única en cada página y representar el tema principal o nombre de la página.

Las etiquetas <h2>, <h3>, <h4>, <h5> y <h6> deben usarse para organizar las sub-secciones, lo que mejora la experiencia del usuario y comprensión por parte de los motores de búsqueda.


<header>
    <h1>Site Title</h1>
</header>

<section>
    <article>
        <h2>Section 01</h2>
        <p>Content to new users... </p>
    </article>
</section>

<section>
    <article>
        <h2>Section 02</h2>
        <p>Content to new users... </p>
    </article>
</section>

Etiquetas Meta

Las etiquetas meta en HTML son elementos que no se visualizan directamente pero proporcionan información sobre una página web. Se colocan en la sección <head> y ayudan a los motores de búsqueda y redes sociales a entender el contenido de la página.

<meta charset="UTF-8">
Describe el juego de caracteres usados en la página.
<meta name="description" content="">
Muestra un breve resumen de la página, usado para los resultados de búsqueda.
<meta property="og:title" content="">
Usado por Facebook y LinkedIn para definir el título de la página al compartirla.
<meta property="og:description" content="">
Usado por Facebook y LinkedIn para definir un breve resumen de la página al compartir.
<meta property="og:image" content="">
Usado por Facebook y LinkedIn para definir una imagen usada al compartirla.
<meta name="robots" content="">
Instruye a los motores de búsqueda sobre cómo indexar la página. index / noindex para permitir o impedir la indexación de la página. follow / nofollow: para indicar si los motores de búsqueda deben seguir los enlaces en la página.


<head>
   <meta charset="">
   <title>Título de la página</title>
   <meta name="description" content="Descripción breve de la página.">
   <meta name="robots" content="index, follow">
   <meta property="og:title" content="Título de la página">
   <meta property="og:description" content="Descripción breve de la página.">
   <meta property="og:image" content="url-imagen-redes-sociales.png">
</head>

Atributo ALT en Imágenes

El atributo alt (texto alternativo) de las etiquetas <img> es una descripción textual de la imagen, el cual se usa para mejorar la accesibilidad, SEO y usabilidad.

El texto alt debe ser claro, conciso y descriptivo. Debe describir el contenido o propósito de la imagen en el contexto de la página.


<img src="grafico-ventas.png" alt="Gráfico de ventas del año 2024">
<img src="zapatillas-deportivas.jpg" alt="Zapatillas deportivas Nike Air color blanco para correr">

Enlaces

Los enlaces internos son aquellos que conectan distintas páginas dentro del mismo sitio web. Ayudan a los motores de búsqueda a rastrear y entender la jerarquía del contenido. El texto del enlace debe describir el contenido al que dirige.


<a href="/servicios">Click aquí</a>            <!-- Mal: no describe la página de destino -->
<a href="/servicios">Nuestros servicios</a>    <!-- Bien: describe claramente el destino -->

Los enlaces externos apuntan a otras páginas fuera del sitio web. Se recomienda enlazar a sitios de alta autoridad y con contenido relacionado mejora la credibilidad de tu propio sitio, además se debe abrir el enlace en ventana nueva.


<a href="https://otro-sitio.com" target="_blank" rel="noopener noreferrer">Referencia externa</a>

Usa el atributo rel="nofollow" en enlaces que no desees que pasen autoridad, como enlaces comerciales o patrocinados, o enlaces a sitios de poca calidad.


<a href="https://otro-sitio.com" target="_blank" rel="nofollow">Sitio patrocinado</a>

Velocidad de Carga

La velocidad de carga es un factor importante en el SEO. Algunos puntos importantes a tener en cuenta son:

Reducir scripts, evitar carga excesiva de scripts, sólo carga scripts necesarios.
Comprimir imágenes reduce el tamaño de los archivos y mejora la velocidad de carga.
Minimizar CSS y JS reduce el tamaño de los archivos sin afectar la funcionalidad.
Minimizar HTML es eliminar los espacios en blanco y saltos de línea.

Conclusión

Una estructura HTML optimizada para SEO facilita la indexación y el posicionamiento en los motores de búsqueda. Al implementar estas buenas prácticas, tu sitio web estará mejor posicionado y será fácil de navegar.