A partir de uma análise envolvendo todos os projetos de SEO para clientes com e-commerce que a Lume atendeu entre 2021 e 2022, listamos as 6 principais otimizações técnicas para melhorar a performance de uma loja virtual.
Essas oportunidades foram divididas em três tópicos:
- Sitemaps e linkagem interna
- Dados estruturados e hierarquia de conteúdos
- Otimização de imagens
A partir de agora, confira as nossas dicas, com base em cases reais, sobre como otimizar o seu e-commerce.
Sitemaps e links internos: otimize o rastreamento e a indexação dos seus produtos
Para que o seu site apareça como resultado nas buscas do Google, os buscadores precisam ser capazes de encontrar as páginas do nosso site em um processo chamado 'rastreamento'.
Esse processo pode ocorrer através dos arquivos sitemaps, arquivo que lista todas as URLs de um site, ou através dos links internos. Confira, abaixo, algumas formas de garantir que os robôs não enfrentem problemas na hora de encontrar as páginas mais profundas do seu site.
Cuide bem dos seus sitemaps
Sabemos que os sitemaps são muito importantes para que o Google consiga encontrar todas as páginas de um site e, com isso, fazer a indexação. De acordo com o Google, o ideal é que seja entregue, através da ferramenta Google Search Console, arquivos com até 50 mil URLs ou até 50 mega.
Porém, quando falamos de e-commerce, é bem comum um site conter centenas ou milhares de URLs. Então, em vez de entregar um arquivo gigantesco, o mais adequado é fazer uma segmentação desses sitemaps agrupando as URLs pelo tipo de conteúdo que essas páginas têm.
Por exemplo, criar um sitemap específico para as categorias do site, um para listar todos os produtos, outro para conteúdos de blog e por aí vai. Todos esses sitemaps devem ser listados apenas em um arquivo sitemap-index, que é um arquivo XML com uma estrutura muito semelhante ao do sitemap, com a diferença de algumas tags.
E é esse arquivo único (sitemap-index) que deve ser submetido no Google Search Console para que o Google consiga encontrar as URLs. Aqui vale destacar a importância de manter uma rotina de atualização desses arquivos. Ou seja, sempre que alguma URL for publicada ou sair do ar, por exemplo, os arquivos em que elas estão listadas precisam ser atualizados.
Por isso ter sitemaps segmentados por categoria ou produto facilita muito! Porque em vez de criar uma rotina que vai gerar um arquivo de 50 mega, roda apenas uma rotina que irá atualizar o arquivo que teve URLs alteradas.
Fez uma nova carga de produtos dentro do seu e-commerce? Atualize somente o arquivo sitemap específico de produtos e está tudo certo. Não é necessário fazer uma nova atualização dentro do GSC.
Mas lembre-se: tão importante quanto todos os itens dessa lista, é a validação e o acompanhamento do status de processamento desses arquivos sitemaps. Dentro do GSC é possível validar se o Google conseguiu acessar o arquivo e se ele conseguiu ler todas as URLs que estão lá e, consequentemente, se houve algum problema na geração desse arquivo.
Essa visualização é importante pois é a partir daí que se consegue ter uma visão da necessidade ou não de ajustar a forma como esse arquivo XML foi construído.
Linkagem interna: usuários (e robôs) dependem dos links para navegar no seu site
A importância da linkagem interna vai muito além disso. Também é por meio dos links internos que os buscadores “medem” a relevância de uma página dentro de um site, pois são eles os responsáveis por distribuir as métricas de autoridade entre as páginas.
Além disso, os usuários utilizam a linkagem interna para navegar e conhecer outras páginas, conteúdos, produtos e serviços dentro do nosso site. Então páginas que são linkadas, naturalmente, tendem a serem mais relevantes.
É também através desses links que o nosso “juice” é repassado entre as páginas e que as nossas métricas de reputação e autoridade vão sendo passadas adiante.
Porém, não são todos os links que têm valor para SEO. O link perfeito, neste caso, sempre utiliza apenas a tag <a>, sem utilizar tag buton ou outros elementos como eventos javascript onclick, por exemplo.
Isso porque é o parâmetro href dessa tag que vai indicar para os robôs para onde eles devem ir: é o valor desse atributo que o Google utiliza para encontrar novas páginas.
E uma tag buton, por exemplo, não tem parâmetro href, o que torna ela invisível para o robô do Google. Para um link ser válido, ele precisa retornar o status 200 (página encontrada). Não devemos utilizar dentro de uma linkagem interna URLs redirecionadas ou quebradas que retornem um status 404 ou algum erro de permissão, por exemplo.
Outro ponto importante é que esse link não deve ser baseado em eventos javascript como onClick ou onRelease, por exemplo, justamente pelo fato de que o robô acessa um site como se estivesse em um navegador com javascript desativado. Ou seja: esse evento nunca será executado e o Google não vai conseguir, de fato, chegar até aquela página.
Além disso, o link perfeito deve contar com um texto âncora descritivo (e essa é uma premissa básica para quem trabalha com SEO). O texto âncora tem que descrever o que o usuário vai encontrar quando clicar naquele link.
Também é interessante entender o quão relevante uma página é dentro de um site e se ela merece ou não ser linkada dentro de um menu de navegação de destaque. Por exemplo: uma página de Política de Privacidade não tem motivo para ser listada em uma área de grande destaque, como um cabeçalho.
Abaixo, veja como seria a sintaxe correta do link perfeito quando falamos de SEO:
Paginação em categorias: recursos como rolagem são bons para o usuário, mas péssimos para o robô
Basicamente, a rolagem infinita (que muitos e-commerces utilizam), depende de eventos javascript, que como já explicamos acima, são ignorados pelos robôs. Portanto, é um recurso que deve ser evitado.
Sabemos que para o usuário é excelente, pois ele não precisa clicar em algum botão para que novos produtos sejam carregados. Porém, para o robô do Google isso representa vários problemas e dificuldades.
Como o robô acessa um site com javascript desativado, ele nunca dará o scroll para ativar a rolagem infinita.
Uma alternativa para isso e que não afeta tanto a experiência do usuário em um site é a utilização do botão “carregar mais”. Porém, um ponto de atenção aqui: é bem comum vermos a utilização de tag buton, que não possui um parâmetro href, o que o torna invisível para o robô. Neste caso, valem todas as regras do link perfeito que explicamos acima, além de canonizar corretamente essas páginas de categoria.
Dados estruturados e estrutura de conteúdo: máxima atenção à semântica das páginas
Os dados estruturados são meta informações a respeito de um conteúdo disponibilizado em uma LP, por exemplo. São elementos que são incluídos na estrutura HTML de um site e que vão dar algumas informações sobre o que é oferecido ali.
Hoje em dia, a maioria das plataformas de mercado já disponibiliza alguns dados estruturados e o mais comum são os de produto.
Só que existem outros tipos de dados estruturados que podem ser aplicados dentro de um e-commerce e que tem potencial de dar algum destaque nos resultados de busca. Confira abaixo alguns exemplos:
Localização atual (Breadcrumb)
Esse dado estruturado é bastante útil para o Google porque é a partir disso que ele consegue ver qual página está acessando e qual a relação dela com as ascendentes e descendentes. Essa informação também pode ser utilizada na SERP dentro do snippet com a categorização e estrutura de localização.
Logo (Organization)
Outro dado estruturado muito relevante é o de Organization, com o foco principalmente no logo. Ele serve para informar ao Google qual o logotipo oficial da marca. Então quando o usuário faz uma busca de marca, por exemplo, que aparece no knowledge graph, é conquistada uma exibição de maior destaque.
Caixa de Pesquisa (Sitelinks)
Esse é um dado estruturado excelente, pois tendo isso implementado em um site, o Google passa a mostrar esse campo de busca dentro de um resultado.
Normalmente esse campo aparece em buscas de marca. A partir dele, é possível fazer um filtro e pesquisar qualquer outro termo que vai levar o usuário para um produto ou serviço específico dentro do mesmo site.
Perguntas frequentes (F.A.Q pages)
As perguntas frequentes são bastante úteis principalmente para páginas de produtos. Por ser espontâneo, sabemos que o conteúdo gerado pelo usuário tem um valor enorme. Então faz todo o sentido usá-lo para estruturar essas informações em um formato de perguntas e respostas dentro de uma página de produtos, não acha?
Isso possibilita aparecer como resultado de busca num formato bem semelhante ao abaixo.
Neste caso, ao expandir as setas, o usuário visualiza um trecho do conteúdo que responde à pergunta. Assim, ele pode tanto consumir essa informação diretamente na SERP ou, tendo interesse em saber mais, clicando no resultado e acessando o site correspondente.
Vídeos
Outro dado estruturado importante é o de vídeo, principalmente porque já sabemos que imagens têm um papel essencial na conversão. O usuário quer olhar um produto no detalhe e os vídeos causam um impacto interessante no comportamento dele: desde a permanência na página, pois ele assistirá o vídeo, até no objetivo final, que é o fechamento do negócio.
A utilização de dados estruturados desse tipo possibilita aparecer no resultado de busca no formato semelhante ao abaixo:
O usuário pode procurar por uma marca + uma peça de roupa, por exemplo, e entre os resultados orgânicos o site ter um snippet de vídeo que irá direcionar para uma página de produto.
Quer saber mais sobre os tipos de resultados do Google? Então clique aqui!
Hierarquizando o seu conteúdo com heading tags
É muito comum vermos casos de desenvolvedores utilizando heading tags em função do tamanho que elas assumem no front-end e não pela função, de fato, delas. As heading tags têm como objetivo estruturar hierarquicamente um conteúdo.
É através delas que vamos dar uma estrutura de conteúdo e também criar os relacionamentos entre tópicos e subtópicos. Aqui você pode ler muito mais sobre esse assunto.
Basicamente, o H1 é utilizado para o conteúdo principal de uma página, o H2 para um subtópico, o H3 para um subtópico dentro do H2 e assim por diante.
Um aspecto importante a respeito do H1: no HTML 5, se passarmos o nosso site por uma ferramenta de validação, ela irá aprovar uma página com um código HTML que tenha mais de uma tag H1 inserida. Isso porque pelas regras do HTML 5 isso não é um problema. Porém, dentro de SEO isso não é nada prudente.
O ideal é trabalhar com uma única H1 e que ela receba a palavra-chave relevante para o conteúdo daquela página.
Imagens valem tanto quanto palavras
Essa é uma recomendação bastante focada em performance. Não é de hoje que as imagens ocupam um papel extremamente importante na conversão de um e-commerce. Isso porque eles passam uma certa confiança sobre aquele produto ou aquela marca.
E considerando toda essa relevância, faz sentido utilizar imagens de alta qualidade e resolução para que o usuário consiga ver os detalhes de um produto, por exemplo.
Consequentemente, é essencial garantir que essas imagens estejam bem otimizadas para que não afetem a performance do site e os resultados orgânicos. Confira algumas dicas nesse sentido:
Dimensões explícitas para minimizar o CLS
De volta aos velhos tempos, os atributos de altura e largura devem ser inseridos inline. Para os profissionais mais experientes e que começaram a trabalhar com desenvolvimento no final dos anos 90 isso não é nenhuma uma novidade.
Na época, para criar uma página HTML era necessário inserir os atributos de altura e largura inline e especificar essas informações no próprio elemento <img>. Mas com o tempo e o avanço do CSS, isso deixou de ser importante.
Porém, em função das métricas Core Web Vitals, essa ação voltou a ser necessária, pois o CLS mede o deslocamento de um elemento em uma página à medida que os outros elementos vão sendo renderizados.
Um exemplo: quando temos uma imagem hero que ocupa toda a largura da página com 400 pixels de altura, se essa especificação não for feita e não deixarmos explícito no HTML qual o espaço que ela irá ocupar, no momento que ela for carregada irá empurrar todo o conteúdo para baixo, o que impacta diretamente no CLS.
Por isso, é necessário adicionar altura e largura nos elementos de imagem que são carregados fora da thread principal. Com isso, é possível criar um layout mais estável e que não vai impactar na métrica CLS.
Faça requisições de imagens no tamanho certo
Ao desenvolver as suas páginas, atente-se para requisitar a imagem nas dimensões que serão utilizadas no front-end, evitando o download de imagens maiores que o necessário.
A maioria das plataformas disponibiliza diversos tamanhos de imagens para serem requisitadas no front-end, permitindo a sua aplicação em diversos layouts diferentes. Procure na documentação da plataforma como configurar e requisitar tamanhos diferentes de imagens.
É muito comum vermos, dentro de uma página de categoria, por exemplo, um produto com uma imagem com 300 pixels de altura e 300 pixels de largura sendo requisitada em uma versão 1000 x 1000.
Isso faz com que a requisição seja muito maior do que o necessário e, consequentemente, aumenta o tempo de carregamento de página. O ideal é fazer a requisição da imagem no tamanho mais próximo do que utilizamos no front-end.
Nem todo load tem que ser lazy
O lazyload atrasa as requisições de imagens, reduzindo o tempo de carregamento das páginas. Mas, se implementado na área crítica, afeta o LCP. Por isso, garanta que apenas as imagens fora da área crítica tenham o recurso lazyload ativado.
O lazyload é um recurso excelente e muito recomendado para questões de performance porque ele adia a requisição de uma imagem até que ela chegue na área crítica (área visível de uma página).
Porém, existe uma regra que é aplicada com frequência: usar lazyload em todos os elementos <img> de uma página. Isso significa que as imagens da área crítica (um banner, logotipo ou imagem de produto, por exemplo) também estarão com esse recurso ativado.
Isso impacta a métrica LCP, também de Core Web Vitals, que mede o tempo que o maior elemento de uma página leva para ser carregado. Quando habilitamos lazyload em todas as imagens, o cronômetro não irá parar de rodar até que ela seja enfim carregada.
Cuidado com os formatos mais modernos de imagens (Webp, Avif, entre outros)
Formatos mais modernos permitem imagens de alta qualidade em arquivos menores, mas nem todos os navegadores são compatíveis. Todos os profissionais que já utilizaram, pelo menos uma vez, alguma ferramenta de medição de performance, como por exemplo o PageSpeed, já devem ter se deparado com recomendações para a utilização de formatos mais modernos de imagens.
Essa é uma sugestão super válida e, de fato, causa um impacto considerável na performance de uma página, pois possibilita imagens com excelente qualidade ocupando um espaço bem menor do que um JPEG ou PNG, por exemplo.
Mas quando trabalhamos com esse tipo de imagem, temos que considerar que nem todos os navegadores são compatíveis com esses formatos. Então, a nossa dica é ter uma opção de fallback caso o dispositivo que o usuário esteja utilizando não seja compatível e, assim, disponibilizar uma versão padrão daquela imagem.
Caso contrário, quando esse usuário acessar a página, irá se deparar com um “buraco” no lugar da imagem e não irá conseguir visualizar, comprometendo a navegação e a experiência dele na página.
Algumas plataformas do mercado já contam com esse recurso de fallback. Porém, outras não. Nesse caso, a recomendação é partir para o uso de CDN.
Compressão, cache e TTL
Garanta que os recursos de cache do servidor estejam ativados e que os arquivos estáticos estejam sendo comprimidos (mod_deflate, gzip, entre outros), reduzindo o tamanho das requisições.
Arquivos estáticos, que não sofrem alterações frequentes, como imagens, podem ter um tempo de vida superior a 1 ano.
Claro que, em alguns casos, quando falamos de plataformas muito grandes, não teremos acesso a essas configurações. Garantir que o servidor esteja fazendo essa compressão talvez precise envolver a plataforma e abrir um chamado para questionar.
Além da compressão, é importante fazer uso também de recursos de cache de navegador. Isso porque dentro de uma jornada de compra, é bem comum o usuário visitar a mesma página diversas vezes. Por isso, é importante garantir que ele terá uma boa experiência em todos esses acessos.
Tendo um recurso de cache do navegador habilitado, é possível fazer com que, após o primeiro acesso, os próximos aconteçam de uma maneira muito mais rápida. E com maior velocidade, podemos fazer uma correlação para mais conversão, não é?
Dá tempo de fazer tudo isso antes da Black Friday 2022?
A resposta é que fazer TODAS essas otimizações talvez não seja possível. Porém, trabalhando com uma priorização focada nos objetivos podem sim trazer ótimos resultados para a Black Friday de 2022.
A partir das recomendações acima, é importante analisar o que, de fato, é uma oportunidade para o seu site. Por exemplo: fazer a segmentação do sitemaps pode envolver várias horas de desenvolvimento da agência. Então essa dica talvez não seja a melhor alocação de recursos no momento.
Para ganhar mais tempo, o ideal pode ser focar na parte de performance. Otimizar as imagens do site, garantir que as Core Web Vitals estão ok, entre outras orientações que compartilhamos no texto acima.
Assim, com certeza você irá garantir resultados positivos na Black Friday 2022.
E se você precisar da ajuda de especialistas para criar e implementar estratégias de SEO personalizadas para o seu negócio, a gente pode te ajudar!
