Como mejoré el SEO de mi portafolio

El dolor de cabeza de un desarrollador casi siempre suele ser el SEO, es ese aspecto del desarrollo web al que ningún programador le gusta meterse. No hay una solución absoulta para solucionar todos los puntos del SEO, pero si los conoces desde un inicio, antes de tan siquiera comenzar a desarrollar una página, la construcción de esta será más sencilla. Y sí, la portada de este post son las métricas reales de mi portafolio.

Herramientas para medir el SEO

No hace mucho Google saco su herramienta "oficial" para medir el SEO de nuestros sitios web Page Speed Insights que aunque no esta bajo un dominio de Google, ten por seguro que ellos están involucrados en su mantenimiento y creación de la herramienta.

En caso de que tu página no este publica y por lo tanto Page Speed Insights no pueda acceder a ella, te recomiendo usar Lighthouse, el cual puede ser ejecutado desde las herramientas de desarrollador que ofrece el navagador de Google Chrome, solo toma en cuenta que si lo utilizas en tu entorno local es probable que arroje peores puntajes debido a los tiempos de carga y las herramientas de desarrollo que tengas instaladas en tu entorno.

Performance

Se podría decir que esta es la métrica más importante del SEO, esto básicamente nos dice que tan rápido es tu página, podemos identificar el objeto que más tarda en cargar (LCP) y en general que otras objetos tardan y como optimizarlos, estos son algunos consejos que aplique en mi portafolio y que también deberías adoptar:

Nueva generación de imagenes

Utiliza formatos para tus imagenes como webp y/o avif, ya que estos suelen pesar menos y ofrecen la misma calidad que una imagen en formato png o jpeg.

Optimiza tu JS

Cuando usamos frameworks de JS díficilmente vamos a saber como optimizar nuestro código, pero como primer acercamiento no agregues código que no vas a usar, no manejes tantos import o require, solo importa lo justo y necesario, reutiliza funciones y busca las secciones de optmización en la documentación del framework que estés usando.

Por ejemplo para este portafolio estoy utilizando PrimeVue, y justo la mejor característica de la libería el Styled Mode es lo más grave en cuando a carga por tener un objeto tan grande de js con el estilo de todos los componentes de la librería, y ¿cual fue la solución? Simplemente quedarme con lo que necesito:

// aquí enlisto los componentes que usa mi portafolio
const usedComponents = [
    'button',
    'floatlabel',
    'drawer',
    'textarea',
    'tag',
    'timeline',
    'image',
]

// aqui re-asigno los componentes para solo utilizar los previos declarados
theme.components = Object.fromEntries(
    Object.entries(theme.components).filter(([key]) => usedComponents.includes(key))
);

// me deshago de los colores que no use
theme.primitive = {
    borderRadius: theme.primitive.borderRadius,
    slate: theme.primitive.slate,
    zinc: theme.primitive.zinc
}

// exporto el tema sin todo el código extra que no necesito
export default theme

Utiliza tamaños adecuados de imagenes

Esto es simple, no uses una imagen en HD(1920x1080) para después colocarla en un marco tan pequeño de tu sitio web de apenas 192x108 pixeles, busca alguna herramienta para editar tus imagenes y usar tamaños adecuados, o si estás usando un framework puede que exista un componente que ya lo haga por ti (por ejemplo NuxtImage) y recuerda siempre añadir las propiedades html height y width aunque después vayas a utilizar CSS para cambiar nuevamente el tamaño, estás propiedades ayudan al navegador a dar un tamaño incial al renderizar la página antes de cargar tu CSS.

Añade cache de assets

Este es un punto complicado y riesgoso, más que nada porque si tu página tiene constantes actualizaciones es probable que no todos los navegadores se actualicen a tus más nuevas características, por eso recomiendo combinar esto con el versionamiento de assets, puedes leer la documentación de webpack o vite para aplicarlo a tu proyecto.

No sobrecargues el HTML

Mientas más etiquetas HTML uses más díficil será para el navegador renderizar por primera vez tu página, uso lo mínimo indispensable a la hora de seleccionar la estructura de tu página.

