Fundamentos de SEO on-page en HTML

El SEO on-page (Search Engine Optimization) se refiere a todas las técnicas que podemos implementar directamente en nuestro código HTML para mejorar la visibilidad de nuestra página web en los motores de búsqueda. Estas optimizaciones ayudan a los buscadores a entender mejor el contenido y la estructura de nuestro sitio.

Elementos clave del SEO on-page

Título de la página

El elemento <title> es uno de los factores más importantes para el SEO on-page. Este elemento define el título que aparece en la pestaña del navegador y en los resultados de búsqueda.

<head>
    <title>Tienda de Guitarras Eléctricas | Instrumentos Musicales Madrid</title>
</head>

Un buen título debe:

Contener entre 50-60 caracteres
Incluir la palabra clave principal al inicio
Ser único para cada página
Describir con precisión el contenido

Meta descripción

Aunque no afecta directamente al posicionamiento, la meta descripción influye en la tasa de clics (CTR) ya que aparece en los resultados de búsqueda.

<head>
    <meta name="description" content="Amplio catálogo de guitarras eléctricas de las mejores marcas. Envío gratuito, garantía de 2 años y asesoramiento personalizado.">
</head>

Una meta descripción efectiva:

Tiene entre 150-160 caracteres
Incluye la palabra clave principal
Contiene una llamada a la acción
Resume el contenido de la página

Etiqueta canónica

Esta etiqueta ayuda a evitar contenido duplicado indicando a los buscadores cuál es la URL principal cuando existen varias páginas con contenido similar.

<head>
    <link rel="canonical" href="https://www.tiendaguitarras.com/productos/guitarras-electricas">
</head>

Estructura de contenido con etiquetas semánticas

Las etiquetas semánticas de HTML5 ayudan a los buscadores a entender la estructura y jerarquía del contenido:

<header>
    <h1>Guitarras Eléctricas Premium</h1>
</header>

<main>
    <article>
        <h2>Modelos Stratocaster</h2>
        <p>Las guitarras tipo Stratocaster se caracterizan por...</p>
        
        <section>
            <h3>Características principales</h3>
            <!-- Contenido -->
        </section>
    </article>
</main>

<footer>
    <p>© 2023 Tienda de Guitarras</p>
</footer>

Utilizar etiquetas como <header>, <main>, <article>, <section> y <footer> mejora la comprensión del contenido por parte de los buscadores.

Optimización de enlaces internos

Los enlaces internos ayudan a distribuir la autoridad entre las páginas de tu sitio y mejoran la navegación:

<p>Descubre nuestra <a href="/productos/amplificadores" title="Amplificadores para guitarra">selección de amplificadores</a> que complementan perfectamente nuestras guitarras.</p>

Aspectos importantes:

Usar texto ancla descriptivo (evitar "haz clic aquí")
Incluir el atributo title con información relevante
Enlazar a contenido relacionado
Mantener una estructura lógica de navegación

Optimización de velocidad con atributos HTML

La velocidad de carga es un factor de posicionamiento importante. Algunos atributos HTML pueden ayudar:

<!-- Carga diferida de imágenes -->
<img src="guitarra-premium.jpg" alt="Guitarra eléctrica Stratocaster roja" loading="lazy">

<!-- Precarga de recursos críticos -->
<link rel="preload" href="estilos-criticos.css" as="style">

El atributo loading="lazy" permite que las imágenes se carguen solo cuando el usuario se acerca a ellas durante el desplazamiento, mejorando el tiempo de carga inicial.

Datos estructurados (Schema.org)

Los datos estructurados ayudan a los buscadores a entender mejor el contenido y pueden generar resultados enriquecidos:

<div itemscope itemtype="https://schema.org/Product">
    <h1 itemprop="name">Guitarra Eléctrica Modelo Pro</h1>
    <img itemprop="image" src="guitarra-pro.jpg" alt="Guitarra Eléctrica Modelo Pro">
    
    <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
        <span itemprop="price">599.99</span>
        <meta itemprop="priceCurrency" content="EUR">
        <link itemprop="availability" href="https://schema.org/InStock">En stock
    </div>
    
    <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
        <span itemprop="ratingValue">4.8</span>/5 basado en 
        <span itemprop="reviewCount">24</span> opiniones
    </div>
</div>

Optimización de contenido visible

El contenido visible en la primera pantalla (above the fold) debe cargarse prioritariamente:

<!-- Estilos críticos inline para el contenido visible -->
<style>
    /* Estilos críticos para el contenido visible */
    .hero-section {
        display: flex;
        min-height: 60vh;
        background-color: #f5f5f5;
    }
</style>

