Na lista de estatísticas dos principais sites publicada recentemente pela Forbes para 2024, ficamos sabendo que há aproximadamente 1,09 bilhão de sites ativos na Internet (!). Entre mais de um bilhão de sites, como os usuários (e clientes em potencial) encontrarão o seu site? Muito provavelmente, eles começarão com um mecanismo de busca. Entretanto, para que o mecanismo de busca leve os usuários ao seu site, é preciso fazer a lição de casa de SEO.
O SEO garante que seu site seja bem classificado nos mecanismos de pesquisa. Se implementado corretamente, o SEO direciona o tráfego para seu site. No entanto, os sites criados em estruturas JavaScript modernas, como React ou Vue.js, dependem muito da renderização no lado do cliente, e os mecanismos de pesquisa geralmente têm dificuldade para indexar esses tipos de sites corretamente. Assim, você fica com pouca visibilidade nos resultados de pesquisa.
Isso nos leva à pré-renderização. A pré-renderização envolve a geração de uma versão HTML estática de suas páginas da Web que um mecanismo de pesquisa pode rastrear e indexar facilmente. Essa técnica pode afetar drasticamente o sucesso do SEO de seu site.
Nesta publicação, veremos como os serviços de pré-renderização da Prerender.io podem ajudá-lo a superar os obstáculos de SEO ao usar essas estruturas. Também indicaremos a direção certa para implementar a pré-renderização no servidor Web ou no nível do aplicativo.
Vamos começar.
O desafio de SEO com estruturas JavaScript
Por que a SEO é um desafio quando se trata de usar estruturas como React ou Vue.js? Os bots tradicionais dos mecanismos de busca são projetados para ler HTML estático. Outros podem lidar com parte do JavaScript e renderizar páginas parcialmente, mas eles têm suas limitações. Quando o seu site é pesado em renderização no lado do cliente, um mecanismo de busca provavelmente não rastreará e renderizará a página até o fim, portanto, não verá o conteúdo completo e real para indexação.
Como exemplo, o Google fornece a seguinte orientação aos criadores de sites renderizados no lado do cliente:
A renderização dinâmica foi uma solução alternativa e não uma solução de longo prazo para problemas com conteúdo gerado por JavaScript nos mecanismos de pesquisa. Em vez disso, recomendamos que você use a renderização no lado do servidor, a renderização estática ou a hidratação como solução.
Qual é o impacto em seu SEO? Naturalmente, a indexação parcial ou atrasada afetará as classificações de pesquisa do seu site. Como resultado, seu site pode sofrer atrasos para aparecer nos resultados de pesquisa, o que se traduz em oportunidades perdidas de tráfego orgânico. A indexação incompleta ou atrasada pode significar que um mecanismo de busca precisa executar um segundo rastreamento do seu site, o que provocará mais atrasos.
Observando novamente a dica do Google acima, vemos a recomendação de usar a "renderização estática" - e, até certo ponto, é isso que a pré-renderização proporciona.
Como o Prerender.io resolve esse problema
A pré-renderização basicamente preenche a lacuna entre os recursos dinâmicos das estruturas modernas de JavaScript e a necessidade de conteúdo HTML estático com o qual os bots dos mecanismos de pesquisa podem trabalhar. Vamos dar uma olhada em como isso funciona com o Prerender.io.
O Prerender.io executa o JavaScript em suas páginas em um navegador sem cabeça, renderizando o conteúdo completo. Em seguida, ele salva esse conteúdo renderizado como HTML estático. Quando um robô de mecanismo de pesquisa rastreia seu site e solicita uma determinada página, você faz com que o Prerender.io forneça o HTML pré-renderizado em vez de sua página com muito JavaScript. Dessa forma, os mecanismos de pesquisa podem acessar de forma rápida e fácil o conteúdo completo de suas páginas para indexação, sem a necessidade de processar JavaScript complexo.
Quais são alguns dos benefícios de usar essa abordagem?
- SEO aprimorado: Como o Prerender.io pode fornecer aos mecanismos de pesquisa HTML totalmente renderizado, seu conteúdo será indexado correta e prontamente. Isso melhora suas classificações de pesquisa e aumenta a visibilidade do site.
- Carregamentos de página mais rápidos: Ao usar o Prerender.io para fornecer HTML estático a um bot de mecanismo de pesquisa, você reduz a carga em seus servidores. Com rastreadores de inúmeros mecanismos de pesquisa em constante operação, transferir as solicitações deles para o Prerender.io pode aumentar o tempo de carregamento da página e melhorar a experiência do usuário para seus usuários reais.
- Melhor experiência do usuário: Carregamentos de página mais rápidos e indexação mais precisa aumentarão as chances de os usuários encontrarem seu site rapidamente e desfrutarem de uma experiência de navegação mais positiva.
Já vimos o que, como e por quê. Agora, vamos aos detalhes básicos.
Implementação do Prerender.io em seu aplicativo da Web
Para integrar o Prerender.io ao seu aplicativo Web, as duas abordagens mais diretas seriam fazê-lo no nível do servidor Web ou no nível do código do aplicativo. Vamos considerar cada uma delas com mais detalhes.
Abordagem 1: no servidor da Web
Se você estiver implantando um aplicativo Node.js no Linode, provavelmente estará usando o aplicativo de marketplace de um cliqueNode.js para ajudá-lo a começar a trabalhar rapidamente. Depois de criar um novo Linode, o aplicativo o ajudará a ativar o Nginx, o Node.js, o NPM e o PM2.
Para usar o Prerender.io com Nginx, você pode seguir o guia de integração para Nginx. Primeiro, você criará uma cópia de backup do arquivo nginx.conf do seu sistema. Você usará o módulo ngx_http_map_module para criar algumas variáveis com base nos valores de outras variáveis.
Você editará o arquivo nginx.conf para inserir seções do arquivo de configuração de exemplo Nginx do Prerender.io. Primeiro, você adicionará os seguintes blocos de mapa à sua seção http.
map $http_user_agent $prerender_ua { |
O primeiro map O bloco acima examina o agente do usuário de uma solicitação HTTP. Se o agente do usuário estiver na lista de bots de mecanismos de pesquisa, isso aciona várias outras variáveis e configurações para preparar o redirecionamento para o Prerender.io.
Em seguida, na seção principal location adicione o seguinte para reescrever o URL e acrescentar o prefixo prerenderio/ caminho:
if ($prerender = 1) { |
Por fim, adicione o bloco de localização para o prerenderio/ caminho:
location /prerenderio { |
Este location diz ao Prerender.io para renderizar a página de destino pretendida e servir o HTML estático. Para autenticação, certifique-se de substituir YOUR_TOKEN com seu token de conta Prerender.io real. No caso de o Prerender.io já ter renderizado essa página no passado, ele poderá servir uma versão em cache (dependendo de como você Configurar o cache em sua conta do Prerender.io).
O guia de integração Nginx do Prerender.io é bastante abrangente. Se você usar o Apache em vez do Nginx, poderá consultar o guia de integração do servidor da Web Apache .
As quatro etapas básicas para integrar o Prerender.io
De modo geral, independentemente da abordagem, a integração do Prerender.io ao seu aplicativo envolve as seguintes etapas:
- Detectar rastreadores. Inspecionar o cabeçalho do agente do usuário nas solicitações. No exemplo Nginx acima, precisamos apenas examinar o cabeçalho
$http_user_agentvariável. - Redirecionar para prerender.io. Encaminhar solicitações de bots para o Prerender.io para renderização.
- Modifique os caminhos de solicitação. Certifique-se de que seus caminhos de solicitação estejam formatados corretamente para o Prerender.io, que espera o URL completo como caminho.
- Gerenciar o cache. Encontre o equilíbrio entre aproveitar o Prerender.io para servir páginas HTML estáticas em cache (para velocidade) e, ao mesmo tempo, direcionar o Prerender.io para armazenar novamente em cache o conteúdo atualizado em seu site (para atualização). Consulte as orientações sobre cache do Prerender.io.
Abordagem 2: No código do aplicativo (Node.js Express)
Se você tiver um aplicativo que usa uma estrutura JavaScript (como React, Vue.js ou Angular) para o front-end, poderá configurar o servidor de aplicativos para que o front-end execute as quatro etapas básicas listadas acima.
Se você usar o Express para atender ao seu front-end, poderá aproveitar o middleware pré-criado do Prerender.io, que fará tudo isso para você. Para obter mais detalhes, consulte o guia de integração do Node da Prerender.io. Para explicar melhor, veja a seguir o que está envolvido:
Instale o pacote Node.js :
npm install prerender-node --save |
Adicione o seguinte código ao arquivo index.js ou app.js principal, onde o aplicativo do servidor Express está definido:
app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN')); |
Novamente, para autenticação, certifique-se de substituir YOUR_TOKEN com seu token de conta Prerender.io real.
Em seguida, reinicie o servidor Express.
Isso é tudo o que há para fazer!
Conclusão
A pré-renderização de suas páginas pode ajudá-lo a resolver os desafios de SEO ao usar estruturas modernas de JavaScript e renderização no lado do cliente. O Prerender.io renderiza suas páginas com antecedência e, em seguida, fornece esse HTML estático aos rastreadores dos mecanismos de pesquisa. Dessa forma, você pode garantir que seu conteúdo seja totalmente acessível aos bots dos mecanismos de pesquisa, resultando em indexação precisa e melhores classificações nos resultados de pesquisa. Ao resolver esse problema de SEO, seu site terá mais visibilidade e maior tráfego orgânico.
Ao combinar essas técnicas de pré-renderização com as soluções de computação em nuvem fáceis de gerenciar da Akamai, você terá websites otimizados para SEO em funcionamento em pouco tempo. Para obter mais dicas e guias sobre como obter o máximo dos serviços de computação em nuvem da Akamai ao implantar suas aplicações, confira nossa rica biblioteca de documentos.
Comentários