The Angular framework is a structural javascript-based framework for web applications. É usado para criar páginas web dinâmicas com conteúdo prestado através de serviços web. A estrutura Angular é muito amigável para o desenvolvedor. Tem sido em torno de vários anos e tem acumulado uma forte comunidade de ferramentas e utilitários, incluindo ferramentas CMS angulares, frameworks backend, e muito mais.

o ecossistema Angular

aplicações construídas usando a estrutura Angular são chamadas aplicações de Página Única (SPAs) por causa da forma como funcionam. Uma aplicação Angular, uma vez carregada, torna as outras páginas dinamicamente sem recarregar as páginas web novamente. Esta experiência é fornecida com o poder da estrutura Angular de javascript. Ele modifica dinamicamente as páginas executando o código javascript ou carregando apenas o conteúdo necessário. Isso dá ao usuário uma experiência suave sem esperar que uma recarga aconteça. No entanto, locais angulares podem sofrer efeitos adversos em sua otimização do motor de busca (SEO).

neste artigo, nós articulamos como as aplicações angulares precisam de tratamento especial SEO, e nós fornecemos algumas instruções específicas de implantação para facilitar o bom SEO Angular.Antes de abordar a solução, deixe-nos entender como o motor de busca crawlers (ou bots) realmente funciona. Os motores de busca em todo o mundo rastejam através de seus sites para entender as páginas e o objetivo final de seu negócio. Para isso, os crawlers lêem através dos metadados das páginas, tais como o título, descrição, tags de imagem, e categorias. Estes metadados precisam ser diferentes para cada página para permitir que os motores de busca compreendam a intenção de cada página.

Tradicional SEO - Search rastreador resultados

Um motor de busca bot chega a uma página específica, encontra as hiperligações na página, lê os metadados da página, e começa a percorrer através de hiperlinks. Ele continua repetindo este processo em seu site até que ele é incapaz de encontrar quaisquer novos links. Durante este processo, o bot transfere o conteúdo estático do seu site e compreende a página. Assim, torna-se importante maximizar os detalhes de cada página nos metadados e conteúdo estático.

o nosso CMS Angular permite o conteúdo dinâmico que os seus comerciantes podem actualizar.

SEO tornou-se um dos investimentos mais importantes para qualquer negócio online hoje. No passado, as aplicações web em desenvolvimento eram bastante simples e continham principalmente páginas estáticas. Estas páginas continham todas as informações necessárias pré-codificadas. À medida que o desenvolvimento de aplicações web evoluiu, entramos numa era de apresentação de conteúdo dinâmico onde o conteúdo para as páginas web é armazenado em algum lugar e obtido conforme necessário.

Há duas maneiras de fazer isso:

  1. processamento do lado do Servidor
  2. renderização do lado do Cliente

Devido à falta de sofisticado processamento do lado do cliente quadros do passado, do lado do servidor de renderização de páginas foi a tendência. Havia inúmeras línguas e estruturas para lidar com o mesmo. Por exemplo, PHP, Java Spring, NodeJS com Guiadores, e outros frameworks rendem as páginas com antecedência e enviam apenas o conteúdo HTML simples para a interface.

esta abordagem garante que a página tem as meta tags direita e todo o conteúdo renderizado antes de ser recebido pelo motor de busca crawler. Assim, aplicações web convencionais eram praticamente simples quando se tratava de SEO. No entanto, eles certamente tiveram uma desvantagem de tempos de carga Mais longos. Com servidores de gama baixa, o processamento de milhares de pedidos de páginas tornou-se difícil. Isto trouxe quadros frontend como Angular para a imagem.

SEO para aplicações de Página Única (SPAs)

uma aplicação de página única é um conceito em que a disposição de base da aplicação é carregada apenas uma vez e o resto das páginas e componentes são carregados apenas quando necessário. Isto é possível com o poder do Javascript que dinamicamente decide qual o conteúdo necessário, obtém os dados, e o torna no formato desejado.

o nosso CMS Angular permite o conteúdo dinâmico que os seus comerciantes podem actualizar.

benefícios de uma aplicação de uma única página

devido à sua natureza dinâmica, uma aplicação de uma única página tem muitos benefícios inerentes associados a ela. Alguns destes estão listados abaixo:

  • mais Rápido o tempo de transição depois que o aplicativo foi carregado
  • mais Suave experiências comparado a um convencional aplicativo web
  • Menos carga sobre o servidor web de processamento de páginas
  • mais Rápido o tempo de desenvolvimento com sofisticados sistemas como Angulares

Apesar desses benefícios, um desafio significativo com a única página aplicativos de SEO.

