Otimizando Aplicações AngularJS para Motores de Busca
Resumo Rápido
Para melhorar a "visibilidade" da sua aplicação AngularJS nos motores de busca, é recomendado utilizar Renderização do Lado do Servidor (SSR) com Angular Universal. A SSR permite apresentar aos rastreadores dos motores de busca um HTML pronto, eliminando a necessidade de processar JavaScript do lado do cliente. Configure a SSR da seguinte maneira:
npm install @nguniversal/express-engine --save
app.engine('html', ngExpressEngine({ bootstrap: ServerAppModule }));Utilizando SSR, você pode aumentar significativamente a visibilidade de busca e o indexamento da sua aplicação, o que será um impulso considerável para o seu SEO.
Compatibilidade de Aplicações AngularJS com Motores de Busca
Vamos discutir como alcançar a máxima compatibilidade entre sua aplicação e os motores de busca. SEO é um campo vasto, e é impossível cobrir todos os aspectos em um único artigo, mas podemos destacar pontos-chave.
Implementando URLs "Limpos" no Angular
Qualquer aplicação AngularJS precisa de URLs "limpas". Evite usar URLs baseadas em hash (#) ativando o modo HTML5 através de html5Mode no $locationProvider.
$locationProvider.html5Mode(true);Criando um Sitemap e Usando Códigos de Status
Sitemaps ajudam os motores de busca a indexar seu site de maneira mais fácil. Também é importante usar corretamente os códigos de status HTTP para tratar erros e redirecionamentos.
Pré-renderizando Conteúdo Dinâmico
Para garantir a visibilidade do conteúdo dinâmico gerenciado pelo {{}}, ofereça pré-renderização para ele. Este processo pode ser automatizado usando serviços como Prerender.io ou Brombone.
Configurando as Configurações de SEO
Configure as meta tags <meta name="fragment" content="!"> e estruture os dados usando marcação para melhorar a qualidade de exibição do seu site e fortalecer o SEO. Você pode verificar essas configurações usando ferramentas como Google Schema Markup Testing Tool.
Visualização
Imagine como um rastreadores de motores de busca 🕷️ explora seu site 🌐:
Jardim AngularJS (🌐): [🌼, 🌼, 🌼 (🌱?)]Um pequeno buscador 🕷️ está à procura de conteúdo visível. Mas AngularJS escondeu as sementes (🌱)!
| Estado Inicial do AngularJS | 🕷️ Encontra |
|----------------------------------|------------------------------|
| AngularJS não otimizado | Poucas 🌼, muitas escondidas 🌱! |
| AngularJS Otimizado para SEO | 🕷️ Encontra |
|----------------------------------|------------------------------|
| AngularJS Otimizado para SEO | Um jardim radiante e florido 🌼, sem escondidas 🌱! |Renderização do Lado do Servidor (SSR), pré-renderização e outras técnicas de SEO podem transformar um canto negligenciado em um belíssimo jardim vibrante!
Abordagens de SEO para Aplicações Angular
HTML5 PushState em vez de URLs em Hash
Use HTML5 PushState em vez de URLs com #! para interagir com os motores de busca. Observe que o Google não se concentra mais em _escaped_fragment_.
Bing e Outros Motores de Busca
Não se esqueça de outros motores de busca como o Bing. Utilize, por exemplo, as Ferramentas para Webmasters do Bing para melhorar o indexamento desses serviços também.
Aplicando Meta Tags e Dados Estruturados
Inclua meta tags relevantes e utilize dados estruturados usando vocabulário schema.org para aprimorar a representação do seu conteúdo nos resultados de busca.
Análises e Monitoramento
Use ferramentas de análise, como as Ferramentas para Webmasters do Google, para monitorar a renderização do seu site, identificar erros de SEO e realizar análise de consultas.
Recursos Úteis
- Fundamentos de SEO em JavaScript | Google Search Central - Recomendações do Google para otimizar sites em JavaScript, incluindo aplicações AngularJS.
- Documentação do Angular Universal - Um guia completo sobre renderização do lado do servidor, que é crítico para SEO.
- Renderização na Web | web.dev - Melhores práticas do Google em renderização de aplicações web modernas.
- Guia das Ferramentas para Webmasters do Bing - Dicas do Bing para melhorar a visibilidade do seu site nos resultados de busca.
- Fim do Suporte para Indexação AJAX | Blog do Google Search Central - Informações sobre o fim do suporte da Google à indexação AJAX e erros comuns.
- Construindo Aplicações de Página Única Amigáveis para SEO com Angular - Dicas sobre como criar aplicações de página única otimizadas para motores de busca.
- Ferramenta de Teste de Marcação de Schema | Google Search Central - Uma ferramenta do Google para verificar dados estruturados nos resultados de busca.