<!-- Carga diferida de estilos no críticos -->
<link rel="stylesheet" href="estilos-completos.css" media="print" onload="this.media='all'">

Esta técnica permite que los estilos críticos se carguen inmediatamente mientras que los estilos no esenciales se cargan de forma asíncrona.

Atributos de idioma

Especificar el idioma de la página ayuda a los buscadores a indexar correctamente el contenido:

<html lang="es">
    <!-- Contenido en español -->
    
    <div lang="en">
        <!-- Contenido en inglés dentro de la página -->
    </div>
</html>

Optimización para móviles

La adaptabilidad a dispositivos móviles es un factor crucial para el SEO:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Esta meta etiqueta asegura que la página se visualice correctamente en dispositivos móviles, lo que es esencial para el posicionamiento ya que Google utiliza principalmente la versión móvil para indexar y clasificar.

Tiempo de permanencia y experiencia de usuario

El HTML bien estructurado mejora la experiencia de usuario, lo que indirectamente beneficia al SEO:

<!-- Tabla de contenidos para artículos largos -->
<nav class="table-of-contents">
    <h4>Contenido del artículo:</h4>
    <ul>
        <li><a href="#seccion1">Historia de las guitarras eléctricas</a></li>
        <li><a href="#seccion2">Tipos de pastillas</a></li>
        <li><a href="#seccion3">Maderas y su influencia en el sonido</a></li>
    </ul>
</nav>

<article>
    <section id="seccion1">
        <h2>Historia de las guitarras eléctricas</h2>
        <!-- Contenido -->
    </section>
    
    <!-- Más secciones -->
</article>

Una tabla de contenidos facilita la navegación en artículos extensos, mejorando la experiencia del usuario y aumentando el tiempo de permanencia.

El SEO on-page en HTML es un conjunto de prácticas técnicas que, implementadas correctamente, pueden mejorar significativamente la visibilidad de tu sitio web en los motores de búsqueda. Estas optimizaciones deben complementarse con contenido de calidad y una estrategia de SEO off-page para obtener los mejores resultados.

¿Te está gustando esta lección?

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado

Asistente IA

Ejercicios

Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

Estructura jerárquica y uso de encabezados

La estructura jerárquica de una página web es fundamental para el SEO, ya que ayuda a los motores de búsqueda a entender la organización y la importancia relativa del contenido. Los encabezados HTML (<h1> a <h6>) son elementos clave para crear esta jerarquía.

Importancia de la jerarquía de encabezados

Los encabezados HTML no solo mejoran la legibilidad para los usuarios, sino que también proporcionan a los buscadores información valiosa sobre:

La estructura del contenido
Los temas principales y subtemas
La relación entre diferentes secciones

Google y otros motores de búsqueda utilizan estos encabezados para comprender de qué trata cada página y determinar su relevancia para determinadas consultas de búsqueda.

Implementación correcta de encabezados

La estructura de encabezados debe seguir un orden lógico y jerárquico:

<h1>Título principal de la página</h1>
  <h2>Sección importante 1</h2>
    <h3>Subsección 1.1</h3>
    <h3>Subsección 1.2</h3>
  <h2>Sección importante 2</h2>
    <h3>Subsección 2.1</h3>
      <h4>Tema específico dentro de 2.1</h4>
    <h3>Subsección 2.2</h3>

Cada página debe tener un único <h1> que represente el tema principal de la página. Los encabezados subsiguientes (<h2>, <h3>, etc.) deben utilizarse para crear una estructura anidada que refleje la jerarquía del contenido.

Mejores prácticas para encabezados SEO

1. Usar un único H1 por página

El encabezado H1 debe reflejar el tema principal de la página y contener la palabra clave principal:

<!-- Correcto -->
<h1>Guía completa de fotografía digital para principiantes</h1>

<!-- Incorrecto: múltiples H1 -->
<h1>Guía de fotografía</h1>
<!-- Contenido -->
<h1>Para principiantes</h1>

2. Mantener una estructura lógica

Los encabezados deben seguir una progresión natural sin saltar niveles:

<!-- Correcto -->
<h1>Técnicas de edición fotográfica</h1>
  <h2>Ajuste de exposición</h2>
    <h3>Corrección de subexposición</h3>
    <h3>Corrección de sobreexposición</h3>
  <h2>Balance de blancos</h2>
    <h3>Ajustes para luz natural</h3>
    <h3>Ajustes para luz artificial</h3>

<!-- Incorrecto: salto de niveles -->
<h1>Técnicas de edición fotográfica</h1>
  <h2>Ajuste de exposición</h2>
    <h4>Corrección de subexposición</h4> <!-- Falta el h3 -->

3. Incluir palabras clave relevantes