desafios angulares do SEO

conforme entendido, o Angular não recarrega as páginas a menos que explicitamente solicitado. O Angular suporta mudanças de metadados para as páginas dinamicamente, mas depende completamente do JavaScript. Como discutido anteriormente, os rastreadores do motor de busca normalmente não entretêm Javascript. Isto pode fazer com que as aplicações angulares falham na renderização do conteúdo ou metadados certos.

Angular SEO - Search engine crawler results

No entanto, ao longo dos anos, o SEO Angular evoluiu e a comunidade trouxe uma solução para contornar isso. A solução nos permite criar páginas estáticas a partir de páginas angulares. Estas páginas estáticas contêm os metadados certos e o conteúdo pré-renderizado. Mais tarde, neste artigo, vamos mergulhar neste processo para entender os desafios envolvidos e implementar táticas para otimizar o SEO Angular.

Angular SEO: Desenvolvimento de páginas amigáveis à pesquisa

Antes de começarmos a construir uma solução Angular SEO de trabalho, vamos começar por criar uma aplicação js Angular em branco.

ng new seo-friendly-app

o comando cria uma nova aplicação Angular JS onde iremos criar uma página inicial simples e página de blog, renderizar algum conteúdo na página do blog usando APIs ButterCMS e torná-los amigos. vamos começar por criar páginas e rotas para o mesmo. Execute os comandos abaixo no terminal para criar as suas páginas de ‘home’ e ‘blog’.

ng g c pages/home --skipTests=trueng g c pages/blog --skipTests=true

Isto irá criar os componentes e importá-los para o aplicativo.modulo.ts file. Agora, adicione as páginas ao módulo de roteamento para permitir que nos encaminhemos para essas páginas. Modifique a sua aplicação.modulo.ts file.

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from './pages/home/home.component';import { BlogComponent } from './pages/blog/blog.component';const routes: Routes = ;@NgModule({ imports: ,exports: })export class AppRoutingModule { }

The above code maps the respective components with their routes and sets HomeComponent as the default component. Agora, modifique a aplicação.componente.ficheiro html para conter apenas uma única linha de código.

<router-outlet></router-outlet>

finalmente, execute a aplicação usando o comando abaixo e verifique se a sua aplicação está configurada corretamente. Uma vez que o comando passa, você pode carregar no URL localhost:4200 para garantir que as coisas estão configuradas bem. Você deve ver o texto ” home works!”.

ng serve

agora vamos adicionar um cabeçalho que nos permite navegar através das páginas. Crie um componente de cabeçalho usando o comando abaixo.

ng g c header --skipTests=true

Next, modifique o conteúdo do cabeçalho.componente.html para conter os elementos de navegação.

<div><a ="">Home</a></div><div><a ="">Blog</a></div>

finalmente, você tem uma aplicação completa onde você tem duas páginas e uma navegação simples e não enrolada que lhe permite mover-se entre as páginas. Agora, vamos analisar esta aplicação a partir de uma perspectiva SEO. Carregue com o botão direito no navegador e seleccione “Ver fonte da página”. Você deve ser capaz de ver como o motor de busca crawlers iria ver sua página sem Javascript. O código parece o trecho abaixo.

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>SeoFriendlyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"></head><body> <app-root></app-root><script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body></html>

agora, navegue para a página do blog e execute a mesma ação e observe o conteúdo da página. É semelhante. Isto inclui o título da Página, bem como o corpo. Isto é porque o Angular modifica o seu DOM usando javascript.

criando páginas dinâmicas

deste modo, conseguimos implementar isto nas páginas estáticas. Vamos agora renderizar nossos blogs e blog página de conteúdo usando API ButterCMS. Isso nos permitirá realizar SEO em conteúdo web estático, bem como dinâmico. Antes de começar com ele, Registre uma conta de teste gratuito com ButterCMS para ser capaz de criar conteúdo dinâmico facilmente.

para fazer isso, vamos instalar o plugin ButterCMS usando NPM.

npm install --save buttercms

Uma vez instalado, vamos criar um arquivo de serviço no path services / butterCMS.servico.ts e coloque o conteúdo abaixo dentro do arquivo.

import * as Butter from 'buttercms';export const butterService = Butter('your_api_token');

substitua o seu token no código acima. Este arquivo de serviço garante que o token é gerenciado globalmente em um único arquivo. Podemos importar este arquivo onde quer que precisemos para usar os Serviços ButterCMS. Agora, vamos implementar rapidamente o código abaixo no blog.componente.TS ficheiro para obter uma lista de posts.