<!-- Un solo div pudo ser suficiente -->
<div>
    <div>
        <div>
            Tu contenido
        </div>
    </div>
</div>

No sobrecargues tu página con assets de terceros

Sabemos que este punto es más complicado, a veces requerimos de librerias externas, estadísticas, manejo de cookies, entre muchas otras cosas, es inevitable su uso, pero definitivamente recuerda revisar periodicamente las necesidades de tu sitio y quita esas referencias que ya no uses de otros servicios, Google Analytics, Hotjar, Google Ads, Ahref son solo algunos ejemplos

Accessibility

Recuerda mantener tu página lo suficientemente fácil de usar para todos los públicos, utilizar los colores adecuados, los mejores contrastes para la lectura y los atributos html relacionados a accesibildad

Imagenes con descripción

Recuerda agregar el atributo alt a todas tus etiquetas <img> que contenga tu sitio web.

Colores adecuados

Recuerda hacer un buen contraste de color entre tu fondo y tus letras, lo peor que puedes hacer es colocar letrás amarillas con un fondo blanco o verde fosforito, puedes utilizar esta herramienta de Coolors.co para revisar tus colores.

Best practices

Recuerda manter unas buenas practicas de desarrollo web, aunque la mayoria son bastante obvias, no está demás tener en el radar estos puntos

Utilizar una política de contenido seguro contra ataques XSS

Este es un tema bastante profundo de segurdad en sitios web, sin embargo si apenas vas empezando o no tienes mucha idea de lo que es, solo recuerda siempre agregar esta línea de código a tu html o a las cabeceras http de las respuestas de tu servidor:

<meta http-equiv="Content-Security-Policy" content="script-src 'none'">

Si deseas profundizar en este tema la documentación para desarrolladores de Google es perfecta.

Librerías robustas

Si ya te sientes capaz de manejar liberías de JS como Vue, React, Angular, Astro, etc. usalas, muchsa de ellas ya vienen preparadas para cumplir con los puntos de segurdad de esta sección de buenas prácticas.

Source maps en js

Recuerda siempre contar con source maps de tus archivos de js más pesados, estos ayudan a un mejor debug de tu código sobre todo a la hora de usar compiladores como Webpack y Vite.

Métodos seguros

No olvides redireccionar todo tu trafico http a https para que siempre tengan cifrado los visitantes de tu sitio web.

Evita el uso de cookies de terceros

La privacidad es importante, y mientras menos cookies de otros siitos uses es mejor, y si aún asi las requieres recuerda agregar el consentimiento de cookies, si no tienes mucha idea quiza Onetrust te pueda servir.

La etiqueta es importante

Es simple, siempre añade las siguientes etiquetas a tu sitio web:

<!DOCTYPE hml>
<html lang="" dir="">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ...
    </head>
    <body>
        ...
    </body>
</html>

La fuente

Recuerda que la mayoria de los textos de tu sitio web deben de al menos medir 12px.

Errores de JS

Recuerda que si al cargar tu página empiezan a aparecer errores en la consola del navegador tu código algo mal tiene y por lo tanto se interpretará que tu página no funcione, revisa meticulosamente cada script que tengas y asegurate de que funcione todo de manera adecuada, usar TypeScript es un excelente aliado para lidiar con esos problemas de tipado.

SEO

Aquí se concentra la mayoria de puntos relacionados a la indexación de tu página (específicamente de Google).

Títulos

Recuerda utilizar etiquetas <h1>, <h2>, <h4>, <h4>, <h5>, <h6> en tu pagína de manera proporcionada, empezando por solo 1 h1 y de ahí puede crecer de manera proporcional el uso de las demás.

Título

Recuerda siempre agregar una etiqueta <title> a todas tus páginas y una etiqueta <description>.

Links

Recuerda que si vas a usar una etiqueta <a> esta siempre es con el fin de tener el atributo href.

Robots.txt

Recuerda siempre agregar este archivo para decirle a los robots de indexación como comportarse con tu página.

Esto es una pequeña guía, siempre se puede profundizar más, pero si aplicas todos estos puntos te aseguro que al menos tendrás un 80 de califación en cada especto de las estadísticas.