Incorpora palabras clave secundarias en los encabezados H2 y H3, pero de forma natural:

<h1>Cámaras DSLR para fotografía profesional</h1>
  <h2>Mejores cámaras DSLR para retratos</h2>
  <h2>Cámaras DSLR económicas para principiantes</h2>
  <h2>Accesorios esenciales para cámaras DSLR</h2>
    <h3>Objetivos versátiles para fotografía de paisaje</h3>
    <h3>Flashes externos para mejorar la iluminación</h3>

4. Mantener encabezados concisos y descriptivos

Los encabezados deben ser claros y directos, idealmente entre 20-70 caracteres:

<!-- Correcto -->
<h2>Técnicas avanzadas de composición fotográfica</h2>

<!-- Demasiado largo -->
<h2>Las mejores técnicas avanzadas de composición fotográfica que todo fotógrafo profesional debería conocer y aplicar en sus sesiones para conseguir resultados impresionantes</h2>

5. Usar encabezados para estructurar el contenido extenso

En artículos largos, los encabezados ayudan a dividir el contenido en secciones digeribles:

<article>
  <h1>Guía completa de SEO técnico</h1>
  
  <h2>Optimización de velocidad de carga</h2>
    <p>La velocidad de carga es un factor crucial...</p>
    
    <h3>Compresión de imágenes</h3>
    <p>Reducir el tamaño de las imágenes sin perder calidad...</p>
    
    <h3>Minificación de CSS y JavaScript</h3>
    <p>La minificación elimina caracteres innecesarios...</p>
  
  <h2>Estructura de URLs amigables</h2>
    <p>Las URLs deben ser descriptivas y fáciles de entender...</p>
</article>

Análisis de estructura jerárquica con herramientas

Para visualizar y analizar la estructura jerárquica de una página, podemos utilizar herramientas como la extensión "Headings Map" para Chrome o Firefox, que muestra el esquema de encabezados:

H1: Guía completa de SEO técnico
  H2: Optimización de velocidad de carga
    H3: Compresión de imágenes
    H3: Minificación de CSS y JavaScript
  H2: Estructura de URLs amigables

Esta visualización nos permite detectar problemas como:

Falta de encabezado H1
Saltos en la jerarquía
Múltiples H1
Estructura desequilibrada

Encabezados y contenido semántico

Los encabezados funcionan mejor cuando se combinan con elementos semánticos de HTML5:

<main>
  <h1>Fotografía de paisajes: guía completa</h1>
  
  <section>
    <h2>Equipo recomendado</h2>
    <!-- Contenido sobre equipo -->
  </section>
  
  <section>
    <h2>Técnicas de composición</h2>
    
    <article>
      <h3>La regla de los tercios</h3>
      <!-- Contenido sobre la regla de los tercios -->
    </article>
    
    <article>
      <h3>Líneas principales</h3>
      <!-- Contenido sobre líneas principales -->
    </article>
  </section>
</main>

Esta combinación de encabezados con elementos semánticos proporciona a los motores de búsqueda una comprensión más profunda de la estructura y el propósito de cada sección.

Encabezados y experiencia de usuario

Una buena estructura de encabezados no solo beneficia al SEO, sino también a la experiencia del usuario:

Facilita el escaneo rápido del contenido
Ayuda a los usuarios a encontrar información específica
Mejora la accesibilidad para personas que utilizan lectores de pantalla
Reduce la tasa de rebote al hacer el contenido más digerible

<h2>Índice de contenidos</h2>
<nav class="table-of-contents">
  <ul>
    <li><a href="#equipo">Equipo recomendado</a></li>
    <li><a href="#tecnicas">Técnicas de composición</a>
      <ul>
        <li><a href="#tercios">La regla de los tercios</a></li>
        <li><a href="#lineas">Líneas principales</a></li>
      </ul>
    </li>
  </ul>
</nav>

<section id="equipo">
  <h2>Equipo recomendado</h2>
  <!-- Contenido -->
</section>

<section id="tecnicas">
  <h2>Técnicas de composición</h2>
  
  <article id="tercios">
    <h3>La regla de los tercios</h3>
    <!-- Contenido -->
  </article>
</section>

Errores comunes a evitar

Usar encabezados solo por estilo: Los encabezados deben reflejar la estructura del contenido, no usarse simplemente para hacer el texto más grande.

<!-- Incorrecto: usar H2 solo para estilo -->
<h2 class="destacado">Este texto solo necesita destacar</h2>

<!-- Correcto: usar CSS para destacar sin afectar la semántica -->
<p class="destacado">Este texto solo necesita destacar</p>

