Optimització tècnica de SEO per a e‑commerce

L'objectiu principal d'un e-commerce no és maximitzar el volum de visites, sinó les vendes. Per això, és crucial enfocar els nostres esforços a atreure trànsit de qualitat, és a dir, visitants amb més probabilitats de convertir-se en clients. A més, en un e-commerce no sempre és necessari promocionar tots els productes per igual. Depenent del rendiment, els marges o l'interès estratègic, és més eficient prioritzar certs productes sobre altres per optimitzar l'esforç i maximitzar el retorn de la inversió. En aquest post tractarem diferents aspectes del SEO tècnic que s'han de tenir en compte en qualsevol optimització d'e-commerce. Anem-hi:

1. SEO tècnic bàsic en ordre

Assegurar que els fonaments del SEO tècnic estiguin ben implementats és crucial perquè el contingut del teu e-commerce sigui correctament rastrejat pels cercadors. Fins i tot el millor contingut pot no posicionar-se si no es cuiden aspectes tècnics clau. Totes les URLs de la teva botiga que puguin posicionar-se han de ser indexables, cosa que es controla mitjançant etiquetes o l'arxiu robots.txt. Google Search Console és una eina essencial per detectar i corregir errors.

En un e-commerce, Google té recomanacions específiques sobre les URLs que hauríem d'ofereir-li, sempre que el CMS i/o el desenvolupament ens ho permetin. Els especialistes de Google també fan èmfasi en la optimització dels títols dels nostres productes, amb els màxims detalls possibles: marca, color, material. Els títols han de ajudar a usuaris i a cercadors a identificar productes i a distingir-los entre ells. L'ús de dades estructurades és fonamental en botigues online, especialment a les fitxes de productes: mitjançant rich snippets li indiquem a Google propietats fonamentals d'un producte com el seu preu, marca o disponibilitat d'estoc, entre molts altres atributs. Pel que fa als productes sense estoc, Google recomana explícitament mantenir-los al nostre web (res d'eliminar-los ni ocultar-los, ja que perdríem el seu SEO acumulat), però indicant clarament a usuaris i Google que aquest producte no està disponible en aquest moment, o potser suggerint que tenim una alternativa excel·lent al producte que estaven cercant.

Hem d'ofrir contingut rellevant per a l'usuari en els diferents moments del funnel: no només de fitxes de producte viu l’e-commerce. És possible que determinats usuaris no estiguin prou informats per anar directament a una pàgina de categoria i trobar el seu producte ideal. Determinats usuaris poden valorar continguts com: ressenyes d'altres usuaris, suggeriments de regal, productes més venuts, novetats o suggerències per a determinats col·lectius. A nivell de catàleg, moltes vegades en un e-commerce venem productes que també es venen en altres e-commerce. Google desaconsella utilitzar les descripcions de producte del fabricant, ja que serien contingut duplicat de llibre. El cercador recomana explícitament que redactem descripcions de producte úniques, que aportin valor.

Finalment, en aquest apartat ens recomanen etiquetar correctament les opcions de producte: sovint en una botiga online comptem amb productes amb opcions de configuració mitjançant atributs com color o talla. Per això, podem indicar aquests atributs a Google, així com relacions de agrupació de productes. Google recomana assignar una URL única per a cada combinació de producte, però totes elles compartint la mateixa URL canònica.

2. Optimització d'imatges

Un dels aspectes fonamentals del SEO tècnic és l'optimització d'imatges, ja que impacta directament en la velocitat de càrrega i l'experiència de l'usuari. Algunes recomanacions clau:

Eliminar CLS (Cumulate Layout Shift): CLS és un dels core vitals de Google. Una mala implementació afecta l'experiència de l'usuari, ja que mentre es carrega una pàgina veiem com els elements es van movent i recol·locant. És important que el navegador conegui la mida de les imatges abans de processar-les. En l'informe de speed test de Google, l'advertència ens reclama que les imatges tinguin una amplada i alçada explícites.

Optimitzar la mida de les imatges: evitar usar imatges més grans del que els dispositius necessiten. El més ideal és oferir al navegador diferents mides d'una imatge, perquè esculli la més adequada. És possible que l'ús d'un CDN ajudi a millorar la velocitat de càrrega de les imatges mitjançant la seva memòria cau.

Usar el millor format d'imatges possible. JPEG i WebP (o ja AVIF) són formats més lleugers que PNG, per exemple, i SVG pot ser un bon recurs per a logos o icones. Cal tenir en compte que és difícil escollir el millor format d'imatges, ja que no tots són compatibles amb tots els navegadors. Pots consultar caniuse per avaluar aquestes compatibilitats. WebP és el format més lleuger i és compatible amb la majoria de navegadors (especialment Chrome, que és el més interessant per SEO), però no amb tots i això pot ser un problema per a alguns usuaris. En aquest cas, podem implementar alguna solució (normalment via CDN), que ofereixi la mateixa imatge en diferents formats (WebP i JPEG essencialment), en funció del navegador.

Comprimir les imatges. L'altura i amplada de les imatges (vist anteriorment) no està necessàriament lligada al pes d'aquestes imatges. I el pes està estretament lligat a la velocitat de càrrega. Usa el programari de compressió d'imatges que més t'agradi. Per exemple per a WebP, Squoosh és una web molt interessant per comparar el abans i després d'una imatge. Mai comprimeixis més enllà del que l'usuari va a necessitar, especialment si tenim una imatge de grans dimensions o necessitem oferir un gran detall del producte. L'experiència de l'usuari sempre anirà per davant d'unes dècimes en el speed test, l'objectiu no és tenir el speed test en verd.

Emmagatzemar en memòria cau les imatges per al navegador: d'aquesta forma li indiquem el temps de memòria cau de les imatges, perquè els navegadors no hagin de processar la mateixa imatge una vegada i una altra. Si vas a canviar poques vegades les imatges, allarga el temps de memòria cau establert per defecte, o utilitza un CDN que ja tingui aquesta funcionalitat.

Optimitzar l'ordre de descàrrega: si fem servir http, podem fer que en una sola trucada es descarreguin diverses imatges, en lloc de fer-ho de manera individual. Si hem de triar, la lògica ens porta a pensar que el que més ens interessa és carregar primer la imatge principal i després la resta. Així cuidem el LCP, ja que carreguem com més aviat millor el contingut inicial, i més endavant anem carregant la resta. Lazy loading és generalment l'opció més interessant per implementar. En l'informe de Speed Test aquesta optimització ve indicada com "Posposar la càrrega d'imatges".

Implementar un CDN: Google recomana la implementació d'un CDN, ja que un bon servei d'aquest tipus i correctament configurat resol la majoria dels punts abans descrits. Tria el que més t'agradi, però és important configurar-lo i provar bé el lloc després d'implementar-lo o fer canvis rellevants.

3. Optimització de webs amb JavaScript

L'ús de JavaScript és clau per a la interactivitat en e-commerce, però el seu mal ús pot afectar al rendiment web i la velocitat de càrrega. JS és el llenguatge de programació més popular actualment, per la seva gran adaptació als navegadors, i la seva gran flexibilitat de configuració per als desenvolupadors. Hi ha moltes llibreries de JS, però compte perquè moltes no són suportades per tots els navegadors. Alguns consells a tenir en compte en aquesta etapa:

Limita el nombre d'arxius JavaScript. El Page Speed Insights normalment ens avisa si tenim aquest problema. Hem d'evitar tenir desenes d'arxius JS, un per cada acció o grup d'accions. El més ideal és poder unificar tots els JS en un sol document, molt més eficient. Tot i això, això no sempre és possible, ja que la tecnologia que fem servir (especialment determinats CMS) ens limitarà en ocasions. Google recomana l'ús de HTTP2, ja que millora el processament dels JS.

Evitar DNS excessius. No tots els JS que tenim al nostre lloc web estan allotjats al nostre domini. Molt sovint incloem scripts d'eines externes (Google, Meta...), que al carregar la nostra pàgina no només criden els recursos que tenim, sinó també els recursos externs. És inevitable utilitzar serveis externs, especialment en e-commerce. Però hem d'assegurar-nos d'incloure en el codi només aquells imprescindibles en cada cas. Algunes vegades ens pot interessar descarregar-nos l'script extern i posar-lo al nostre codi, per evitar tantes trucades externes, o bé posar-lo en contenidors com Tag Manager.

Eliminar JavaScript ineficient: es tracta de codi JS en què no s'optimitzen els recursos ni les trucades, el que fa que el processament sigui més lent i acabi impactant negativament en l'usuari. En el Page Speed Insights veuràs aquesta advertència com "Redueix el temps d'execució de JavaScript". Per exemple, alguns JS es poden executar al final de la càrrega del contingut d'una pàgina.

Eliminar JavaScript que no s'utilitza: de vegades instal·lem un munt de components i llibreries del framework que estem utilitzant, però que no s'estan utilitzant a la nostra pàgina web. Evitem que els navegadors gastin recursos descarregant recursos que no necessitaran. El Page Speed Insights generalment ens avisarà d'això. Usa eines com tree shaking per detectar-ho. La majoria de frameworks inclouen eines de compilació, mitjançant les quals ja es realitza aquesta optimització de components JS.

Comprimir els arxius JS: com amb les imatges, podem comprimir els arxius perquè pesin menys. Generalment ens avisarà novament si pateix per aquesta qüestió. És important, si es fa, comprovar que mitjançant la compressió no deixin de funcionar algunes accions clau de la web relacionades amb JS. Si per compilar JS deixa de funcionar una acció d'afegir a la cistella o un enviament de formulari, no sembla una bona opció.

Configurar la memòria cau dels arxius JS: una bona configuració de memòria cau redueix els recursos que necessitaran els navegadors per processar el nostre contingut.

4. Optimització d'e-commerce per a mòbils

Amb més de la meitat del trànsit provenint de dispositius mòbils, és crucial que un e-commerce estigui ben optimitzat per aquests dispositius. Evita tenir dominis separats per mòbils i desktop. Per això, és molt important per a Google comprovar que el nostre e-commerce està ben implementat per a mòbils. Tingues en compte:

Mobile i Desktop han d'anar de la mà: tenir un domini separat per a mòbils era una pràctica habitual abans. Si es vol fer, cal utilitzar eines perquè ambdues versions es sincronitzin. Per a Google, és millor utilitzar una sola web, que sigui responsive: mitjançant CSS els elements de la web són els mateixos per a tots els dispositius, però s'adapten i s'ajusten a cada un d'ells.

Disseny web mòbil orientat a SEO: has de pensar que Google rastreja el nostre web com si fos un dispositiu mòbil. D'aquesta manera, si a la nostra versió mòbil eliminem aspectes SEO bàsics com textos o enllaços, aquests no seran tinguts en compte per SEO. Utilitza scroll infinit, o botons per carregar més, i adapta els continguts per mòbils, però no eliminis contingut important.

Informar a Google del contingut: com amb qualsevol pàgina web, has de configurar sitemaps de contingut i enviar-los a Google mitjançant Search Console. Però, tractant-se d'un e-commerce, també és molt recomanable configurar Google Merchants Center i pujar tota la informació sobre el nostre catàleg de productes mitjançant un feed homologat.