Portafolio profesional con HTML semántico y SEO

Resumen

Construye un portafolio profesional con HTML semántico, accesibilidad con ARIA y SEO listo para compartir cuando busques trabajo. La guía resume cómo organizar la estructura, los metadatos y la navegación para presentar proyectos, descargar tu CV y optimizar tu presencia en redes sociales.

¿Qué incluye el proyecto final de portafolio HTML semántico y SEO?

Este proyecto es tu perfil personal: una página estática con secciones claras, navegación accesible y metadatos bien configurados. La idea es personalizarlo con tu contenido, no solo copiar y pegar.

Datos esenciales en el head: título, descripción y codificación.
SEO básico: metadatos y estructura semántica comprensible por buscadores.
“Orphan graphs” para redes sociales y graphs para Twitter, hoy aún llamado Twitter.
URLs canónicas para evitar contenido duplicado.
Favicons para identidad visual en pestañas y dispositivos.

¿Qué metadatos SEO, canonical y favicons configurar?

Configura atributos mínimos en el head para buscadores y navegadores.

<head>
  <meta charset="utf-8" />
  <title>Mi perfil personal</title>
  <meta name="description" content="Portafolio de proyectos y experiencia." />
  <link rel="canonical" href="https://midominio.com/" />
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="icon" href="/icon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>

¿Cómo añadir graphs para redes sociales y Twitter?

Incluye metadatos para compartir correctamente en redes y en Twitter.

<!-- graphs para redes sociales -->
<meta property="og:title" content="Mi portafolio" />
<meta property="og:description" content="Proyectos destacados y experiencia." />
<meta property="og:image" content="https://midominio.com/cover.jpg" />
<meta property="og:url" content="https://midominio.com/" />

<!-- graphs para Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Mi portafolio" />
<meta name="twitter:description" content="Proyectos y CV para descarga." />
<meta name="twitter:image" content="https://midominio.com/cover.jpg" />

¿Cómo estructurar el header, navegación y CTA con ARIA?

El header superior integra logotipo/ícono, tu nombre y el título de la página (por ejemplo, “Mi portafolio”). La navegación principal usa ARIA para mejorar la accesibilidad con lectores de software. Incluye acciones rápidas como la descarga de tu CV.

¿Cómo usar el atributo download y aria-label en enlaces?

Permite que el CV se descargue directo con un enlace accesible.

<nav aria-label="Navegación principal">
  <a href="/docs/CV.pdf" download aria-label="Descarga el CV en PDF">Descargar CV</a>
</nav>

¿Cómo preparar un selector de idioma con JavaScript?

El selector se maqueta ahora y se habilita después con JavaScript para traducir contenido.

<label for="lang" aria-label="Cambiar idioma">Idioma</label>
<select id="lang" name="lang" aria-controls="contenido">
  <option value="es">Español</option>
  <option value="en">English</option>
</select>

¿Cómo organizar el main, hero y enlaces internos en una landing?

El contenido principal vive en el elemento semántico main. El hero presenta mensajes y call to action. Además, puedes mover al usuario a secciones específicas de la misma landing usando IDs en enlaces.

¿Cómo enlazar secciones con IDs en una landing?

Crea anclas internas que desplacen a áreas como “Proyectos destacados”.

<main role="main">
  <section aria-label="Hero">
    <a href="#proyectos-destacados">Ver mis proyectos</a>
  </section>

  <section id="proyectos-destacados" aria-label="Proyectos destacados">
    <!-- Tarjetas de proyectos -->
  </section>
</main>

Usa el atributo id en la sección destino.
Enlaza con href="#id" para el desplazamiento interno.
Mantén los CTA claros y descriptivos.

¿Cómo usar div como comodines y roles semánticos?

Cuando no exista una etiqueta específica, usa div como contenedor y agrega roles o ARIA si aporta claridad.

<section aria-label="Estadísticas rápidas">
  <div role="group" aria-label="Logros">
    <div>+10 proyectos.</div>
    <div>3 productos lanzados.</div>
  </div>
</section>

¿Cómo optimizar imágenes con picture, source y figure?

Sirve imágenes por formato y tamaño, con texto alternativo y un pie explicativo.

<figure>
  <picture>
    <source type="image/avif" srcset="/img/desk.avif" />
    <source type="image/webp" srcset="/img/desk.webp" />
    <img src="/img/desk.jpg" alt="Diego De Granda en su espacio de trabajo" />
  </picture>
  <figcaption>title caption: foto en el espacio de trabajo.</figcaption>
</figure>

Usa figure y figcaption para contexto visual.
Emplea picture y source para formatos modernos.
Define alt descriptivo y conciso.

¿Cómo presentar “Sobre mí”, valores y enlaces?

Organiza un section con H2 y subsecciones con H3 para valores, citas y una tabla simple.

Incluye texto y quotes para tu voz personal.
Añade enlaces externos a más información.
Mantén la jerarquía: H2 para secciones, H3 para detalles.

Por último, agrega estilos con CSS cuando termines la estructura. Será una página estática lista para compartir; no requiere interacción para mostrar tu información, imágenes y texto. Es una base completa con HTML semántico, accesible y con un porcentaje de SEO que facilita que la gente llegue a tu contenido. Como nota inspiradora: Diego De Granda comparte que tiene más de quince años en desarrollo de software y producto, y en años recientes ha trabajado en productos base con inteligencia artificial.

¿Tienes dudas o quieres mostrar tu versión personalizada? Deja un comentario y comparte tu portafolio.