Encabezados vacíos o con poco contenido: Cada sección encabezada debe tener contenido sustancial.
Encabezados demasiado similares: Evita tener múltiples encabezados con el mismo texto o muy similar.

<!-- Problemático: encabezados muy similares -->
<h2>Ventajas de las cámaras mirrorless</h2>
<!-- Contenido -->
<h2>Beneficios de las cámaras mirrorless</h2>
<!-- Más contenido similar -->

Ignorar la jerarquía por razones estéticas: No elijas el nivel de encabezado basándote en cómo se ve, sino en su posición jerárquica.

Una estructura jerárquica bien implementada con encabezados HTML apropiados es uno de los fundamentos más importantes del SEO on-page. Esta estructura no solo ayuda a los motores de búsqueda a entender y valorar tu contenido, sino que también mejora significativamente la experiencia del usuario, lo que indirectamente beneficia tu posicionamiento.

URLs amigables y texto alternativo en imágenes

Las URLs amigables y el texto alternativo en imágenes son dos elementos fundamentales para el SEO on-page que mejoran tanto la experiencia de usuario como la capacidad de los motores de búsqueda para entender y clasificar correctamente nuestro contenido.

URLs amigables para SEO

Las URLs amigables (también llamadas URLs semánticas o URLs limpias) son direcciones web estructuradas de manera que sean fáciles de leer y entender tanto para usuarios como para buscadores. Una URL bien optimizada puede mejorar significativamente el posicionamiento de una página.

Características de una URL amigable

Descriptiva: Indica claramente el contenido de la página
Corta: Preferiblemente menos de 60 caracteres
Legible: Utiliza palabras en lugar de números o códigos
Con palabras clave: Incluye términos relevantes para el contenido
Sin caracteres especiales: Evita símbolos, acentos o espacios

Comparemos estos ejemplos:

# URL no amigable
https://www.tiendadeportiva.com/p=1328&cat=45&s=3

# URL amigable
https://www.tiendadeportiva.com/zapatillas-running/nike-air-zoom

La segunda URL es mucho más descriptiva y permite tanto a usuarios como a buscadores entender el contenido de la página antes de visitarla.

Implementación de URLs amigables en HTML

Aunque la estructura de URLs se configura principalmente en el servidor o CMS, en HTML podemos asegurarnos de que todos los enlaces internos utilicen URLs amigables:

<!-- Enlaces con URLs amigables -->
<nav>
  <ul>
    <li><a href="/productos/calzado/zapatillas-running">Zapatillas running</a></li>
    <li><a href="/productos/ropa/camisetas-tecnicas">Camisetas técnicas</a></li>
    <li><a href="/blog/consejos-entrenamiento">Consejos de entrenamiento</a></li>
  </ul>
</nav>

Estructura jerárquica en URLs

Es recomendable que las URLs reflejen la estructura jerárquica del sitio:

https://www.tiendadeportiva.com/productos/calzado/zapatillas/trail/

Esta estructura ayuda a los motores de búsqueda a entender la relación entre las diferentes secciones del sitio y mejora la navegabilidad para los usuarios.

URLs canónicas

Cuando tenemos varias URLs que pueden mostrar el mismo contenido, debemos indicar cuál es la versión principal mediante la etiqueta canónica:

<head>
  <link rel="canonical" href="https://www.tiendadeportiva.com/zapatillas-running/nike-air-zoom">
</head>

Esto evita problemas de contenido duplicado que pueden perjudicar el SEO.

Redirecciones para URLs cambiadas

Si cambiamos la estructura de URLs, es crucial implementar redirecciones 301 (permanentes) desde las antiguas a las nuevas. Aunque esto se configura en el servidor, podemos verificar que funcionen correctamente con herramientas como Lighthouse o GTmetrix.

Texto alternativo en imágenes

El atributo alt en las imágenes es uno de los elementos más importantes para la accesibilidad web y el SEO de imágenes. Este texto alternativo describe el contenido de la imagen para:

Usuarios con discapacidad visual que utilizan lectores de pantalla
Situaciones donde la imagen no puede cargarse
Motores de búsqueda que no pueden "ver" las imágenes

Implementación correcta del atributo alt

<img src="zapatillas-nike-pegasus-38.jpg" alt="Zapatillas Nike Pegasus 38 azules para running en asfalto">

Un buen texto alternativo debe:

Ser descriptivo y específico
Incluir palabras clave relevantes de forma natural
Tener una longitud adecuada (generalmente entre 5-15 palabras)
Evitar comenzar con frases como "imagen de" o "foto de"
Describir la función de la imagen si es un botón o tiene un propósito interactivo

Ejemplos de textos alternativos efectivos

Para una imagen de producto:

<img src="monitor-gaming.jpg" alt="Monitor gaming LG UltraGear 27 pulgadas 144Hz 4K HDR">

