10.1 Marcado semántico
SEO (optimización de motores de búsqueda) juega un papel importante en el desarrollo web, ya que ayuda a mejorar la visibilidad de las páginas web en los resultados de los motores de búsqueda. El marcado HTML moderno tiene un impacto significativo en SEO, ayudando a los motores de búsqueda a comprender e indexar mejor el contenido. Vamos a revisar los aspectos principales de cómo SEO afecta al marcado HTML moderno.
Las etiquetas semánticas de HTML5 ayudan a los motores de búsqueda a entender la estructura y el contenido de una página web. El uso de las etiquetas correctas mejora la accesibilidad y hace que el contenido sea más comprensible para los motores de búsqueda.
Ejemplos de etiquetas semánticas:
<header>: encabezado de la página o sección<nav>: enlaces de navegación<main>: contenido principal de la página<section>: sección temática<article>: bloque de contenido independiente<aside>: información adicional o barra lateral<footer>: pie de página o sección
Ejemplo de uso:
<body>
<header>
<h1>Título del sitio</h1>
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Sobre nosotros</a></li>
<li><a href="#contact">Contactos</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Artículo 1</h2>
<p>Texto del artículo...</p>
</article>
<section>
<h2>Sección</h2>
<p>Texto de la sección...</p>
</section>
</main>
<aside>
<h2>Barra lateral</h2>
<p>Información adicional...</p>
</aside>
<footer>
<p>© 2024 Mi sitio. Todos los derechos reservados.</p>
</footer>
</body>
10.2 Microformatos
Los microformatos (structured data) se utilizan para proporcionar a los motores de búsqueda información adicional sobre el contenido de la página. Esto ayuda a los motores de búsqueda a entender mejor el contenido y mejora la visibilidad de la página en los resultados de búsqueda.
Ejemplos de esquemas (Schema.org):
- Article: para artículos y noticias
- BreadcrumbList: para breadcrumbs
- Product: para la descripción de productos
- Event: para la descripción de eventos
Ejemplo de uso de microformatos:
<body>
<article>
<h1>Título del artículo</h1>
<p>Autor: Nombre del autor</p>
<p>Fecha de publicación: 1 de enero de 2024</p>
<img src="https://example.com/image.jpg" alt="Descripción de la imagen">
<p>Texto del artículo...</p>
</article>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Título del artículo",
"author": "Nombre del autor",
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg"
}
</script>
10.3 Optimización de headers y meta tags
Los headers y meta tags juegan un papel clave en SEO, ya que proporcionan a los motores de búsqueda y a los usuarios información sobre el contenido de la página.
Meta tags:
<title>: título de la página, que se muestra en los resultados de búsqueda<meta name="description">: descripción de la página, utilizada en los snippets de resultados de búsqueda<meta name="keywords">: palabras clave (no tienen mucha importancia para los motores de búsqueda modernos)
Ejemplo de uso de meta tags:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de título de página</title>
<meta name="description" content="Este es un ejemplo de descripción de página para SEO.">
<meta name="keywords" content="ejemplo, SEO, HTML">
</head>
<body>
<h1>Título de la página</h1>
<p>Contenido de la página...</p>
</body>
</html>
10.4 Optimización de imágenes
La optimización de imágenes incluye el uso de atributos alt y title, así como garantizar tiempos de carga rápidos mediante la compresión y el uso de formatos de imagen modernos (como WebP).
Ejemplo de uso:
<body>
<h1>Ejemplo de optimización de imágenes</h1>
<img src="example.jpg" alt="Descripción de la imagen" title="Título de la imagen" loading="lazy">
</body>
10.5 Breadcrumbs
Breadcrumbs son elementos de navegación que muestran el camino del usuario desde la página principal hasta la página actual. Ayudan a los usuarios a navegar fácilmente por el sitio, proporcionando enlaces a niveles de navegación anteriores. Este elemento es una parte importante de la interfaz de usuario, especialmente para sitios grandes con una jerarquía de páginas profunda.
Aspectos clave de los breadcrumbs
Los breadcrumbs son una cadena de enlaces que normalmente se muestra en la parte superior de la página, debajo del encabezado o menú. Cada enlace en la cadena lleva a una de las páginas por las que el usuario pasó para llegar a la página actual.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/home">Inicio</a></li>
<li class="breadcrumb-item"><a href="/category">Categoría</a></li>
<li class="breadcrumb-item active" aria-current="page">Página actual</li>
</ol>
</nav>
Tipos de breadcrumbs:
- Jerárquicos: muestran la jerarquía del sitio, comenzando desde la página principal.
- Ejemplo: Inicio > Categoría > Subcategoría > Página actual
- Cronológicos: muestran la secuencia de acciones del usuario, especialmente útil en procesos de navegación o compras de varios pasos.
- Ejemplo: Inicio > Categoría > Producto > Carro > Checkout
- Atributivos: se utilizan para mostrar atributos o etiquetas de la página actual, especialmente útiles para sitios con muchas categorías y filtros.
- Ejemplo: Inicio > Electrónica > Teléfonos móviles > Smartphones > Apple
Beneficios de los breadcrumbs:
- Mejora de la navegación: permiten a los usuarios volver rápidamente a las páginas anteriores.
- Beneficios SEO: ayudan a los motores de búsqueda a comprender la estructura del sitio y mejorar su indexabilidad.
- Facilidad de uso: hacen que el sitio sea más intuitivo y fácil de usar.
- Reducción de la tasa de rebote: simplifican la navegación, lo que puede reducir la tasa de rebote, ya que los usuarios pueden regresar fácilmente a páginas anteriores sin salir del sitio.
Beneficios para SEO
Los breadcrumbs juegan un papel importante en SEO, ya que ayudan a los motores de búsqueda a entender mejor la estructura del sitio y mejoran la navegación para los usuarios. El uso correcto de los breadcrumbs puede tener un impacto positivo en el posicionamiento del sitio en los resultados de búsqueda.
GO TO FULL VERSION