Angular & SEO – Making Angular 6 Single-Page Web Apps Search-Engine Friendly

No próximo tutorial vamos dar uma olhada na abordagem mais fácil que está disponível para se livrar dessa limitação para sua aplicação Angular 6 usando renderização do lado do servidor com Angular Universal.

Para começar vamos primeiro configurar uma nova aplicação Angular nos seguintes passos.

Para configurar uma nova aplicação Angular estamos usando Angular CLI. Para instalar a Angular CLI no seu sistema utilize o Nó.js Package Manager da seguinte forma em sua linha de comando:

$ npm install -g @angular/cli

Having Angular CLI instalado torna possível usar o novo comando ng para configurar um novo projeto Angular a partir do zero:

>$ ng new ngseo --routing

Com a opção nova estamos dizendo que um novo projeto Angular deve ser criado, ngseo é o nome do novo projeto e usando a opção – routing estamos garantindo que uma configuração básica de routing seja adicionada ao projeto também.

Após o projeto ter sido configurado com sucesso estamos aptos a mudar para a pasta do projeto recém criado:

$ cd ngseo

E iniciar o servidor web de desenvolvimento usando Angular CLI novamente da seguinte maneira:

$ ng serve -o

Você deve agora ser capaz de ver o seguinte resultado no navegador:

1342>

Como os Rastejadores Vêem Aplicações Web de Página Única

Agora que temos uma aplicação Angular em execução vamos explorar como os rastejadores dos motores de busca estão a ver o nosso site. Estamos tendo uma boa impressão quando estamos usando a ferramenta de linha de comando para acessar nosso site:

$ curl localhost:4200

O resultado que você está recebendo de volta deve ser parecido com o seguinte:

1342>

Aqui você pode ver que o conteúdo principal do site não faz parte desse documento HTML. Em vez disso, você encontrará o elemento placeholder <app-root> dentro da seção body. Isto é muito angular é inserir o conteúdo do site quando o código JavaScript do lado é executado. No entanto o crawler não consegue ver esse conteúdo porque o código JavaScript não é executado.

Angular Universal For Server-Side Rendering

Então o que poderia ser uma solução para esse problema? Sim, é a renderização do lado do servidor (SSR). Quando a renderização do lado do servidor é executada, o código JavaScript da aplicação Angular já é executado no servidor e a estrutura e conteúdo HTML completo também estará disponível para web crawlers.

A tecnologia que permite a renderização do lado do servidor para aplicações Angular é chamada Angular Universal. Angular Universal gera páginas de aplicações estáticas no servidor através de um processo chamado server-side rendering.

Uma descrição detalhada de como usar Angular Universal está disponível em https://angular.io/guide/universal. Entretanto, há outra abordagem que torna a adição do Angular Universal muito simples: usando o pacote @ng-toolkit/universal.

Adicionando Angular Universal Com @ng-toolkit/universal Para Fazer Sua Aplicação Angular Search-Engine Friendly

O pacote @ng-toolkit/universal é adicionado ao projeto usando o comando ng mais uma vez da seguinte maneira:

$ ng add @ng-toolkit/universal

Após ter adicionado o pacote, abra package.json e certifique-se de que o pacote webpack-cli está listado na seção dependências com pelo menos a versão 3.1:

"webpack-cli": "^3.1.0"

Se esse não for o caso, altere essa entrada de acordo e execute o seguinte comando:

$ npm install

Next, ao invés de executar ng serve -o você executa:

$ npm run build:prod

e

$ npm run server

O servidor é iniciado em localhost:8080 e se você estiver acessando essa URL no navegador você deve ser capaz de ver o site da aplicação angular padrão novamente.

Vamos tentar acessar o site novamente via curl:

$ curl localhost:8080

A saída deve agora se parecer com o que você pode ver na seguinte captura de tela:

Desta vez o conteúdo completo do site HTML está incluído. A razão para isso é que o lado HTML foi renderizado como parte do processo de compilação (lado do servidor) e agora está disponível sem a necessidade de executar código JavaScript lado do cliente. Assim, um rastreador de um mecanismo de busca é capaz de encontrar o conteúdo do lado e pode garantir que ele seja adicionado aos resultados da busca corretamente.

Conclusion

Por padrão a Angular usa renderização do lado do cliente, o que é um problema quando seu site deve ser listado nos resultados do mecanismo de busca. A solução é renderizar o lado do servidor da aplicação e gerar elementos HTML finais que os crawlers do motor de busca podem interpretar facilmente.

Renderização do lado do servidor para aplicações Angular pode ser alcançado com Angular Universal. Adicionar Angular Universal à sua aplicação Angular existente é muito fácil usando o pacote @ng-toolkit/universal.

Este post foi publicado primeiro no CodingTheSmartWay.com.

#1 Angular 6 – The Complete Guide

Master Angular (Angular 2+, incl. Angular 6) e construir aplicações web fantásticas e reactivas com o sucessor de Angular.js
Ir ao Curso …

Disclaimer: Este post contém links de afiliados, o que significa que se clicar num dos links do produto, receberei uma pequena comissão. Isto ajuda a suportar este blog!