Para una imagen decorativa que no aporta información:

<img src="separador-decorativo.png" alt="">

Para una imagen que contiene texto importante:

<img src="grafico-estadisticas-2023.jpg" alt="Gráfico de barras mostrando el aumento del 37% en ventas online durante 2023">

Para una imagen que funciona como enlace:

<img src="icono-carrito.svg" alt="Añadir al carrito de compra">

Optimización avanzada de imágenes para SEO

Además del atributo alt, podemos mejorar el SEO de imágenes con:

Nombres de archivo descriptivos: Usar palabras clave separadas por guiones.

<!-- Mejor nombre de archivo -->
<img src="zapatillas-running-nike-pegasus-38.jpg" alt="Zapatillas Nike Pegasus 38 para running">

<!-- Nombre de archivo poco descriptivo -->
<img src="IMG00123.jpg" alt="Zapatillas Nike Pegasus 38 para running">

Atributo title: Proporciona información adicional al pasar el cursor sobre la imagen.

<img src="zapatillas-running-nike-pegasus-38.jpg" 
     alt="Zapatillas Nike Pegasus 38 para running" 
     title="Nike Pegasus 38 - Disponibles en tallas 40 a 46">

Etiqueta figcaption: Añade un pie de foto visible que complementa el texto alternativo.

<figure>
  <img src="tecnica-estiramiento.jpg" alt="Demostración de estiramiento de cuádriceps de pie">
  <figcaption>Estiramiento de cuádriceps recomendado antes de correr</figcaption>
</figure>

Lazy loading: Mejora el rendimiento de la página cargando las imágenes solo cuando son visibles.

<img src="imagen-producto.jpg" 
     alt="Bicicleta de montaña Trek Marlin 7 2023" 
     loading="lazy">

Texto alternativo y Schema.org

Podemos combinar el texto alternativo con marcado de datos estructurados para proporcionar información aún más detallada a los buscadores:

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Nike Pegasus 38</h1>
  <img itemprop="image" src="nike-pegasus-38.jpg" 
       alt="Zapatillas running Nike Pegasus 38 color azul">
  <div itemprop="description">
    Zapatillas de running para asfalto con amortiguación reactiva...
  </div>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">129.95</span>
    <meta itemprop="priceCurrency" content="EUR">
  </div>
</div>

Herramientas para verificar URLs y textos alternativos

Existen diversas herramientas que nos ayudan a verificar la correcta implementación de URLs amigables y textos alternativos:

Google Search Console: Identifica problemas con URLs y sugiere mejoras
Screaming Frog: Analiza la estructura de URLs y detecta imágenes sin atributo alt
WAVE (Web Accessibility Evaluation Tool): Evalúa la accesibilidad, incluyendo textos alternativos
Lighthouse: Incluye auditorías de SEO y accesibilidad

Impacto en el SEO y la experiencia de usuario

Tanto las URLs amigables como los textos alternativos bien implementados tienen un impacto positivo en:

Posicionamiento en buscadores: Mejoran la relevancia para palabras clave específicas
CTR (Click-Through Rate): Las URLs descriptivas aumentan la probabilidad de clic en resultados de búsqueda
Accesibilidad: Permiten que más usuarios accedan al contenido
Experiencia de usuario: Facilitan la navegación y comprensión del contenido
Indexación de imágenes: Aumentan la visibilidad en la búsqueda de imágenes de Google

Errores comunes a evitar

URLs demasiado largas con muchos parámetros o categorías anidadas
Textos alternativos genéricos o idénticos para múltiples imágenes
Keyword stuffing en URLs o textos alternativos
Omitir el atributo alt en imágenes importantes
No actualizar los textos alternativos cuando cambia el contenido de la imagen

La optimización de URLs y textos alternativos son aspectos fundamentales del SEO técnico que, aunque pueden parecer detalles menores, tienen un impacto significativo en la visibilidad de nuestro sitio web y en la experiencia de todos los usuarios, independientemente de sus capacidades o limitaciones.

Sitemap, robots.txt y metaetiquetas para buscadores

Los motores de búsqueda necesitan herramientas específicas para rastrear e indexar eficientemente nuestros sitios web. Los sitemaps, el archivo robots.txt y las metaetiquetas específicas para buscadores son elementos técnicos fundamentales que facilitan esta comunicación entre nuestro sitio y los buscadores.

Sitemaps XML

Un sitemap es un archivo XML que proporciona a los motores de búsqueda una lista organizada de todas las páginas de nuestro sitio web que deseamos que sean indexadas. Funciona como un mapa que guía a los rastreadores de los buscadores a través de la estructura de nuestro sitio.

