Introdução
Ao escolher a pilha de tecnologia para seu aplicativo, você deve fazer várias considerações. A linguagem de programação e a estrutura escolhidas afetam o tempo de desenvolvimento, o desempenho do aplicativo e a capacidade de descoberta on-line. Uma das maneiras mais importantes de se descobrir on – line é através de pesquisas orgânicas nos mecanismos de pesquisa. Os mecanismos de pesquisa decidem quais resultados serão exibidos com base em alguns fatores-chave. Eles geralmente estão sob o controle do desenvolvedor e você pode “otimizá-los” para melhorar a capacidade de pesquisa do seu aplicativo. Isso é conhecido como Search Engine Optimization (SEO), e é um dos aspectos mais importantes na criação e comercialização de seu produto . Na próxima seção, discutiremos algumas das tags de SEO mais essenciais que todas as páginas da web devem ter. Em seguida, avançaremos para considerações de SEO baseadas em estruturas.
Tags de SEO essenciais (das quais sua página não pode ficar sem)
Título
O título é uma das partes mais importantes do SEO de uma página. Este é o título usado pelos mecanismos de pesquisa ao exibir sua página na lista de resultados. Também é o título usado quando você compartilha sua página nas mídias sociais. Você pode definir o título da sua página da web assim:
<head>
<title>Page Title</title>
</head>Descrição
A descrição da página é a descrição que aparece abaixo do título nos resultados do mecanismo de pesquisa. É também a descrição usada em ações. Para definir a descrição da sua página da web, basta adicionar este:
<head>
<meta name="description" content="This is the description of the page" />
</head>Abrir imagem de gráfico
Essa tag não importa muito nos resultados dos mecanismos de pesquisa, mas é vital para as mídias sociais. Ele permite que você escolha qual imagem será exibida quando a página for compartilhada em sites de mídia social como Twitter , Facebook e LinkedIn. Defina uma imagem atraente por meio dessa tag para garantir que seu link atraia muita atenção.
<head>
<meta property="og:image" content="https:/yourdomain.com/image.png"/>
</head>
Uma configuração com todas as tags SEO necessárias seria assim:
<head>
<title>Page Title</title>
<meta name="description" content="This is the description of the page" />
<meta property="og:image" content="https:/yourdomain.com/image.png"/>
</head>
Na próxima seção, discutiremos como você pode inserir essas tags nas suas páginas da Web, de acordo com a pilha técnica do seu aplicativo.
Tipos de estruturas e suas implicações
Sem estrutura – HTML puro
Se você não estiver usando nenhuma estrutura baseada em Javascript para criar seu aplicativo , todas as tags SEO estarão sob seu controle para cada página por meio do arquivo HTML. Portanto, nenhuma biblioteca especial é necessária para definir as tags.
Os rastreadores de mecanismo de pesquisa também gostam dessa configuração porque permite rastrear facilmente suas páginas.
Usando uma estrutura (JS ou aplicativos renderizados pelo servidor)
Enquanto falamos sobre a otimização do SEO para aplicativos renderizados pela estrutura, focaremos especificamente na estrutura do React e na otimização para o mecanismo de pesquisa do Google. No entanto, a seção a seguir ainda será relevante para todas as estruturas e mecanismos de pesquisa.
No React, a maneira mais comum de renderização é a renderização do lado do cliente. Em essência, é um único arquivo raiz HTML com um script React anexado a ele que renderiza a página da Web em tempo de execução. Todas as rotas são geradas apenas sobre esse arquivo HTML específico. Isso acontece no lado do cliente depois que uma rota é consultada e os dados são recebidos. É por isso que é chamado de renderização do lado do cliente. No entanto, o desenvolvedor não tem controle sobre as tags SEO nesse caso, pois existe apenas um único arquivo HTML. Portanto, em casos como esses, certas bibliotecas são usadas para definir tags de SEO dinamicamente.
Mas há outro problema que os aplicativos renderizados pelo lado do cliente enfrentam. Os rastreadores de mecanismo de pesquisa não podem rastrear essas páginas da Web corretamente porque as páginas são geradas em tempo de execução. Para resolver isso, algumas adições foram feitas pelos desenvolvedores de rastreadores da web. Por exemplo, o rastreador da Web do Google enfileira páginas renderizadas em JS para renderização, se uma página for detectada como sendo renderizada em JS.
No entanto, a indexação do mecanismo de pesquisa para uma página desse tipo é adiada até que o JS seja renderizado e a página seja legível por um bot. O bot precisa fazer isso em todas as páginas do seu site. Como é um processo longo, os erros que ocorrem em qualquer etapa impedem que a página seja indexada pelo mecanismo de pesquisa.
Para combater esses problemas, o Google sugere as seguintes soluções:
Pré-renderização
A pré-renderização é a técnica de conversão de aplicativos renderizados pelo lado do cliente em arquivos HTML estáticos através do processo de renderização. Uma ferramenta de pré-renderização renderiza o aplicativo visitando cada rota individualmente e gerando um arquivo HTML para cada uma delas. No entanto, esse processo se torna bastante lento para aplicativos maiores e a vinculação dinâmica não é possível em um aplicativo React pré-renderizado, pois cada página precisa estar presente no momento da compilação. Portanto, é limitado a páginas estáticas ou à busca de conteúdo dinâmico usando parâmetros de consulta.
Renderização isomórfica (lado do cliente + servidor)
A renderização isomórfica também é conhecida como renderização híbrida. Quando um agente do usuário, como um bot do Google, consulta um URL desse aplicativo, uma página renderizada pelo servidor é enviada. Caso contrário, uma página renderizada pelo cliente é enviada para o restante dos usuários. Isso garante que os mecanismos de pesquisa indexem a página corretamente e que a renderização do lado do cliente ainda funcione para outros clientes. No entanto, esse tipo de renderização é muito complicado de usar e não oferece nenhuma vantagem sobre o React totalmente renderizado pelo servidor. Portanto, não é amplamente usado e não possui bons pacotes ou bibliotecas para a maioria das estruturas.
Renderização do lado do servidor
Na renderização do lado do servidor, a página é renderizada completamente no lado do servidor antes de ser enviada ao cliente. Portanto, o cliente obtém uma página HTML completa como resposta. Isso também é bom para o SEO, pois os rastreadores de mecanismos de pesquisa recebem uma página da Web completamente renderizada, o que facilita o trabalho deles. Por sua vez, também aumenta a velocidade das páginas indexadas pelos rastreadores.
Na próxima seção, discutiremos as melhores bibliotecas em cada estrutura que podem ser usadas para implementar as melhores práticas de SEO em seu front-end.
Otimizações para estruturas específicas
1. Estruturas baseadas em reação
Renderização do lado do cliente
Quando o React é renderizado no lado do cliente, o capacete de reação pode ser usado, o que permite ao usuário gerar meta tags ao renderizar cada página.
Pré-renderização
Você deve usar react-snap ou react-snapshot ao usar o create-react-app. O GatsbyJS também é uma boa estrutura para renderizar aplicativos React em arquivos HTML estáticos.
Renderização do lado do servidor
Você deve usar uma estrutura como o NextJS para executar a renderização do lado do servidor com o React. Isso permitirá que os mecanismos de pesquisa indexem facilmente suas páginas da web.
2. NodeJS / ExpressJS
Pré-renderização
A biblioteca prerender-node trabalha com qualquer estrutura renderizada por Nó para renderizar todas as rotas como páginas da Web estáticas.
Renderização do lado do servidor
O NodeJS é uma linguagem do lado do servidor e o Express é uma estrutura de roteamento para ela. Portanto, você obtém a renderização do lado do servidor pronta para usar com o Node. A única coisa que você precisa cuidar é definir as tags de SEO dinamicamente via ejs .
3. AngularJS
Renderização do lado do cliente
Você pode usar uma biblioteca como ngx-seo-page ao trabalhar com o Angular do lado do cliente. Permite definir dinamicamente as tags SEO durante a renderização da página.
Pré-renderização
Módulos como angular- pré-renderizador podem ser usados para pré-renderizar aplicativos angulares. Ele visita as rotas do servidor e do cliente e as combina para formar um cliente estático.
Renderização do lado do servidor
O Angular Universal fornece suporte nativo ao Angular para renderização de aplicativos no lado do servidor. Você pode combiná-lo com a ngx-seo-page para definir tags de SEO no aplicativo renderizado pelo servidor.
4. VueJS
Renderização do lado do cliente
Para a renderização do lado do cliente com o Vue, não existem muitas estruturas que permitam definir dinamicamente as tags SEO. Um deles é vue-seo . No entanto, sua última atualização foi há dois anos, portanto, a pré-renderização ou a renderização no servidor é preferida para um melhor SEO.
Pré-renderização
Para pré-renderizar um aplicativo de página única do Vue, um aplicativo como o vue-cli-plugin-prerender-spa pode ser usado. É uma solução robusta que funciona com configuração zero.
Renderização do lado do servidor
Usando estruturas como o Nuxt.JS , é possível criar facilmente aplicativos Vue renderizados pelo servidor. Ele permite que você renderize seu aplicativo no servidor, execute um aplicativo do lado do cliente ou gere arquivos estáticos pré-renderizados facilmente.
5. Django / Python
Renderização do lado do servidor
A maneira padrão de usar o Django é através da renderização do lado do servidor. Os modelos HTML são renderizados no servidor de acordo com os dados transmitidos a eles por meio do servidor. Portanto, você obtém os benefícios de definir tags de SEO dinâmicas por padrão.
Você sabia que o ButterCMS funciona perfeitamente com todas essas estruturas? Nossa recém-lançada API WRITE facilita a integração para desenvolvedores e nosso painel de conteúdo facilita a criação de conteúdo para os profissionais de marketing.
Resumindo o conteúdo (TLDR)
Em resumo, vemos que aplicativos renderizados pelo lado do cliente enfrentam problemas ao serem indexados corretamente pelos mecanismos de pesquisa, e os desenvolvedores também enfrentam problemas ao definir tags de SEO nesses aplicativos. No entanto, esses desafios podem ser superados contando com uma variedade de soluções baseadas nas estruturas e nas técnicas de renderização usadas.
O que você pode fazer ainda mais para melhorar o SEO do seu site
Para melhorar o SEO do seu aplicativo, siga todas as diretrizes de SEO apresentadas neste artigo para estabelecer a correção básica do SEO. Ao usar tags de cabeçalho no seu site ( <h1>, <h2>etc.), verifique se você usa todas as palavras-chave relevantes – palavras-chave que também devem ser repetidas em todo o conteúdo que o acompanha. Se você fizer essas coisas, estará em alta posição nos resultados da pesquisa em pouco tempo!