Optimización de SEO técnico para e-commerce

El principal objetivo de un e-commerce no es maximizar el volumen de visitas, sino las ventas. Por eso, es crucial enfocar nuestros esfuerzos en atraer tráfico de calidad, es decir, visitantes con más probabilidades de convertirse en clientes. Además, en un e-commerce no siempre es necesario promocionar todos los productos por igual. Dependiendo del rendimiento, los márgenes o el interés estratégico, es más eficaz priorizar ciertos productos sobre otros para optimizar el esfuerzo y maximizar el retorno de la inversión. En este post vamos a tratar diferentes aspectos de SEO técnico que se deben tener en cuenta en cualquier optimización de e-commerce. Vamos allá:

1. SEO técnico básico en orden

Asegurar que los fundamentos del SEO técnico estén bien implementados es crucial para que el contenido de tu e-commerce sea correctamente rastreado por los buscadores. Incluso el mejor contenido puede no posicionarse si no se cuidan aspectos técnicos clave. Todas las URLs de tu tienda que puedan posicionarse deben ser indexables, lo que se controla mediante etiquetas o el archivo robots.txt. Google Search Console es una herramienta esencial para detectar y corregir errores.

En un e-commerce, Google tiene recomendaciones específicas sobre URLs que deberíamos ofrecerle, siempre que el CMS y/o el desarrollo nos lo permita. Los especialistas de Google también hacen émfasis en la optimización de los titles de nuestros productos, con los máximos detalles posibles: marca, color, material. Los títulos deben ayudar a usuarios y a buscadores a identificar productos y distinguirlos entre ellos. El uso de datos estructurados es fundamental en tiendas online, también, especilamente en las fichas de productos: mediante rich snippets le indicamos a google propiedades fundamentales de un producto como su precio, marca o disponibilidad de stock, entre muchos otros atributos. Sobre los productos sin stock, Google recomienda explícitamente mantenerlos en nuestra web (nada de eliminarlos ni ocultarlos pues perderíamos su SEO acumulado), pero indicando bien a usuarios y Google que ese producto no está disponible en estos momentos, o quizá sugiriendo que tenemos un alternativa estupenda al producto que estaban buscando.

Debemos ofrecer contenido relevante para el usuario en los distintos momentos del funnel: no sólo de fichas de producto vive el e-commerce. Es posible que determinados usuarios no estén lo suficientemente informados para ir directamente a una página de categoría y encontrar su producto ideal. Determinados usuarios pueden valorar contenidos como: reseñas de otros usuarios, sugerencias de regalo, productos más vendidos, novedades, o sugerencias para determinados colectivos. A nivel de catálogo, en muchas ocasiones en un e-commerce vendemos productos que también se venden en otros e-commerce. Google desaconseja usar las descripciones de producto del fabricante, pues serán contenido duplicado de libro. El buscador recomienda explícitamente que redactemos descripciones de producto únicas, que aporten valor.

Finalemente en este apartado nos recomiendoan etiquetar correctamente las opciones de producto: a menudo en una tienda online contamos con productos con opciones de configuración mediante atributos como color o talla. Para ello podemos indicarle a Google esos atributos, así como relaciones de agrupación de productos. Google recomienda asignar una URL única para cada combinación de producto, pero todas ellas compartiendola misma URL canónica.

2. Optimización de imágenes

Uno de los aspectos fundamentales del SEO técnico es la optimización de imágenes, ya que impacta directamente en la velocidad de carga y en la experiencia de usuario. Algunos tips clave:

Eliminar CLS (Cumulate Layout Shift): CLS es uno de los core vitals de Google. Una mala implementación afecta a la experiencia de usuario, pues mientras carga una página vemos como los elementos se van moviendo y recolocando. Es importante que el navegador sepa el tamaño de las imágenes antes de procesarlas. En el informe de speed test de Google, el aviso nos reclama que las imágenes tengan un with y height explícitos.

Optimizar el tamaño de las imágenes: evitar usar imágenes más grandes de lo que los dispositivos necesitan. Lo ideal es ofrecer al navegador diferentes tamaños de una imagen, para que escoja el más adecuado. Es posible que el uso de un CDN ayude a mejorar la velocidad de carga de las imágenes, mediante su caché.

Usar el mejor formato de imágenes posible. JPEG y WebP (o ya AVIF) son formatos más ligeros que PNG por ejemplo, y SVG puede ser muy buen recurso para logos o iconos. Ojo, es difícil escoger el mejor formato de imágenes, pues no todas son compatibles con todos los navegadores. Puedes consultar caniuse para evaluar esas compatibilidades. WebP es el formato más ligero y es compatible con la mayoría de navegadores (especialmente Chrome, que es el más interesante para SEO), pero no con todos y eso puede ser un problema para algunos usuarios. En ese caso podemos implementar alguna solución (normalmente también vía CDN), que ofrezca la misma imágen en distintos formatos (WebP y JPEG esencialmente), en función del navegador.

