Como você sabe, a otimização do mecanismo de pesquisa de aplicativos de página única não é uma tarefa fácil e sua solução pode exigir custos trabalhistas significativos, habilidades especiais dos desenvolvedores e custos financeiros do cliente. Que soluções a comunidade oferece para tornar o mecanismo de pesquisa do site
React amigável o mais rápido e o mais barato possível?
Algum lugar-comum sobre SEO
Aproximadamente 92% do tráfego vem da primeira página dos resultados de consultas de mecanismos de pesquisa , com 75% do tráfego proveniente dos cinco primeiros sites.
O Google ocupa mais de 90% do mercado de mecanismos de busca.
O Search Engine Optimization (SEO) é o processo de estruturação e organização de um site, a fim de aumentar o volume e melhorar a qualidade de seu tráfego, aumentando sua posição e a frequência de ocorrência nos resultados dos mecanismos de pesquisa, com foco em palavras-chave que revelam as especificidades do site.
O principal objetivo do processo de SEO é melhorar a visibilidade do site na Internet e aumentar o tráfego do site.
Os mecanismos de pesquisa são baseados no cache implacável do conteúdo do site. Devido ao fato de o processo ser automatizado, é muito importante que o conteúdo seja estruturado e formatado de maneira a ser entendida pela máquina. O processo de SEO inclui otimizar o desempenho do site, processar seu conteúdo para aumentar a relevância do conteúdo para as palavras-chave, além de fornecer ao site ferramentas para ajudar os robôs de pesquisa a entendê-lo.
Isso pode parecer bastante simples, mas no caso de sites criados no React, esse nem sempre é o caso.
Reagir e SEO
Brevemente sobre SPA
Um aplicativo de página única ou SPA é um aplicativo da Web ou site que interage com o usuário alterando dinamicamente as páginas atuais, em vez de carregar novas páginas do servidor. O SPA trabalha rápido porque a maioria dos recursos (HTML + CSS + Scripts) é carregada apenas uma vez ao longo da vida. O aplicativo recebe e retorna apenas dados.
Um exemplo de tecnologia que pode ser usada para criar SPAs é o ReactJS , uma biblioteca que é bem otimizada para trabalhar em navegadores personalizados ( mais aqui ) .
Principais problemas de SPA com SEO
O SPA é, de fato, um programa JavaScript em execução no navegador e, se o bot da web de pesquisa não souber executar scripts, não poderá obter a página renderizada corretamente e indexá-la.
Em outubro de 2015, o Google fez um anúncio importante de que seus bots executariam arquivos JS em sites, se tiverem o direito de fazê-lo. E, embora essa declaração pareça muito positiva e seus robôs de pesquisa estejam se tornando mais sofisticados, confiar na capacidade de executar JavaScript é arriscado . O Googlebot pode recusar o JavaScript por vários motivos ( mais detalhes aqui ):
- não conformidade com a regra “5 segundos de ouro” (mais detalhes aqui e aqui);
- a impossibilidade de rastrear um site: os sistemas do Google devem poder rastrear um site, dada sua estrutura (mais detalhes aqui);
- a impossibilidade de analisar o site: os sistemas do Google não devem ter problemas durante a análise do site usando as tecnologias usadas para formar suas páginas (mais aqui);
- erros no código etc.
Bots de outros mecanismos de pesquisa como Yahoo, Bing, Baidu etc. não suportam JavaScript e não veem as páginas do SPA em branco.
Por esses motivos, é necessário procurar maneiras de renderizar o site do SPA no lado do servidor, a fim de dar oportunidade garantida aos robôs de pesquisa verem seu conteúdo na forma correta.
Soluções de SEO para sites de SPA
Existem duas maneiras principais de resolver os problemas de SEO enfrentados pelos sites de SPA:
- SPA isomórfico (universal);
- Pré-renderização.
Ferramentas adicionais de melhoria de SEO para sites de reação:
- React Router v4 : componente para criar "rotas" amigáveis ao SEO em aplicativos React;
- React Helmet : talvez o componente mais importante para o fornecimento de aplicativos SEO React, oferecendo a capacidade de gerenciar as meta-tags do aplicativo e é caracterizado pela facilidade de uso.
Como o React isomórfico ajuda no SEO?
Um site isomorphic React detecta automaticamente se o JavaScript do lado do cliente está desativado. Se o JavaScript estiver desativado, o script será executado no servidor e o resultado (HTML + CSS estático) será enviado ao cliente. Nesse caso, todos os atributos e conteúdos necessários para o SEO estão presentes no momento da inicialização.
Se o JavaScript estiver ativado, o site isomorphic React, no caso mais simples, pode carregar da maneira usual, quando tudo é renderizado no navegador ou de forma inteligente : a renderização parcial é executada no lado do servidor, o que significa que apenas a primeira renderização do DOM é executada no servidor e todas as subseqüentes são feitas diretamente no navegador Em outras palavras, o navegador recebe o DOM e o JavaScript originais totalmente renderizados e, quando o estado do aplicativo é alterado, ele é responsável por todas as atualizações subseqüentes.
Acredita-se que uma solução isomórfica seja o melhor método para resolver problemas de SEO de aplicativos da Web SPA, mas o lamentável é que essas soluções para o React SPA, no momento, são difíceis de implementar :
- os boilerplates populares do React, por exemplo, create-react-app , react-boilerplate , não suportam isomorfismo. Dan Abramov , desenvolvedor do create-react-app :
Por fim, é muito difícil adicionar a renderização do lado do servidor de maneira significativa, sem também tomar decisões críticas. No momento, não vamos tomar essas decisões;
- os clichês isomórficos existentes são difíceis de aprender;
- as soluções existentes são imperfeitas:
- geralmente o código no servidor e no cliente tem muitas diferenças;
- em caso de coincidência quase completa da base de código, o código se torna lento e propenso a falhas.
Parece que muitos desenvolvedores apoiarão a opinião expressa por MrCheater na discussão do artigo "Aplicações de reação isomórfica: desempenho e dimensionamento" :
O tema de "aplicações web isomórficas" tem muitos inimigos. Infelizmente. Embora seja fácil entender por que, tudo é muito difícil de programar, centenas de artigos sobre esse tópico, mas a saída ainda é um cliente assustador, com 3 megabytes. Mas, em breve, todos os problemas e abordagens de suas soluções serão padronizados, e teremos um aplicativo isomórfico leve de página única.
Resolvendo Problema de SEO Através da Renderização
A pré-renderização é o processo de pré-renderização de páginas em um site para prepará-las para exibição por um bot da web de pesquisa. O serviço pré-renderizador intercepta solicitações ao site, determina o tipo de cliente pela solicitação de "user-agent" e, se a solicitação foi feita pelo web bot, o serviço envia de volta a versão estática em cache renderizada anteriormente do site. Se a solicitação foi feita por um bot da web que não é de pesquisa, a página normal é carregada. A pré-renderização é usada apenas para otimizar o trabalho com web bots e, possivelmente, navegadores desatualizados. Serviços Prerender, como Prerender.cloud e similares, usam navegadores sem cabeça, na maioria das vezes o Chrome sem cabeça . Essa abordagem permite que você use as estruturas JavaScript mais recentes, como React, Ember e Angular, para criar um site e não confiar na renderização do lado do servidor.
Vantagens da pré-renderização:
- o pré-renderizador é capaz de executar todos os tipos de JavaScript moderno e produz HTML estático;
- prerender suporta as mais recentes inovações da web;
- é necessária uma modificação mínima da base de código do aplicativo Web, se houver ;
- os custos de desenvolvimento e manutenção de sites são reduzidos ;
- facilidade de implementação.
Desvantagens da pré-renderização :
- não é adequado para páginas que exibem dados que mudam frequentemente;
- não é aceitável para páginas que contêm dados pessoais do usuário. No entanto, essas páginas não são muito úteis para SEO e não devem ser indexadas;
- no caso de um site grande com um número significativo de páginas, o processo de pré-renderização pode levar um tempo considerável;
- serviços pré-renderizados são pagos.
Pré-renderizadores, onde obtê-los
A comunidade desenvolveu um número significativo de pré-candidatos: veja, por exemplo, aqui.
Entre muitas opções, o OpenSource Prerender é interessante - uma versão de código aberto do prerender usada no serviço prerender.io , que pode ser implementado em seu próprio servidor que suporta Node.js.
Outra coisa interessante é que ele não requer um servidor, o pré- renderizador é o Prerender SPA Plugin , que é conectado simplesmente modificando o webpack.config.js, por exemplo, create- react -app ou react-boilerplate . O processo de pré-renderização é realizado no processo de "construção" do site e o resultado é colocado em index.html.
Você pode usar serviços prontos que fornecem serviços de pré-renderização, uma lista de alguns é fornecida aqui e aqui.
Aqui você também pode se familiarizar com a experiência prática ao trabalhar com pré-candidatos.
De particular interesse é o serviço Roast.io , que fornece serviços de CDN e de pré-renderização (!) . O serviço também automaticamente (se não houver nenhum) adiciona metatags "o link da captura de tela se abre" que melhoram a exibição do site nas redes sociais.
O serviço está localizado na AWS CDN , é executado no protocolo HTTPS, configurado para o SPA e o React em particular, é muito fácil de usar. Existe uma opção de hospedagem gratuita (10 GB de largura de banda, 500 páginas SSR).
Então:
A pré-renderização, por não ser uma solução ideal, parece preferível para uma parte significativa dos desenvolvedores de aplicativos React devido ao fato de:
- a conclusão do código do aplicativo não é necessária - você pode usar com segurança o seu boilerplate favorito;
- existe uma grande variedade de implementações - "middleware", "webpack", "CDN + prerender", "opensource" e pago;
- a introdução da pré-renderização é um processo simples, especialmente no caso de implementações “CDN + prerender” ;
- Há um suporte sério do Google na forma do Chrome sem cabeça ;
- Os custos de desenvolvimento e suporte de aplicativos são reduzidos.
- existem opções para o uso gratuito de serviços da Web pré-renderizados.
No entanto , você precisa pensar em uma versão isomórfica (universal) do site se:
- Aplicativo da Web exibe dados alterados com frequência;
- Um aplicativo da web contém centenas de páginas, porque o processo de pré-renderização pode levar uma quantidade considerável de tempo.
Se o site contiver apenas páginas estáticas (HTML + CSS), não será necessário isomorfismo nem pré-renderização.