Me encontraba ante esta pregunta, lo primero que hice fue googlear “La mejor estructura html 5 para el SEO y usabilidad en una landing page” con resultados del último año.
Obtuve resultados que me permitieron tener una visión global, no obstante tuve que visionar distintos enlaces, no encontré que uno respondiera a mi interrogante.
Los resultados más relevantes que tuve fue un vídeo en youtube del profesor AlexCG que en una modalidad taller levantaba un proyecto de landing page con las etiquetas principales, también di con un artículo “Domina el Arte de la Landing Page: Guía Definitiva” de Oliver Puente para terminar viendo “Cómo utilizar el HTML semántico (paso a paso)” de Hub Spot. Si bien pude tener una idea general del tema, tuve que ver varios para llegar a esto.
Ya había comenzado mi proyecto (que pronto verán) y recordé la IA (Inteligencia artificial) fui donde el querido o querida 🤔 Chat GPT a preguntarle con algo avanzado y el resultado fue preciso:
“La estructura de HTML5 para una landing page que sea buena para SEO y usabilidad debe ser semántica y organizada. Esto ayuda a los motores de búsqueda a entender mejor el contenido de la página y mejora la experiencia del usuario. Aquí tienes una estructura sugerida basada en las mejores prácticas de SEO y usabilidad:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<meta name="description" content="Descripción de la landing page para optimización SEO.">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<a href="#" class="brand"><img src="assets/img/logo.png" alt="Logo"></a>
<button class="navbar-toggler" type="button">
<i class="fas fa-bars"></i>
</button>
<div class="navbar-collapse collapse hide">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">link 1</a>
<a class="nav-link" href="#">link 2</a>
<a class="nav-link" href="#">link 3</a>
<a class="nav-link" href="#">link 4</a>
<a class="nav-link" href="#">link 5</a>
</div>
</div>
</nav>
<header>
<h1>Bienvenido a [Nombre del Servicio]</h1>
<p>[Breve descripción o lema atractivo]</p>
<a href="#cta" class="btn-cta">Call to Action</a>
</header>
<main>
<section id="">
<h2>Título</h2>
<p>[Descripción]</p>
</section>
<section id="">
<h2>Título</h2>
<p>[Descripción]</p>
</section>
<section id="portafolio">
<h2>Título</h2>
<p>[Descripción]</p>
</section>
<section id="">
<h2>Contacto</h2>
<p>[Información de contacto]</p>
<form action="#" method="POST">
<!-- Campos del formulario -->
</form>
</section>
</main>
<footer>
<p>2024[Nombre de la Empresa]. Todos los derechos reservados.</p>
<ul>
<li><a href="#">Política de privacidad</a></li>
<li><a href="#">Términos de servicio</a></li>
</ul>
</footer>
<script src="scripts.js"></script>
</body>
</html>
Finalmente tenía una estructura que me pareció llegaba a una conclusión general y como no encontré algo preciso en mi búsqueda inicial en Google pensé que lo mejor era compartirla para quienes estén en búsqueda de lo mismo en español, a la vez de la relevancia en la ayuda que brinda la Inteligencia Artificial y con un buen planteamiento obtienes un resultado que te permita ser más eficaz en tu trabajo.
Frente a este resultado, tenía la interrogante sobre la etiqueta Header y Nav, si era más conveniente o no que Nav estuviese dentro de Header o en qué orden, lo que me contestó fue que ambas opciones eran validas, tanto tener un Header que contuviera la presentación del sitio web o por convención llamado “Hero” o bien que estuviera el menú de navegación Nav dentro.