Comprimir las imágenes. El alto y ancho de las imágenes (visto anteriormente), no está necesariamente ligado al peso de esas imágenes. Y el peso está estrechamente reñido con la velocidad de carga. Usa el software de compresión de imágenes que más te guste. Por ejemplo para WebP. Squoosh es una web muy interesante para comparar el antes y después de una imagen. Nunca comprimas más allá de lo que el usuario va a necesitar, especialmente si tenemos una imagen de grandes dimensiones o necesitamos ofrecer un gran detalle del producto. La experiencia del usuario siempre irá por delante de unas décimas en el speed test, el objetivo no es tener el speed test en verde.

Cachea las imágenes para navegador: de esta forma le indicamos el tiempo de caché de las imágenes, para que los navegadores no deban procesar la misma imagen una vez y otra. Si vas a cambiar pocas veces las imágenes, alarga el tiempo de caché establecido por defecto, o usa un CDN que ya tenga esta funcionalidad.

Optimiza el orden de descarga: si usamos http, podemos hacer que en una sola llamada se descarguen múltiples imágenes, en vez de hacerlo de forma individual. Si debemos elegir, la lógica nos lleva a pensar que lo que más nos interesa es cargar primero la imágen principal y luego el resto. Así cuidamos el LCP, pues cargamos cuanto antes el contenido inicial, y más adelante vamos cargando el resto. Lazy loading generalmente es la opción más interesante a implementar. En el informe de Speed Test esta optimización viene indicacada como “Pospon la carga de imágenes”.

Implementar un CDN: Google recomienda la implementación de un CDN, pues un buen servicio de este tipo y correctamente configurado, resuelve la mayoría de los puntos antes descritos. Elige el que más te guste, pero es importante configurarlo y testear bien la web después de implementarlo o realizar cambios relevantes.

3. Optimización de webs con JavaScript

El uso de JavaScript es clave para la interactividad en e-commerce, pero su mal uso puede afectar al rendimiento web y la velocidad de carga. JS es el lenguaje de programación más popular actualmente, por su gran adaptación a los navegadores, y su gran flexibilidad de configuración para los desarrolladores. Hay muchas librerías de JS, pero ojo porque muchas no son soportadas por todos los navegadores. Algunos consejos a tener presentes en esta etapa:

Limita el número de archivos JavaScript. Paga Speed Insights normalmente nos avisa si tenemos esa problemática. Debemos evitar tener decensas de archivos JS, uno para cada acción o grupo de acciones. Lo ideal es poder unificar todos los JS en un sólo documento, mucho más eficiente. Aunque eso no siempre es posible, pues la tecnología que usemos (especialmente determinados CMS) nos va a limitar en ocasiones. Google recomienda el uso de HTPP2, pues mejora el procesamiento de los JS.

Evitar excesivos DNS. No todos los JS que tenemos en nuestra web están alojados en nuestro dominio. Muy a menudo incluimos scripts de herramientas externas (Google Meta...), que al cargar nuestra web no sólo llaman a los recursos que tenemos, sino también a recursos externos. Es inevitable usar servicios externos, especialmente en e-commerce. Pero debemos asegurarnos de tener en el código sólo aquellos imprescindibles en cada caso. En algunas ocasiones nos puede interesar bajarnos el script externo y ponerlo en nuestro código, para evitar tanta llamada externa, o bien meterlo en contenedores como Tag Manager.

Eliminar JavaScript ineficiente: se trata de código JS en el que no se optimizan los recursos ni las llamadas, lo que ralentiza su procesamiento y acaba impactando negativamente al usuario. En el Page Speed Insights verás ese aviso como “Reduce el tiempo de ejecución de JavaScript”. Por ejemplo, algunos JS se pueden ejectutar al final de la carga del contenido de una página.

Eliminar el JavaScript que no se use: a veces instalamos un montón de componentes y librerías de el framework que estamos usando, pero que no se están utilizando en nuestra página web. Evitemos que los navegadores gasten recursos bajándose recursos que no va a necesitar. El Page Speed Insights generalmente nos avisará de eso. Usa herramientas como tree shaking para detectarlo. La mayoría de Frameworks incluyen herramientas de compilación, mediante las cuales ya se realiza esta optimización de componentes JS.

Comprime los archivos JS: como con las imágenes, podemos comprimir los archivos para que pesen menos. Generalmente nos va a avisar nuevamente si sufre por esa cuestión. Es importante, si se hace, comprobar que mediante la compresión no dejen de funcionar algunas acciones clave de la web relacionadas con JS. Si por compilar JS deja de funcionar un añadir a carrito o un envío de formulario, no parece un buen negocio.

Configurar el cache de los archivos JS: una buena configuración de caché reduce los recursos que van a necesitar los navegadores para procesar nuestro contenido.

4. Optimización de e-commerce para móviles

Con más de la mitad del tráfico proveniente de dispositivos móviles, es crucial que un e-commerce esté bien optimizado para estos dispositivos. Evita tener dominios separados para móviles y desktop. Por ello para Google es muy importante comprovar que nuestro e-commerce está bien implementado para móviles. A neter presente:

Mobile y Desktop deben ir de la mano: tener un dominio distinto para móviles es una práctica que antes era habitual. Si se quiere hacer, debes usar herramientas para que ambas versiones se sincronicen. Para Google es mejor usar una sola web, que sea responsive: mediante CSS los elementos de la web son los mismos para todos los dispositivos, pero se adaptan y ajustan a cada uno de ellos.

Diseño web mobile orientado a SEO: debes pensar que Google rastrea nuestra web como si fuera un dispositivo móvil. De esta forma, si en nuestra versión móvil eliminamos aspectos SEO básicos como textos o enlaces, estos no van a tenerse en cuenta para SEO. Usa scroll infinito, o botones para cargar más, y adapta los contenidos para móviles, pero no elimines contenido importante.

Informa a Google de contenido: como con cualquier página web, debes configurar sitemaps de contenido y enviarlos a Google mediante su Search Console. Pero al tratarse de un e-commerce, además es muy recomendable configurar Google Merchants Center y subir a Google toda la información sobre nuestro catálogo de productos mediante un feed homologado.

Optimizar el page speed: ya vimos en apartados anteriores cómo comprimir imágenes y JS. Pero hay que considerar otros aspectos que pueden afectar a la velocidad de carga, y afectar a la experiencia de usuario en móviles. El Page Speed Insights nos dará pistas, en su pestaña dedicada a móviles. En el informe encontrarás datos de experimentos de velocidad desde Google, pero también datos de experiencia de usuarios reales en tu site, que también encontrarás en Search Console. Google aconseja prestar especial atención a la configuración de fuentes en nuestra web: usar las mínimas posibles, a ser posibles disponibles en Google Fonts, y a su vez descargadas y precargadas en nuestro site, no servidas desde fuera.

Asegurarnos que todo el contenido es leíble en móviles pequeños: debemos testear que no tengamos scroll lateral que desplace nuestro contenido, que el tamaño de la fuente sea suficientemente grande para ser leído por un humano medio, o que los botones no estén excesivamente juntos, inhabilitando algunos de ellos. También aconseja Google habilitar a los usuarios un zoom para ver más detalles de algún contenido (especialmente en fotos de ficha de producto), y usar un sistema de iconos que sean reconocibles y usables en móviles. Es importante testerar nuestra web en distintos móviles y navegadores. Usar emuladores como el de Chrome puede ser útil, pero no siempre es 100% fidedigno al comportamiento de un móvil desde el propio dispositivo.

Asegurar una buena usabilidad: un usuario con móvil debería poder navegar sin problemas por todo nuestro contenido. Debemos fijarnos y testear especialmente aspectos clave de nuestra web como el menú, el buscador o los formularios. Al tener un e-commerce, por supuesto debemos poner a prueba todo el proceso de compra en móviles. Pasa el mobile friendly test tool de Google, siempre dispuesto a ayudar en estos puntos.

Habilitar la mejor experiencia de usuario posible: algunas recomendaciones de Google en esta materia se centran en dar una buena información en el proceso de compra sobre las condiciones de compra, formas de pago, gastos de envío, etcétera. Si algun vez has configurado una cuenta a Google Merchants, ya tendrás experiencia sobre sómo solventar esas cuestiones. Google quiere que demos transparencia al usuario con estas cuestiones, para generar confianza y vehicular la visita hacia la compra. Los carroussels también son una buena solución para ofrecer mucho contenido y variedad en poco espacio para móviles, evitando scrolles infinitos. Google recomienda el uso de PWAs (Progressive Web APPs), un híbrido de web con experiencia de APP, pero tiene un alto coste de implementación y no está al alcance de muchos vendedores. Otro tema clave a nivel de usabilidad móvil son los formularios: en este sentido Google recomienda el uso de autocomletado, especialmente en los campos de pago y envío.

Personalización en experiencia mobile: debemos tener en cuenta que los dispositivos móviles son aparatos que normalmente sólo los usa una persons y no los compartimos (a menos que tengad hijos), y que al tener menos espacio de pantalla valorarán más encontrar un contenido adaptado a sus gustos. Algunos ejemplos de personalización son mostrar productos en la home que el usuario antes ha consultado, o bien mostrarle ofertas de acuerdo con sus gustos. También pueden ser útiles para el usuario la posibilidad de configurar su wishlist de productos, o implementar un chatbot que le ayude a navegar por el catálogo y encontrar el producto más adecuado a cada usuario.

Usar las funcionalidades de los móviles: los smartphones incorporan funcionalidades como micrófono, cámara o geolocalización, y se pueden aprovechar también para los sitios de comercio electrónico. Algunos consejos podrían ser: habilitar la búsqueda por voz en nuestro buscador, mostrar los productos con stock cercano (para negocios híbridos con tiendas online y físicas), o la implementación de realidad virtual (por ejemplo, mostrar cómo quedaría determinado producto en nuestra casa o sobre nuestro cuerpo). Incluso podemos explorar otras capacidades, como la búsqueda por imágenes tipo Google Lens.