Estructura básica de un sitemap

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.ejemplo.com/</loc>
    <lastmod>2023-11-15</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.ejemplo.com/productos/</loc>
    <lastmod>2023-11-10</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://www.ejemplo.com/contacto/</loc>
    <lastmod>2023-10-25</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

Cada entrada <url> contiene:

loc: URL completa de la página (obligatorio)
lastmod: Fecha de última modificación en formato YYYY-MM-DD
changefreq: Frecuencia estimada de actualización (daily, weekly, monthly...)
priority: Importancia relativa de la URL dentro del sitio (0.0 a 1.0)

Sitemaps para sitios grandes

Para sitios con más de 50,000 URLs o archivos mayores a 50MB, es recomendable crear múltiples sitemaps y un índice de sitemaps:

<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://www.ejemplo.com/sitemaps/productos.xml</loc>
    <lastmod>2023-11-15</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://www.ejemplo.com/sitemaps/categorias.xml</loc>
    <lastmod>2023-11-12</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://www.ejemplo.com/sitemaps/blog.xml</loc>
    <lastmod>2023-11-14</lastmod>
  </sitemap>
</sitemapindex>

Tipos especiales de sitemaps

Además del sitemap estándar, existen formatos específicos para diferentes tipos de contenido:

Sitemap de imágenes:

<url>
  <loc>https://www.ejemplo.com/producto/camara-digital</loc>
  <image:image>
    <image:loc>https://www.ejemplo.com/imagenes/camara-frontal.jpg</image:loc>
    <image:title>Cámara digital Sony Alpha 7 IV</image:title>
    <image:caption>Vista frontal de la cámara Sony Alpha 7 IV</image:caption>
  </image:image>
</url>

Sitemap de vídeos:

<url>
  <loc>https://www.ejemplo.com/tutoriales/edicion-fotos</loc>
  <video:video>
    <video:thumbnail_loc>https://www.ejemplo.com/thumbs/tutorial-edicion.jpg</video:thumbnail_loc>
    <video:title>Tutorial de edición fotográfica profesional</video:title>
    <video:description>Aprende técnicas avanzadas de edición en Photoshop</video:description>
    <video:content_loc>https://www.ejemplo.com/videos/tutorial-edicion.mp4</video:content_loc>
    <video:duration>360</video:duration>
  </video:video>
</url>

Implementación del sitemap

Para que los buscadores encuentren nuestro sitemap, podemos:

Incluirlo en robots.txt:

User-agent: *
Allow: /
Sitemap: https://www.ejemplo.com/sitemap.xml

Enviarlo directamente a Google Search Console y Bing Webmaster Tools
Enlazarlo en el HTML (menos común pero válido):

<a href="https://www.ejemplo.com/sitemap.xml">Sitemap XML</a>

Archivo robots.txt

El archivo robots.txt es un documento de texto que se coloca en la raíz del sitio web para indicar a los rastreadores de los motores de búsqueda qué partes del sitio pueden o no pueden rastrear e indexar.

Estructura básica de robots.txt

User-agent: *
Allow: /
Disallow: /privado/
Disallow: /admin/
Disallow: /checkout/

User-agent: Especifica a qué rastreador se aplican las reglas (el asterisco indica todos)
Allow: Indica las rutas que pueden ser rastreadas
Disallow: Indica las rutas que no deben ser rastreadas

Ejemplos de configuraciones comunes

Bloquear un rastreador específico:

User-agent: Googlebot-Image
Disallow: /imagenes/privadas/

Permitir todo excepto archivos específicos:

User-agent: *
Allow: /
Disallow: /*.pdf$

Bloquear todo el sitio (útil para entornos de desarrollo):

User-agent: *
Disallow: /

Especificar el tiempo entre solicitudes (para evitar sobrecarga):

User-agent: Googlebot
Crawl-delay: 10

Limitaciones importantes

Es crucial entender que robots.txt:

No es una medida de seguridad - solo es una sugerencia para los buscadores
No impide que una página sea indexada si otros sitios enlazan a ella
No oculta la URL - solo evita el rastreo del contenido

Para evitar completamente la indexación, es necesario usar metaetiquetas específicas.

Metaetiquetas para buscadores

Las metaetiquetas son elementos HTML que proporcionan información adicional sobre una página web a los motores de búsqueda. Algunas de las más importantes para SEO son:

Meta robots

Esta etiqueta controla cómo los motores de búsqueda deben tratar una página específica:

<meta name="robots" content="index, follow">

Valores comunes para el atributo content:

index/noindex: Permite o prohíbe la indexación de la página
follow/nofollow: Permite o prohíbe seguir los enlaces de la página
noarchive: Evita que se guarde una versión en caché
nosnippet: Evita mostrar fragmentos en los resultados de búsqueda
max-snippet: Limita la longitud del fragmento en resultados

Ejemplos de uso:

<!-- No indexar pero seguir enlaces -->
<meta name="robots" content="noindex, follow">

<!-- No indexar ni seguir enlaces -->
<meta name="robots" content="noindex, nofollow">

<!-- Indexar pero no mostrar en caché -->
<meta name="robots" content="index, noarchive">

<!-- Limitar el fragmento a 150 caracteres -->
<meta name="robots" content="max-snippet:150">

También podemos dirigirnos a buscadores específicos:

<meta name="googlebot" content="noindex">
<meta name="bingbot" content="index, follow">

Meta viewport

Aunque principalmente afecta a la visualización en dispositivos móviles, es crucial para SEO ya que Google utiliza la versión móvil para indexar:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Open Graph y Twitter Cards

Estas metaetiquetas mejoran la apariencia cuando se comparte el contenido en redes sociales, lo que indirectamente beneficia al SEO:

<!-- Open Graph (Facebook) -->
<meta property="og:title" content="Guía completa de fotografía digital">
<meta property="og:description" content="Aprende técnicas profesionales de fotografía digital con nuestra guía actualizada.">
<meta property="og:image" content="https://www.ejemplo.com/imagenes/guia-fotografia.jpg">
<meta property="og:url" content="https://www.ejemplo.com/guia-fotografia">
<meta property="og:type" content="article">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Guía completa de fotografía digital">
<meta name="twitter:description" content="Aprende técnicas profesionales de fotografía digital con nuestra guía actualizada.">
<meta name="twitter:image" content="https://www.ejemplo.com/imagenes/guia-fotografia.jpg">

Metaetiqueta hreflang

Esta etiqueta indica a los motores de búsqueda qué versión de una página mostrar según el idioma o región del usuario:

<link rel="alternate" hreflang="es" href="https://www.ejemplo.com/es/pagina">
<link rel="alternate" hreflang="en" href="https://www.ejemplo.com/en/page">
<link rel="alternate" hreflang="fr" href="https://www.ejemplo.com/fr/page">
<link rel="alternate" hreflang="x-default" href="https://www.ejemplo.com/international">

El atributo x-default indica la versión a mostrar cuando ninguna de las otras coincide con la configuración del usuario.

Implementación práctica: Integrando las tres herramientas

Para un sitio web completo, estas tres herramientas deben trabajar en conjunto:

Ejemplo de estructura de archivos

www.ejemplo.com/
├── index.html (con metaetiquetas apropiadas)
├── robots.txt
├── sitemap.xml
└── ...otros archivos y carpetas

Página HTML con metaetiquetas optimizadas

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Tienda de Cámaras Fotográficas Profesionales</title>
  <meta name="description" content="Amplio catálogo de cámaras fotográficas profesionales con envío gratuito y garantía oficial.">
  
  <!-- Metaetiquetas para buscadores -->
  <meta name="robots" content="index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Canonical -->
  <link rel="canonical" href="https://www.ejemplo.com/camaras-fotograficas">
  
  <!-- Hreflang para versiones en otros idiomas -->
  <link rel="alternate" hreflang="es" href="https://www.ejemplo.com/camaras-fotograficas">
  <link rel="alternate" hreflang="en" href="https://www.ejemplo.com/en/cameras">
  
  <!-- Open Graph -->
  <meta property="og:title" content="Tienda de Cámaras Fotográficas Profesionales">
  <meta property="og:description" content="Amplio catálogo de cámaras fotográficas profesionales con envío gratuito y garantía oficial.">
  <meta property="og:image" content="https://www.ejemplo.com/img/tienda-camaras.jpg">
  <meta property="og:url" content="https://www.ejemplo.com/camaras-fotograficas">
  <meta property="og:type" content="website">
</head>
<body>
  <!-- Contenido de la página -->
</body>
</html>

Archivo robots.txt correspondiente

User-agent: *
Allow: /
Disallow: /admin/
Disallow: /checkout/
Disallow: /carrito/
Disallow: /usuario/datos/

# Bloquear imágenes en alta resolución
User-agent: Googlebot-Image
Disallow: /img/alta-resolucion/

# Indicar ubicación del sitemap
Sitemap: https://www.ejemplo.com/sitemap.xml

Verificación y monitorización

Una vez implementados estos elementos, es importante:

Verificar la sintaxis del sitemap y robots.txt con herramientas como:

Monitorizar el rendimiento para detectar problemas:

Comprobar qué páginas están siendo indexadas
Verificar si hay errores de rastreo relacionados con robots.txt
Analizar si las metaetiquetas están funcionando correctamente

Errores comunes a evitar

Bloquear recursos CSS y JavaScript en robots.txt, lo que puede afectar negativamente al renderizado
No actualizar el sitemap cuando se añaden o eliminan páginas
Usar noindex en páginas bloqueadas por robots.txt (los buscadores no verán la etiqueta)
Configuraciones contradictorias entre robots.txt y metaetiquetas
Olvidar incluir el protocolo (http/https) en las URLs del sitemap

Consideraciones para sitios dinámicos

Para sitios que generan contenido dinámicamente:

Generar sitemaps automáticamente cuando el contenido cambia
Implementar reglas de robots.txt que tengan en cuenta parámetros de URL
Usar metaetiquetas programáticamente según el tipo de contenido

<?php
// Ejemplo en PHP para generar metaetiquetas dinámicamente
if ($pagina_tipo == 'producto') {
  echo '<meta name="robots" content="index, follow">';
} elseif ($pagina_tipo == 'filtro_busqueda') {
  echo '<meta name="robots" content="noindex, follow">';
}
?>

La combinación efectiva de sitemaps, robots.txt y metaetiquetas proporciona a los motores de búsqueda una guía clara sobre cómo rastrear e indexar nuestro sitio web. Estos elementos técnicos, aunque no son visibles para los usuarios finales, son fundamentales para asegurar que nuestro contenido sea descubierto y presentado correctamente en los resultados de búsqueda.

Aprendizajes de esta lección

Comprender los elementos clave del SEO on-page en HTML, como títulos, meta descripciones y etiquetas canónicas.
Aprender a estructurar correctamente el contenido mediante encabezados y etiquetas semánticas para optimizar la jerarquía y legibilidad.
Conocer la importancia de URLs amigables y la correcta implementación del texto alternativo en imágenes para SEO y accesibilidad.
Entender el uso y configuración de sitemaps XML, archivo robots.txt y metaetiquetas para facilitar el rastreo e indexación por motores de búsqueda.
Identificar buenas prácticas y errores comunes en la implementación técnica del SEO on-page para mejorar la experiencia de usuario y el posicionamiento.

Completa HTML y certifícate

Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Comenzar gratis

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐

4.9/5 valoración

Introducción al SEO

Fundamentos de SEO on-page en HTML

Elementos clave del SEO on-page

Título de la página

Meta descripción

Etiqueta canónica

Estructura de contenido con etiquetas semánticas

Optimización de enlaces internos

Optimización de velocidad con atributos HTML

Datos estructurados (Schema.org)

Optimización de contenido visible

Atributos de idioma

Optimización para móviles

Tiempo de permanencia y experiencia de usuario

¿Te está gustando esta lección?

Estructura jerárquica y uso de encabezados

Importancia de la jerarquía de encabezados

Implementación correcta de encabezados

Mejores prácticas para encabezados SEO

1. Usar un único H1 por página

2. Mantener una estructura lógica

3. Incluir palabras clave relevantes

4. Mantener encabezados concisos y descriptivos

5. Usar encabezados para estructurar el contenido extenso

Análisis de estructura jerárquica con herramientas

Encabezados y contenido semántico

Encabezados y experiencia de usuario

Errores comunes a evitar

URLs amigables y texto alternativo en imágenes

URLs amigables para SEO

Características de una URL amigable

Implementación de URLs amigables en HTML

Estructura jerárquica en URLs

URLs canónicas

Redirecciones para URLs cambiadas

Texto alternativo en imágenes

Implementación correcta del atributo alt

Ejemplos de textos alternativos efectivos

Optimización avanzada de imágenes para SEO

Texto alternativo y Schema.org

Herramientas para verificar URLs y textos alternativos

Impacto en el SEO y la experiencia de usuario

Errores comunes a evitar

Sitemap, robots.txt y metaetiquetas para buscadores

Sitemaps XML

Estructura básica de un sitemap

Sitemaps para sitios grandes

Tipos especiales de sitemaps

Implementación del sitemap

Archivo robots.txt

Estructura básica de robots.txt

Ejemplos de configuraciones comunes

Limitaciones importantes

Metaetiquetas para buscadores

Meta robots

Meta viewport

Open Graph y Twitter Cards

Metaetiqueta hreflang

Implementación práctica: Integrando las tres herramientas

Ejemplo de estructura de archivos

Página HTML con metaetiquetas optimizadas

Archivo robots.txt correspondiente

Verificación y monitorización

Errores comunes a evitar

Consideraciones para sitios dinámicos

Aprendizajes de esta lección

Completa HTML y certifícate

Asistente IA

Ejercicios

Certificados