import { Component, OnInit } from '@angular/core';import { butterService } from '../../services/butter-cms.service';@Component({ selector: 'app-blog', templateUrl: './blog.component.html', styleUrls: })export class BlogComponent implements OnInit { posts:any; constructor() { this.fetchPosts(); } private fetchPosts() { butterService.post.list({ page: 1, page_size: 10 }) .then((res) => { console.log('Content from ButterCMS'); console.log(res); this.posts = res.data.data; }); } ngOnInit() { }}

agora, vá ao navegador e inspecione a saída da consola na consola. Você deve ser capaz de ver a lista de seus posts na consola do navegador. Como você pode ver no excerto de código abaixo, isso demonstra dois dos posts que eu criei para este tutorial.

agora, vamos renderizar este conteúdo na página do blog. Para isso, atualize seu blog.componente.ficheiro html com o código abaixo:

<div *ngIf="posts!=undefined"><div *ngFor="let post of posts.data"> <hr> <h1>{{post.title}}</h1> <div ="post.body"></div></div></div> 

Isto irá tornar os posts da sua plataforma ButterCMS para a página web. Vamos agora entender como definir um título personalizado e meta tags para cada página.

definir o Título e meta tags para SEO Angular

Angular compreende este problema e já tem uma solução para isso. Para adicionar metadados e modificar dinamicamente o título da Página, tudo o que você precisa fazer é utilizar estes módulos a partir do Angular. Actualiza o código da tua casa.componente.ficheiro ts com o ficheiro abaixo. Realizar alterações semelhantes no seu blog.componente.ts também.

import { Component, OnInit } from '@angular/core';import { Meta,Title } from '@angular/platform-browser';@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: })export class HomeComponent implements OnInit { constructor(private meta: Meta,private title: Title) { this.meta.addTags(); this.setTitle('Home Page'); } public setTitle( newTitle: string) { this.title.setTitle( newTitle ); } ngOnInit() { }}

Uma vez que estas alterações sejam gravadas, observe o título na página navegador. Ele muda dinamicamente à medida que você navega através de páginas. Além disso, se você inspecionar o código na consola do navegador, você verá que os metadados correspondentes também foram anexados. No entanto, se você verificar a fonte da página o conteúdo ainda é o mesmo. Isto significa que se Javascript é permitido, podemos gerar um título dinâmico e meta, mas não sem ele.

assim, precisamos de uma maneira de pegar o conteúdo desta página renderizada e enviá-lo para o usuário. Este processo é chamado de pré-renderização do conteúdo, e é fundamental para alcançar um bom SEO Angular. Existem vários métodos para executar a pré-renderização. Na próxima seção, vamos explorar um deles.

compreender a necessidade de pré-renderização

pré-renderização significa essencialmente que o conteúdo HTML da página seria compilado com antecedência. Isto garantiria que o Título e metadados da página estão presentes quando chegam ao lado do cliente. Com a pré-renderização, podemos expor o conteúdo HTML final para o crawler ao invés de expor o HTML em branco.

implementando pré-renderização para aplicações angulares

com as atualizações em Angular, agora ele vem com uma solução padronizada para pré-renderização também. O processo é bastante simples. Nós aproveitaríamos o pacote Angular Universal para apoiar a pré-renderização das páginas. Para adicionar o pacote Angular universal, execute o comando abaixo com o nome do projecto que usou ao criar a sua aplicação Angular.

ng add @nguniversal/express-engine --clientProject seo-friendly-app

Isto irá criar alguns ficheiros dentro do projecto e configurar o seu projecto para suportar a pré-renderização usando um servidor NodeJS. Para executar isto, execute o comando abaixo.

npm run build:ssr && npm run serve:ssr

Este comando compila, constrói as suas páginas estáticas, coloca-as na pasta dist e serve-as executando um servidor NodeJS. Com isso, melhoramos muito o nosso SEO Angular, garantindo que a nossa aplicação é construída de forma amigável e todo o seu conteúdo é dinamicamente renderizado.

validando o seu SEO-friendly Angular SPA

para validar a implementação, poderá ir ao navegador e ver o código da página para cada página. Agora, você será capaz de ver que o navegador torna o conteúdo HTML exato como você esperaria. Com isso, estabelecemos a nossa implementação de um blog simples e imparável com uma renderização de SEO-friendly em framework Angular. Com ButterCMS, você pode fazer muito mais como a fetching dinamicamente as tags SEO, meta descriptions, e até mesmo o conteúdo da página em si. Confira nossa documentação Angular da API para saber mais.

Inscreva-se para receber artigos e tutoriais sobre SEO Angular.

Deixe uma resposta

O seu endereço de email não será publicado.