Práticas recomendadas de SEO para sites de comércio eletrônico React
Publicados: 2022-04-05O React surgiu como uma das principais estruturas JavaScript em uso em vários sites diferentes, e particularmente em sites de comércio eletrônico.
Devido à maneira como são construídos, os sites React têm algumas considerações específicas quando se trata de otimização de mecanismos de pesquisa (SEO), com um conjunto distinto de melhores práticas de SEO para aplicativos React Single Page (SPAs).
Neste guia, veremos como garantir que um site de comércio eletrônico React esteja configurado corretamente para SEO e alguns dos prós e contras de usar o React em um site de comércio eletrônico otimizado para pesquisa.
O que é Reagir?
React é uma biblioteca JavaScript que pode ser usada para construir interfaces de usuário baseadas em componentes comuns de UI. Ele é mantido pela empresa-mãe do Facebook, Meta, juntamente com uma comunidade de desenvolvedores de código aberto, incluindo empresas e indivíduos.
Por ser de código aberto, o React também é gratuito. Ele pode formar a estrutura básica de um aplicativo de página única (SPAs mencionados acima) ou um aplicativo móvel.
Por que o React é bom para e-commerce?
O foco do React na interface do usuário significa que é uma ferramenta útil para criar sites de comércio eletrônico suaves e contínuos que colocam a experiência do usuário (UX) no centro do design.
O conteúdo é veiculado no lado do cliente e as páginas não precisam ser atualizadas, tornando a navegação mais rápida e fácil para os clientes em um site, com menos atrasos no servidor para afetar a velocidade de carregamento da página.
A versatilidade do React significa que ele pode ser usado em sites de comércio eletrônico de desktop e aplicativos móveis, tornando-o uma das opções mais fáceis para desenvolvedores que desejam criar Progressive Web Apps.
Os mecanismos de pesquisa podem rastrear sites React?
Como em qualquer site otimizado para pesquisa, é importante entender como os robôs (e especialmente o Googlebot) veem o conteúdo em um site React.
Em geral, o Google rastreia o site em duas etapas, identificando o conteúdo à medida que avança.
Rastrear o código-fonte
Primeiro, o Googlebot rastreará o site e recuperará o código-fonte, incluindo HTML, cabeçalhos de página e assim por diante.
Renderize o DOM
Em segundo lugar, o Googlebot renderiza o Domain Object Model (DOM), incluindo qualquer JavaScript usado na página – você pode identificar isso usando as Ferramentas do desenvolvedor integradas do Chrome e recursos equivalentes em outros navegadores.
React é uma estrutura JavaScript do lado do cliente, o que significa que o Googlebot pode ter dificuldade em identificar páginas. Isso porque diferente de um site tradicional, o React não envia requisições para o servidor ao navegar de uma página para outra – dificultando para o Google ver as diferentes páginas.
Você pode configurar o React para usar a renderização do lado do servidor, mas o Googlebot ainda não renderizará os arquivos JavaScript e outros recursos baseados no servidor ao navegar em seu site. Por isso, é importante configurar seu site de comércio eletrônico React para SEO de acordo com as melhores práticas.
Problemas comuns de SEO com React
Existem vários problemas comuns de SEO com sites de comércio eletrônico React:
Conteúdo não descoberto / lento para indexar
O Googlebot aloca um 'orçamento de renderização' para cada site que rastreia e normalmente sai assim que esse orçamento for gasto. Isso garante que sites menores recebam sua parcela de atenção do rastreador e evita loops de rastreamento infinitos, por exemplo, em sites que geram URLs dinâmicos durante a navegação.
Como os sites React funcionam como SPAs, todo o site deve ser renderizado antes que todo o seu conteúdo possa ser rastreado. Isso pode atrasar a descoberta de conteúdo e consumir recursos extras do rastreador, o que pode levar a menos páginas rastreadas e indexadas.
A renderização e a pré-renderização do lado do servidor podem aliviar um pouco a carga de recursos dos robôs, ajudando a melhorar a velocidade com que novas páginas aparecem no índice.
Os robôs de pesquisa demoram a perceber o conteúdo atualizado
Este é um desdobramento do problema acima – quando você altera uma página, pode levar algum tempo até que essas alterações sejam filtradas nos resultados da pesquisa.
Novamente, isso ocorre por causa de como as páginas são renderizadas ao usar o React, o que pode fazer com que as páginas atualizadas passem despercebidas por mais tempo pelos recursos finitos do rastreador do Google.
Páginas "profundas" rastreadas raramente (ou nunca)
As páginas enterradas profundamente na hierarquia do seu site são menos propensas a serem alcançadas pelo Googlebot, especialmente se ele já gastou um orçamento de renderização significativo mais acima em sua hierarquia.
Mais uma vez, a pré-renderização pode ser uma ferramenta valiosa para ajudar os rastreadores de pesquisa a penetrar mais profundamente na estrutura de pastas do seu site, antes que eles fiquem sem orçamento de rastreamento atribuível.
[Ebook] Rastreabilidade
Leia o e-bookComo otimizar sites de comércio eletrônico React
Com algumas práticas recomendadas para SEO de comércio eletrônico React, você pode dar ao seu site – e às suas páginas individuais – uma melhor perspectiva de entrar no índice de pesquisa.
URLs de página exclusivos
A prática recomendada para o problema de URLs dinâmicos mencionado acima é fornecer a cada página seu próprio URL estático e exclusivo em seu site. O conteúdo é então associado a um único local permanente – um URL canônico para a página – que os mecanismos de pesquisa podem rastrear, indexar e classificar com confiança em suas páginas de resultados.
React Router é a maneira de conseguir isso em sites React. O React Router pode fornecer a cada página do site sua própria URL permanente, além de alinhar a interface do usuário com uma URL específica.
Reação isomórfica
O Isomorphic React é uma maneira de habilitar a renderização do lado do servidor, para aliviar a pressão nos orçamentos de renderização dos rastreadores. Ele funciona detectando quando o JavaScript está desabilitado no lado do cliente e criando um formulário renderizado no lado do servidor do HTML do site. Se a renderização do lado do cliente estiver disponível, o site será carregado como um React SPA da maneira usual.
Ao fazer isso, o Isomorphic React supera os problemas de visibilidade para os rastreadores de pesquisa, melhorando a capacidade de descoberta das páginas, sem prejudicar a experiência React suave e perfeita para visitantes humanos com o JavaScript do lado do cliente ativado.
Pré-renderização
A pré-renderização é outra maneira de obter um resultado semelhante ao Isomorphic React. Ele funciona gerando uma versão em cache do HTML renderizado, que os rastreadores podem acessar em vez do código-fonte não renderizado.
Os visitantes humanos recebem o site React do lado do cliente, novamente dando a eles todos os benefícios de um SPA suave e rápido como um raio. Existem muitos serviços de pré-renderização para escolher, incluindo Google Puppeteer, Prerender.io e SEO4Ajax.
Otimizando metadados
Por fim, certifique-se de que seu conteúdo tenha metadados otimizados – ainda um elemento importante no SEO on-page, mesmo depois de todos esses anos.
Além de um URL exclusivo e otimizado, cada página deve ter uma tag de título exclusiva e quaisquer outras metatags relevantes, ajudando as páginas a se destacarem e sinalizando os robôs de pesquisa para associar a página a um determinado tópico ou palavra-chave primária.
O React Helmet é uma boa maneira de conseguir isso, dando acesso direto para editar metadados SEO em sites de comércio eletrônico React. Dessa forma, você pode combinar as melhores práticas de SEO da velha escola e palavras-chave de metadados clássicas, com todos os benefícios de um site de comércio eletrônico React moderno e compatível com dispositivos móveis.