Na lista recentemente publicada pela Forbes das principais estatísticas de sítios Web para 2024, ficámos a saber que existem atualmente cerca de 1,09 mil milhões de sítios Web na Internet (!). Entre mais de mil milhões de sítios Web, como é que os utilizadores (e potenciais clientes) encontram o seu sítio Web? Muito provavelmente, começarão por um motor de busca. No entanto, para que o motor de busca conduza os utilizadores ao seu sítio, é necessário fazer o trabalho de casa de SEO.
A SEO garante que o seu sítio Web é bem classificado nos motores de busca. Se for implementada corretamente, a SEO conduz o tráfego para o seu site. No entanto, os sites criados em estruturas JavaScript modernas, como React ou Vue.js, dependem muito da renderização do lado do cliente, e os motores de busca têm muitas vezes dificuldade em indexar corretamente este tipo de sites. Assim, fica com pouca visibilidade nos resultados de pesquisa.
Isto leva-nos à pré-renderização. A pré-renderização envolve a geração de uma versão HTML estática das suas páginas Web que um motor de busca pode facilmente rastrear e indexar. Esta técnica pode ter um impacto dramático no sucesso de SEO do seu sítio.
Neste post, veremos como os serviços de pré-renderização do Prerender.io podem ajudá-lo a superar os obstáculos de SEO ao usar esses frameworks. Também indicaremos a direção certa para implementar a pré-renderização no servidor Web ou no nível do aplicativo.
Vamos lá.
O desafio de SEO com estruturas JavaScript
Porque é que a SEO é um desafio quando se trata de utilizar estruturas como React ou Vue.js? Os bots tradicionais dos motores de busca são concebidos para ler HTML estático. Outros podem lidar com parte do JavaScript e renderizar páginas parcialmente, mas têm as suas limitações. Quando o seu site está muito dependente da renderização do lado do cliente, é muito provável que um motor de pesquisa não rastreie e renderize a página na totalidade, pelo que não verá o conteúdo completo e real para indexação.
A título de exemplo, o Google fornece as seguintes orientações aos criadores de sítios renderizados do lado do cliente:
A renderização dinâmica era uma solução alternativa e não uma solução a longo prazo para problemas com conteúdo gerado por JavaScript nos motores de busca. Em vez disso, recomendamos que utilize a renderização do lado do servidor, a renderização estática ou a hidratação como solução.
Qual é o impacto na sua SEO? Naturalmente, a indexação parcial ou atrasada terá impacto nas classificações de pesquisa do seu sítio Web. Consequentemente, o seu sítio pode sofrer atrasos na apresentação 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 motor de busca tem de efetuar uma segunda pesquisa do seu sítio, o que provocará mais atrasos.
Olhando novamente para a dica do Google acima, vemos a recomendação de usar "renderização estática" - e, até certo ponto, é isso que a pré-renderização proporciona.
Como é que o Prerender.io resolve este problema
A pré-renderização essencialmente preenche a lacuna entre os recursos dinâmicos dos frameworks JavaScript modernos e a necessidade de conteúdo HTML estático com o qual os bots dos mecanismos de pesquisa podem trabalhar. Vamos ver como isso funciona com o Prerender.io.
O Prerender.io executa o JavaScript nas suas páginas num navegador sem cabeça, renderizando o conteúdo completo. Em seguida, ele salva esse conteúdo renderizado como HTML estático. Quando um bot de um motor de busca rastreia o seu site e pede uma determinada página, o Prerender.io serve o HTML pré-renderizado em vez da 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 das suas páginas para indexação - sem precisar processar JavaScript complexo.
Quais são algumas das vantagens de utilizar esta abordagem?
- SEO melhorado: Uma vez que o Prerender.io pode fornecer aos motores de busca um HTML totalmente processado, o seu conteúdo será indexado correta e prontamente. Isto melhora as suas classificações de pesquisa e aumenta a visibilidade do site.
- Carregamentos de página mais rápidos: Quando utiliza o Prerender.io para fornecer HTML estático a um robot de um motor de busca, reduz a carga nos seus servidores. Com crawlers de inúmeros motores de busca em constante funcionamento, transferir os seus pedidos para o Prerender.io pode melhorar os tempos de carregamento da página e melhorar a experiência do utilizador para os seus utilizadores reais.
- Melhor experiência do utilizador: Carregamentos de página mais rápidos e indexação mais precisa aumentarão as hipóteses de os utilizadores encontrarem o seu site rapidamente e desfrutarem de uma experiência de navegação mais positiva.
Já vimos o quê, o como e o porquê. Agora, vamos às porcas e parafusos.
Implementando Prerender.io em seu aplicativo Web
Para integrar o Prerender.io na sua aplicação Web, as duas abordagens mais diretas seriam fazê-lo ao nível do servidor Web ou ao nível do código da aplicação. Vamos considerar cada uma delas com mais detalhes.
Abordagem 1: No servidor Web
Se estiver a implementar uma aplicação Node.js no Linode, é provável que esteja a utilizar a aplicação de mercado de um cliqueNode.js para o ajudar a começar a funcionar rapidamente. Depois de criar um novo Linode, o aplicativo ajudará você a ativar Nginx, Node.js, NPM e PM2.
Para usar o Prerender.io com Nginx, você pode seguir o guia de integração para Nginx. Primeiro, crie uma cópia de segurança do ficheiro 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á seu 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 utilizador de um pedido HTTP. Se o agente do utilizador estiver na lista de bots dos motores de busca, isto desencadeia várias outras variáveis e configurações para preparar o redireccionamento para Prerender.io.
Em seguida, dentro da 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 { |
Isto 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 o seu token de conta Prerender.io real. No caso de Prerender.io já ter renderizado esta página no passado, ele pode servir uma versão em cache (dependendo de como você configurar o armazenamento em cache na tua conta Prerender.io).
O guia de integração Nginx do Prerender.io é bastante abrangente. Se utilizar Apache em vez de Nginx, pode consultar o guia de integração para o servidor Web Apache .
Os quatro passos básicos para integrar o Prerender.io
De um modo geral, independentemente da abordagem, a integração do Prerender.io na sua aplicação envolve os seguintes passos:
- Detetar rastreadores. Inspecionar o cabeçalho do agente do utilizador nos pedidos. No exemplo Nginx acima, precisamos apenas de ver o cabeçalho
$http_user_agentvariável. - Redirecionar para prerender.io. Encaminhar pedidos de bots para Prerender.io para renderização.
- Modificar 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 o caminho.
- Gerenciar o armazenamento em cache. Encontre o equilíbrio entre aproveitar o Prerender.io para servir páginas HTML estáticas em cache (para velocidade) e direcionar o Prerender.io para recache de conteúdo atualizado em seu site (para atualização). Consulte as orientações sobre o armazenamento em cache do Prerender.io.
Abordagem 2: No código da aplicação (Node.js Express)
Se tiver uma aplicação que utilize uma estrutura JavaScript (como React, Vue.js ou Angular) para o front end, pode configurar o servidor de aplicações para que o front end execute os quatro passos básicos indicados acima.
Se você usar o Express para servir seu front-end, poderá tirar proveito do middleware pré-construído do Prerender.io, que fará tudo isso para você. Você pode ver o guia de integração do Node do Prerender.io para obter mais detalhes. Para explicar melhor, veja o que está envolvido:
Instale o pacote Node.js :
npm install prerender-node --save |
Adicione o seguinte código ao seu ficheiro principal index.js ou app.js onde a sua aplicação do servidor Express está definida:
app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN')); |
Mais uma vez, para autenticação, certifique-se de que substitui YOUR_TOKEN com o seu token de conta Prerender.io real.
Em seguida, reinicie o servidor Express.
É tudo o que há para fazer!
Conclusão
A pré-renderização das suas páginas pode ajudá-lo a resolver os desafios de SEO ao utilizar estruturas JavaScript modernas e renderização do lado do cliente. O Prerender.io renderiza as suas páginas antecipadamente e depois entrega esse HTML estático aos rastreadores dos motores de busca. Desta forma, pode certificar-se de que o seu conteúdo está totalmente acessível aos bots dos motores de busca, resultando numa indexação precisa e em melhores classificações nos resultados de pesquisa. Ao resolver este problema de SEO, o seu sítio Web terá uma melhor visibilidade e um 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 à medida que você implanta suas aplicações, confira nossa rica biblioteca de documentos.
Comentários