Guia SEO Angular 4 (Universal + Angular CLI)

Table of Contents

• Introdução
• O que é Angular Universal
• Por que o SEO é importante para aplicativos Angular
• Configurando um aplicativo Angular para ser amigável para mecanismos de busca
• Usando o Angular Universal para renderização do lado do servidor
  • Instalando a plataforma do servidor
  • Configurando o arquivo app.module.ts
  • Criando o arquivo app.server.module.ts
• Criando o servidor Express
  • Configurando o arquivo server.ts
• Configurando os arquivos de configuração TypeScript
  • Configurando o arquivo tsconfig.app.json
  • Configurando o arquivo tsconfig.json
• Ajustando os scripts no arquivo package.json
• Executando o aplicativo com Angular Universal
• Personalizando as tags meta e de título para SEO
  • Importando as dependências necessárias
  • Configurando as tags meta e de título para a página inicial
  • Configurando as tags meta e de título para a página sobre
• Conclusão

Introdução

Neste artigo, iremos abordar um tema que tem sido uma grande dor de cabeça para muitos desenvolvedores Angular, incluindo eu mesmo: tornar um aplicativo Angular amigável para mecanismos de busca. Para isso, iremos utilizar o Angular Universal, uma ferramenta que nos permite fazer a renderização do lado do servidor. Com o Angular Universal, podemos criar páginas HTML totalmente renderizadas no servidor, o que é fundamental para melhorar a indexação e a classificação do nosso aplicativo nos resultados de pesquisa. Vamos começar!

O que é Angular Universal

O Angular Universal é um framework do Angular que permite a renderização do lado do servidor (SSR). Em vez de o navegador solicitar o código-fonte Angular e renderizá-lo no cliente, o servidor gera as páginas HTML correspondentes aos componentes do Angular e as envia prontas para o navegador. Isso melhora o desempenho do aplicativo, reduz a necessidade de processamento no lado do cliente e torna o aplicativo mais acessível para mecanismos de busca.

Por que o SEO é importante para aplicativos Angular

Os mecanismos de busca desempenham um papel fundamental na descoberta de conteúdo na web. Se o nosso aplicativo Angular não for amigável para mecanismos de busca, ele terá uma classificação baixa nos resultados de pesquisa e, consequentemente, perderá tráfego e visibilidade. Portanto, é crucial otimizar o nosso aplicativo Angular para SEO, a fim de garantir que ele seja facilmente descoberto e indexado pelos mecanismos de busca.

Configurando um aplicativo Angular para ser amigável para mecanismos de busca

Antes de começarmos a usar o Angular Universal, precisamos configurar o nosso aplicativo Angular para ser amigável para mecanismos de busca. Existem várias práticas recomendadas que podemos seguir para melhorar a indexação e a visibilidade do nosso aplicativo. Aqui estão algumas dicas úteis:

1. Use URLs amigáveis para os mecanismos de busca: Certifique-se de que as URLs do seu aplicativo sejam descritivas e legíveis, contendo palavras-chave relevantes.

2. Forneça um sitemap XML: Um sitemap XML ajuda os mecanismos de busca a entender a estrutura do nosso aplicativo e encontrar todas as páginas relevantes.

3. Otimize as tags meta e de título: As tags meta e de título são importantes para o SEO. Certifique-se de usar palavras-chave relevantes, mas evite spam de palavras-chave.

4. Melhore a velocidade de carregamento: Um tempo de carregamento mais rápido ajuda a melhorar a experiência do usuário e também é um fator considerado pelos mecanismos de busca ao classificar os resultados.

5. Use links internos relevantes: Garanta que as páginas do seu aplicativo estejam interligadas de forma lógica e relevante. Isso ajuda os mecanismos de busca a descobrir mais conteúdo e a entender a estrutura do seu aplicativo.

Usando o Angular Universal para renderização do lado do servidor

Agora que configuramos nosso aplicativo Angular para ser amigável para mecanismos de busca, podemos prosseguir e usar o Angular Universal para a renderização do lado do servidor. O Angular Universal nos permite gerar páginas HTML totalmente renderizadas no servidor, o que melhora a indexação pelos mecanismos de busca e a classificação nos resultados de pesquisa. Vamos ver como configurar e usar o Angular Universal passo a passo.

