Blog Lume

Desafios de SPA e SEO

Quando pensamos na experiência do usuário, queremos entregar uma navegação cada vez mais ágil e intuitiva. Para atingir esse objetivo, a tecnologia de SPA é uma das escolhidas por muitas empresas em seus sites. Porém, como tudo na vida, ela tem os seus prós e contras. Um dos principais desafios é o uso de SPA junto com estratégias de conteúdo SEO. E é exatamente sobre esse ponto que vamos falar neste texto.

O que é SPA?

SPA é uma sigla para Single Page Application e, basicamente, funciona como se a navegação em todo o site ocorresse em uma página só. Por exemplo: quando você acessa um site e navega pelas diferentes páginas disponíveis, cada comando gera o carregamento de novos arquivos (HTML, CSS e JavaScript) de acordo com o conteúdo que cada menu precisa mostrar.

Para entender melhor: em um site normal, a cada nova página acessada, novas requisições são feitas e o servidor entrega o arquivo final HTML para o navegador, que lê e interpreta o seu conteúdo para mostrar ao usuário. Esse processo é chamado de server-side render.

Já num site SPA, essa requisição é feita por meio de JavaScript. É o navegador que monta o HTML que aparece para o usuário. Esse tipo de renderização é chamado de client-side render.

Quais os desafios para SEO?

Apesar dos avanços e da modernização dos bots que interpretam essas páginas, eles ainda têm dificuldades em ler esses HTMLs montados no lado do cliente. Por isso, o SPA é um desafio para o SEO, pois acrescenta mais etapas ao processo de indexação.

Se o HTML de cada página for renderizado no navegador, o funcionamento das estratégias é prejudicado. Isso porque é nesse código que estão recursos como o título da página, meta descrição, links internos, entre outros que o Google precisa para encontrar o conteúdo que você deseja entregar aos usuários. 

Resumindo: seja qual for a tecnologia, o desafio aqui é fazer o SPA carregar todos os requisitos que precisamos em SEO. E isso depende da forma como o site será desenvolvido e o conteúdo renderizado. 

Algumas tecnologias, como a nova plataforma da Oracle Cloud Commerce (OCC), têm a interface toda em SPA, além de bibliotecas como React e Angular, por exemplo. Nesses casos, é preciso fazer uma análise do que deve ser adaptado e refazer a renderização para o HTML padrão.

Essa etapa de análise e adaptações é essencial para atingir os resultados esperados com SEO. Especificamente para e-commerce, sempre que for avaliar uma mudança estrutural ou de plataforma, é importante reservar um tempo para estudar os possíveis impactos nas estratégias de SEO e, consequentemente, nos resultados orgânicos.

Como um site em SPA é indexado no Google

Todo esse desafio existe porque a indexação de um site em SPA é diferente de um portal comum. Abaixo, explicamos como ela ocorre.

  • Rastreamento padrão

O processo de rastreamento padrão, ou seja, quando um site não é SPA, é linear. O robô descobre uma página e a coloca em uma fila de rastreio. Em um segundo momento, ele faz o rastreamento: entra no site, segue todos os links e parte para a etapa de processamento, onde são renderizadas todas as páginas encontradas.

A partir disso, o site vai para o índice, o banco de dados oficial do Google, o que significa que a página foi indexada. 

  • Rastreamento com SPA

Esse processo ganha novas etapas quando um site é SPA. Como ele é JavaScript, o robô padrão, que executa o rastreamento, não consegue acessar o conteúdo. Então, um segundo robô assume a tarefa. Essa mudança torna o processo bem mais lento em comparação ao padrão. 

Essa etapa a mais para a indexação resulta em prejuízos em relação à agilidade e à fidelidade do conteúdo dentro do Google. Por exemplo, quando o valor de um produto muda em uma loja virtual da Oracle, que carrega todo o conteúdo por JavaScript, essa atualização de novo preço não será tão rápida. 

É bem provável que o usuário faça uma busca, encontre o produto pelo preço antigo e se surpreenda ao entrar no site e ver o novo valor (para mais ou para menos). 

Nesses casos em que o site é todo em SPA, um dos caminhos é priorizar, pelo menos, que o título, meta descrição e informações importantes das páginas não sejam preenchidos por meio de JavaScript, mas sim embutidos no HTML

Tem como tornar a tecnologia SPA uma SEO friendly?

A resposta é: tem sim! E para fazer isso da melhor forma, o ideal é que esse tema ganhe atenção logo no início do projeto, antes de partir para o desenvolvimento do site em SPA.

Existem algumas decisões iniciais que podem facilitar esse processo de indexação e rastreamento e, uma delas, é a entrega de um documento diferente para o robô

Na prática, um fluxo padrão do usuário em SPA funciona assim: quando um usuário acessa um site com essa tecnologia, recebe um HTML com todos os JavaScripts que vão montar a página. O servidor manda as as informações que vão ser executadas no navegador para conseguir renderizar a página.

Só que quando é um robô executando essa requisição, ele consegue entregar uma versão pré-renderizada do HTML. Assim, o próprio servidor adiciona algumas etapas antes, que é a renderização desse HTML, e no final entrega o código estático onde o robô conseguirá ler e identificar todos os links e conteúdos. 

Essa é uma solução que funciona muito bem se adotada logo no início do desenvolvimento de um site. Porém, não significa que não seja possível fazer essa mudança em um site já existente, embora exija um esforço maior, já que será necessário voltar várias etapas para fazer alterações.

Independentemente da tecnologia escolhida, a Lume está sempre pronta para ajudar. Ficou com alguma dúvida ou quer saber mais sobre SPA e SEO? Entre em contato ou deixe um comentário e vamos conversar! 

Veja também

Receba no seu e-mail os melhores conteúdos sobre SEO e Analytics e fique por dentro das novidades com a nossa newsletter.

    crossmenu