CursosEmpresasBlogLiveConfPrecios

Contenido del curso

No sé dónde empezar
Tomar examen

Buenas prácticas de SEO en HTML

Resumen

El SEO (Search Engine Optimization) es el conjunto de buenas prácticas y estrategias que aplicas en tu HTML para que los buscadores muestren tu proyecto de forma orgánica, sin pagar por publicidad. Si estás construyendo un producto web o trabajas para una empresa que quiere crecer su audiencia, dominar SEO te ayuda a llegar a más personas con menos presupuesto.

Lo interesante es que SEO no es una etiqueta mágica ni un código específico. Es la suma de semántica, accesibilidad, estructura y metadatos que ya has venido trabajando en HTML.

¿Qué etiquetas del head son clave para el SEO?

El <head> es donde le das al navegador la información que necesita para clasificar tu página. Aquí cada etiqueta cuenta.

¿Por qué importan lang, charset y viewport?

Estas tres declaraciones inician tu calificación de SEO antes de mostrar contenido visible.

  • lang: atributo que declara el idioma del proyecto. Si alguien busca en español, el buscador devuelve contenido en español gracias a este atributo [01:55].
  • charset UTF-8: permite que los caracteres especiales del español (acentos, eñes) se muestren legibles y no como códigos ASCII [02:23].
  • meta viewport: prepara el proyecto para ser mobile first. Sin él, pierdes puntos de SEO y la experiencia móvil se rompe [02:55].

¿Qué pasa si no uso meta viewport? Tu sitio no se optimiza para móviles, pierde calificación SEO y se ve mal en pantallas pequeñas, lo que afecta tu posicionamiento.

¿Cómo escribo un buen title y meta description?

El <title> es lo que aparece en la pestaña del navegador y como encabezado en los resultados de Google. Tiene reglas claras:

  • Entre 50 y 60 caracteres máximo.
  • Incluir las palabras clave principales.
  • Único en cada página, nunca genérico ni repetido.

La meta description es el texto que aparece debajo del título en Google. Si buscas "Platzi", no solo aparece Platzi, sino Platzi Cursos en línea, porque esa descripción hace match con lo que buscas [03:51].

¿Cómo le digo a Google qué hacer con mi página?

Existen metas que controlan el comportamiento de los buscadores y arañas que rastrean tu sitio.

¿Qué hacen meta keywords, author y robots?

Cada uno cumple un rol distinto, aunque algunos pesan menos que antes.

  • meta keywords: ha perdido relevancia en el SEO moderno, pero aún se recomienda incluir palabras clave que hagan match con búsquedas reales [04:33].
  • meta author: indica el autor o empresa detrás del proyecto y suma para posicionamiento [05:18].
  • meta robots: le dice a las arañas cómo tratar la página. Valores como index, follow indican que aparezca en búsquedas y siga los enlaces. noindex, nofollow hace lo contrario [05:30].

¿Qué es el atributo canonical? Es un <link rel="canonical"> que evita problemas de contenido duplicado indicando cuál es la URL original entre versiones (http, https, www).

¿Para qué sirve Open Graph y los favicons?

Open Graph controla cómo se ve tu contenido cuando alguien lo comparte en redes sociales. Tú decides la imagen, el texto y la URL que se carga al hacer clic, lo que vuelve indispensables estos metas para campañas publicitarias [06:42].

Los favicons son los íconos que aparecen en la pestaña, en iOS y en accesos directos. Refuerzan la identidad visual de tu marca y son parte de las buenas prácticas que los buscadores valoran.

¿Cómo se estructura un body optimizado para SEO?

El <body> debe seguir una estructura semántica clara, que es lo que más peso tiene en tu calificación.

¿Qué etiquetas semánticas debo usar?

La semántica le indica a los buscadores y a los lectores de software qué función cumple cada parte de la página.

  • header: marca el encabezado del proyecto. Suele incluir el logo dentro de una etiqueta de ancla con aria-label="Ir al inicio" [08:26].
  • nav: la navegación principal, también con su aria-label, contiene una lista desordenada con enlaces a las secciones del sitio [09:00].
  • main: el contenido principal. Aquí va el único <h1> permitido por página, una regla de oro que si rompes te penaliza fuerte en SEO [09:45].
  • aside: contenido secundario o lateral, lo que los lectores anuncian como complementario [12:30].
  • footer: cierra la página y puede contener navegaciones adicionales como enlaces de pie y redes sociales [13:00].

¿Cómo optimizo imágenes, videos y enlaces?

Las imágenes deben ir optimizadas y con atributos que aceleren la carga. El atributo loading="lazy" evita que la imagen se cargue hasta que el usuario se acerca a ella [10:30]. También necesitas alt, width y height para que el navegador reserve el espacio antes de renderizar.

Los videos aumentan el tiempo en página, lo cual es positivo para SEO, pero deben usar atributos que controlen su carga y ofrecer múltiples formatos con la etiqueta <source> para asegurar compatibilidad [11:50].

Los enlaces internos tienen que ser descriptivos. Mal: page, info. Bien: guía completa sobre este tema. La diferencia es enorme para alguien que usa lector de pantalla y para los buscadores que evalúan la calidad de tus links [11:15].

¿Cuántos H1 puedo usar por página? Solo uno. Esa es la regla de oro del SEO moderno. Usa H2 y H3 para jerarquizar el resto del contenido.

Una estructura HTML semántica completa, con Aria bien aplicado y metadatos cuidados, es la base para que tu proyecto crezca de forma orgánica. Y como SEO evoluciona, sobre todo en la era de la IA, mantente al día con los cambios.

¿Qué práctica de SEO vas a implementar primero en tu próximo proyecto?