Instalando a plataforma do servidor

Antes de começarmos a usar o Angular Universal, precisamos instalar a plataforma do servidor. Podemos fazer isso executando o seguinte comando no terminal:

npm install --save @angular/platform-server

Além disso, também precisamos instalar o pacote de animações do Angular, que é necessário para a versão 4 ou superior. Caso contrário, receberemos um erro ao executar o aplicativo. Para instalar as animações do Angular, executamos o seguinte comando:

npm install --save @angular/animations

Com as dependências instaladas, podemos prosseguir e configurar nosso aplicativo Angular para usar o Angular Universal.

Configurando o arquivo app.module.ts

A primeira etapa na configuração do Angular Universal é alterar o arquivo app.module.ts. Vamos abrir o arquivo no nosso editor de código e fazer as seguintes alterações.

Primeiro, importamos o módulo "BrowserModule" do Angular. Em seguida, importamos o módulo "ServerModule" do Angular Universal. Por fim, adicionamos a chamada withServerTransition à função bootstrap para ativar a renderização do lado do servidor.

Aqui está o código atualizado do arquivo app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({ appId: 'my-app' }),
    ServerModule,
    ServerTransferStateModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Salve as alterações feitas no arquivo app.module.ts. Agora, vamos avançar e criar o arquivo app.server.module.ts.

Criando o arquivo app.server.module.ts

O próximo passo é criar o arquivo app.server.module.ts. Este arquivo é usado para inicializar nosso aplicativo no servidor. Vamos criar um novo arquivo chamado app.server.module.ts no diretório app/.

Dentro do arquivo app.server.module.ts, vamos importar e exportar o módulo AppModule do nosso aplicativo. Isso permite que o Angular Universal crie e renderize as páginas HTML correspondentes aos nossos componentes.

Aqui está o código para o arquivo app.server.module.ts:

import { NgModule } from '@angular/core';
import { AppModule } from './app.module';
import { ServerModule } from '@angular/platform-server';

@NgModule({
  imports: [AppModule, ServerModule],
  exports: [AppModule],
})
export class AppServerModule { }

Ótimo! Agora, concluímos a configuração do Angular Universal para a renderização do lado do servidor. A próxima etapa é criar o servidor Express.

Criando o servidor Express

O servidor Express é responsável por fornecer as páginas HTML renderizadas pelo Angular Universal aos clientes. Vamos criar o servidor Express e configurá-lo para fornecer nosso aplicativo Angular.

Primeiro, vamos criar um novo arquivo chamado server.ts na raiz do nosso projeto. Em seguida, vamos adicionar o código necessário para configurar o servidor Express.

Aqui está o código para o arquivo server.ts:

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
import { renderModuleFactory } from '@angular/platform-server';

const PORT = process.env.PORT || 4000;
const ENV = process.env.NODE_ENV || 'development';
const DIST_FOLDER = join(process.cwd(), 'dist');

const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

const app = express();

enableProdMode();

// Serve static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    document: template,
    url: req.url,
    extraProviders: [
      getReqResProvider(req, res),
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    res.send(html);
  });
});

// Start the server
app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

function getReqResProvider(req, res) {
  return [
    { provide: 'REQUEST', useValue: req },
    { provide: 'RESPONSE', useValue: res }
  ];
}

O código acima define um servidor Express, que serve arquivos estáticos a partir da pasta /browser e utiliza o Angular Universal para renderizar as páginas HTML. Ele lê o arquivo index.html gerado pelo Angular Universal e injeta o conteúdo do nosso aplicativo no div com o id="app" do arquivo index.html.

Salve o arquivo server.ts e estamos quase prontos! Agora precisamos configurar os arquivos de configuração TypeScript.

Configurando os arquivos de configuração TypeScript

Vamos fazer algumas alterações nos arquivos de configuração TypeScript para garantir que o Angular Universal funcione corretamente.

Configurando o arquivo tsconfig.app.json

Primeiro, vamos abrir o arquivo tsconfig.app.json na raiz do nosso projeto e adicionar a seguinte linha:

"path": {
  "app/*": ["src/app/*"],
  "server/*": ["src/server/*"]
}

Essa configuração diz ao compilador TypeScript para incluir os arquivos no diretório src/app/ e src/server/ ao compilar o aplicativo.

Configurando o arquivo tsconfig.json

Em seguida, vamos abrir o arquivo tsconfig.json na raiz do nosso projeto e adicionar a seguinte configuração:

"angularCompilerOptions": {
  "genDir": "./dist/generated",
  "entryModule": "./src/app/app.module#AppModule"
}

Essa configuração informa ao Angular Compiler onde ele deve armazenar os arquivos gerados pelo comando ng build. Ela também especifica o módulo de entrada do nosso aplicativo Angular.

Certifique-se de salvar as alterações feitas nos arquivos de configuração TypeScript.

Ajustando os scripts no arquivo package.json

Agora, vamos ajustar os scripts no arquivo package.json para que possamos executar o nosso aplicativo com o Angular Universal.

Vamos remover o script "start" existente e substituí-lo pelo seguinte código:

"start": "npm run build:ssr && node dist/server/main.js",
"build:ssr": "ng build --prod && npm run compile:ssr",
"compile:ssr": "tsc -p server.tsconfig.json"

Esses scripts são responsáveis por compilar o aplicativo Angular e iniciar o servidor Express com o Angular Universal.

Salve as alterações feitas no arquivo package.json.

Executando o aplicativo com Angular Universal

Agora que tudo está configurado, podemos executar o aplicativo com o Angular Universal. Para fazer isso, basta abrir o terminal, navegar até a raiz do projeto e executar o seguinte comando:

npm start

Isso compilará o aplicativo Angular usando o comando ng build --prod, em seguida, usará o comando tsc -p server.tsconfig.json para compilar o servidor Express com o Angular Universal e, finalmente, iniciará o servidor Express.

Agora, podemos acessar o aplicativo em http://localhost:4000 e verificar se a renderização do lado do servidor está funcionando corretamente.

Personalizando as tags meta e de título para SEO

Agora que nosso aplicativo está sendo renderizado do lado do servidor com o Angular Universal, podemos personalizar as tags meta e de título para melhorar ainda mais o SEO do nosso aplicativo.

Importando as dependências necessárias

Para personalizar as tags meta e de título, vamos importar as dependências necessárias no componente desejado. Para fazer isso, abra o arquivo do componente em que você deseja personalizar as tags.

Vamos importar as seguintes dependências:

import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

Essas dependências nos permitirão acessar e manipular as tags meta e de título da página.

Configurando as tags meta e de título para a página inicial

Dentro do método ngOnInit, podemos configurar as tags meta e de título para a página inicial. Vamos usar o serviço Meta e Title para fazer isso. Aqui está um exemplo:

ngOnInit(): void {
  this.title.setTitle('Página Inicial');
  this.meta.addTags([
    { name: 'description', content: 'Descrição da página inicial' },
    { name: 'keywords', content: 'angular, aplicativo, página inicial' },
    { name: 'author', content: 'Seu Nome' }
  ]);
}

Neste exemplo, estamos definindo o título da página como "Página Inicial" usando o serviço Title. Em seguida, adicionamos as tags meta description, keywords e author usando o serviço Meta.

Configurando as tags meta e de título para a página sobre

O processo é semelhante para configurar as tags meta e de título para outras páginas. Dentro do componente da página desejada, importamos as dependências Meta e Title e configuramos as tags meta e de título.

Aqui está um exemplo de como fazer isso para a página "Sobre":

ngOnInit(): void {
  this.title.setTitle('Sobre');
  this.meta.addTags([
    { name: 'description', content: 'Descrição da página Sobre' },
    { name: 'keywords', content: 'angular, aplicativo, página sobre' },
    { name: 'author', content: 'Seu Nome' }
  ]);
}

Lembre-se de personalizar as tags meta e de título de acordo com o conteúdo da página e as palavras-chave relevantes.

Conclusão

Neste artigo, aprendemos como tornar aplicativos Angular amigáveis para mecanismos de busca usando o Angular Universal. Discutimos a importância do SEO para aplicativos Angular, configuramos um aplicativo Angular para ser amigável para mecanismos de busca e explicamos como usar o Angular Universal para renderização do lado do servidor. Também vimos como personalizar as tags meta e de título para melhorar o SEO do nosso aplicativo. Com essas informações, você está bem preparado para otimizar seus aplicativos Angular para obter melhores resultados nos mecanismos de busca.