The playground

More information here

Angular Universal: o que você precisa saber para SEO

Inscreva-se para as nossas recaps diárias da paisagem de marketing de pesquisa em constante mudança. nota: ao enviar este formulário, você concorda com os termos da terceira porta Media. Respeitamos a sua privacidade. João E Lincoln em 1 de fevereiro de 2019 às 9:53 am Categorias:Todas as Coisas SEO Coluna Canal: SEO Se você usar […]

Inscreva-se para as nossas recaps diárias da paisagem de marketing de pesquisa em constante mudança.

nota: ao enviar este formulário, você concorda com os termos da terceira porta Media. Respeitamos a sua privacidade.

João E Lincoln em 1 de fevereiro de 2019 às 9:53 am

  • Categorias:Todas as Coisas SEO Coluna Canal: SEO
  • Se você usar Angular para a alimentação de seu site, então você tem um extra obstáculo para a cruz quando se trata de SEO. Felizmente, Universal Angular torna fácil saltar sobre ele.

    tenha em mente que “fácil” é um termo relativo aqui. Há muita magia técnica envolvida.é quase certo que terá de envolver uma equipa de desenvolvimento.

    mas uma vez que o produto acabado é entregue, o seu site irá servir páginas otimizadas que os motores de busca irão facilmente localizar e indexar.

    neste guia, vou explicar Universal Angular e por que é importante para os comerciantes.

    o problema do SEO

    Angular é uma estrutura fantástica para o fornecimento de aplicações web modulares e de fácil utilização. Infelizmente, é um pouco hostil ao SEO.isso é por duas razões.

    primeiro, Angular depende fortemente do script para entregar o conteúdo. Como resultado, alguns robôs de pesquisa não” vêem ” o conteúdo que um usuário vê.

    dê uma olhada na documentação Universal Angular. Essa página é, sem surpresas, renderizada com Angular.

    à medida que se desloca para baixo, verá um pouco de conteúdo. Até parece que está tudo indexável.não necessariamente. Carregue com o botão direito na página e seleccione “Ver o código da Página” no menu de contexto que aparece.

    existem apenas 100 linhas de código fonte. Em nenhum lugar lá você verá o conteúdo que você viu quando você viu a página normalmente.

    Que, em poucas palavras, é o problema com Angular. Os visitantes humanos verão o conteúdo, mas os bots de busca verão a fonte.

    E a fonte não tem o conteúdo!

    Há outro problema SEO: velocidade. Aplicações angulares muitas vezes não carregam rapidamente.

    alguns sites irão mostrar um ecrã em branco durante alguns segundos antes de mostrar a página inicial. Isso pode fazer com que os visitantes saiam à medida que ficam impacientes.

    A velocidade do Site é um fator de classificação móvel para que o seu rank vai ter um sucesso se o seu site não carregar rapidamente em plataformas móveis.

    mas o Google diz…

    o Google afirma que o seu bot pode indexar sites guiados por script. Há muitas evidências para apoiar isso, mas isso não significa que você pode evitar ir a milha extra ao otimizar um site Angular.para começar, o Google não é o único motor de busca na cidade. Se queres que a tua aplicação Angular se Classifique em Bing e DuckDuckGo, terás de tomar medidas para que isso aconteça.em seguida, pode ser que o Google possa indexar alguns sites angulares, mas não o seu. Nem todos os aplicativos angulares são criados iguais. O seu pode ser a excepção ao algoritmo de indexação do Google.

    In my experience, sites that move from HTML to Angular loose massive traffic from search engine a majority of the time. Na verdade, recebi três clientes no último ano, onde tivemos de reparar o local depois das quedas devido ao ângulo.

    existem soluções

    Felizmente, Existem maneiras de tornar o seu site Angular amigável.

    uma das opções mais populares é usar a renderização dinâmica. É quando você usa uma ferramenta como Puppeteer para gerar arquivos HTML estáticos que os web crawlers podem consumir mais facilmente.

    então, configure seu servidor web para direcionar os bots de busca para as páginas pré-renderizadas, enquanto os visitantes humanos navegam em torno do aplicativo Angular normal.

    é uma solução decente, mas ainda não aborda a questão da velocidade. Por isso, você provavelmente vai querer ir com Angular Universal.o que é Universal Angular?

    Angular Universal executa o seu aplicativo web no servidor, em vez de executá-lo no navegador.é uma distinção importante. Normalmente, aplicações angulares são aplicações do lado do cliente.

    o problema dos robots de pesquisa é que eles nem sempre “processam” o código do lado cliente como o seu navegador faz quando lhe serve uma página web. É por isso que você viu uma discrepância entre a página de documentação Universal Angular e seu código fonte.

    universal Angular lida com a renderização do lado do servidor (SSR). Ele pré-torna o conteúdo HTML e CSS mostrado para o Usuário antes do tempo.

    isso significa que um Utilizador irá carregar uma página HTML estática em vez de um código do lado do cliente. Como resultado, a página será carregada mais rapidamente.

    também, porque é HTML estático, os bots de pesquisa podem indexar o conteúdo.todos ganham.

    por que é importante

    Se você está em marketing digital, então você já sabe que grande parte da batalha envolve ganhar exposição on-line. É por isso que você entra em contato com influencers, postar atualizações nas redes sociais e otimizar o seu site para classificar bem.

    simply put: your site can’t rank if it can’t get indexed. Se Angular está alimentando o seu site, você precisa tomar medidas extras para se certificar de que o seu conteúdo aparece nos motores de busca.

    é por isso que você precisa de uma solução universal Angular.a desvantagem, é claro, é que vai custar dinheiro. Você precisará contratar uma equipe de desenvolvimento qualificada para adicionar RSS ao seu site.

    isso é uma despesa que deve mais do que pagar por si mesmo ao longo do tempo, se o seu site ranks bem para termos de busca chave relacionados com o seu nicho.

    como executar um aplicativo Angular Em Angular Universal

    Se você é alguém que gosta de sujar as mãos com o código, ou você só gostaria de economizar nos custos de desenvolvimento, você pode implantar um aplicativo do lado do servidor por conta própria.

    Antes de fazer isso, é melhor se você tiver uma compreensão básica de Angular, a interface de linha de comando (CLI), TypeScript e servidores web. Caso contrário, é provável que lutes.

    as etapas para implantar uma aplicação universal Angular são as seguintes::

    • Instalar as dependências necessárias
    • Atualização Angular app
    • Usar a CLI para construir um Universal bundle
    • Configurar o servidor para executar um Universal bundle
    • Executar o aplicativo no servidor

    Há um pouco indo em cinco etapas, então, eu vou cobri-los um de cada vez nas seções a seguir.

    instale as dependências

    Se você tiver alguma experiência com Angular, então você já sabe sobre nó.js. É o tempo de execução que transporta o código de dactilografia para uma aplicação JavaScript.

    nó.js vem com um gerenciador de pacotes, SEM imaginação nomeado Gestor de pacotes de nó ou npm para abreviar. Você vai usar isso para instalar as dependências.

    Fogo até a sua janela de linha de comando e execute o seguinte código:

    npm install –salvar @angular/plataforma-server @nguniversal/módulo-mapa-ngfactory-carregador ts-carregador

    Dar-lhe alguns momentos (ou muitos momentos) para instalar tudo.

    actualize a sua aplicação Angular

    em seguida, terá de preparar a sua aplicação Angular para a implantação Universal. Isso envolve quatro passos:

    • adicionar suporte Universal. Abra o seu módulo root (normalmente o AppModule) e adicione um ID de aplicação à importação do BrowserModule. Você fará isso na seção” importações ” logo abaixo da declaração @NgModule.
    • Crie o módulo raiz do servidor.Em seguida, você precisa criar um novo módulo chamado Applservermodule. Certifique-se de que importa o ServerModule a partir da dependência plataforma-servidor que adicionou no passo anterior.
    • Crie o ficheiro principal. Vai precisar de um ficheiro principal para o seu pacote Universal. Crie isso no root (na pasta src) e exporte a classe AppServerModule desse arquivo.
    • crie um ficheiro de configuração. A classe Applservermodule necessita de um ficheiro de configuração. Crie um no formato JSON. Deve ser parecido com isto:

    crie um novo alvo de compilação

    a sua pasta de origem Angular deverá incluir um ficheiro chamado angular.json. Tens de actualizar o ficheiro na secção “arquitecto”.

    vai parecer algo assim:

    “architect”: {
    “build”: { … }
    “server”: {
    “builder”: “@angular-devkit / build-angular: server”,
    “options”: {
    ” outputPath”:”dist/my-project-server”,
    “main”: “src/main.servidor.ts”,
    “tsConfig”: “src/tsconfig.servidor.json “
    }
    }
    }

    Note the” builder ” attribute four lines down. O valor após o colon (“servidor”) é o nome do servidor. Pode actualizar isso se quiser dar-lhe outro nome.

    Agora, você pode construir a sua aplicação. Assumindo que mantiveste o servidor chamado “servidor”, vai para a tua linha de comandos e escreve o seguinte::

    ng executar meu projeto:o servidor

    Você deve ver uma saída semelhante a este:

    Data: 2018-12-12T12:42:09.601 Z
    Hash: 1caced0e9434007fd7ac
    Horário: 4122ms
    bloco de {0} main.js (main) 9,49 kB
    chunk {1} styles.css (estilos) 0 bytes

    Configurar o servidor

    em seguida, você precisa configurar um servidor Universal para executar o pacote. É assim que vai serializar o aplicativo e devolvê-lo ao navegador.

    para fazer isso acontecer, crie um novo arquivo chamado servidor.ts. Dentro desse arquivo, você vai definir o seu motor app.

    os detalhes desse código estão um pouco fora do escopo deste tutorial. Sinta-se à vontade para dar uma olhada no exemplo nos documentos universais angulares.

    execute a aplicação no servidor

    Depois de tudo isso, você finalmente está em um ponto onde você pode executar a aplicação no servidor.

    para fazer isso, configure um webpack que lida com o servidor.o ficheiro ts que criou no passo anterior.

    nomeie o ficheiro de configuração webpack.servidor.configuracao.js. Mais uma vez, confira os documentos universais angulares para o tipo exato de código que pertence ao arquivo. Talvez precises de adaptar esse código à tua Convenção de nomes.

    Uma vez terminado o ficheiro, terá duas pastas sob a pasta dist: navegador e servidor.

    para executar o código do servidor, basta escrever o seguinte na linha de comandos:

    node dist/server.js

    Parabéns! Agora estás a executar o código do servidor.

    encerrando-o

    embora o Angular permita aos programadores produzir rapidamente aplicações de alta qualidade, nem sempre joga bem com os bots do motor de busca.

    felizmente, Universal Angular pode pré-renderizar páginas de aplicações angulares como HTML estático para que eles sejam descobríveis e indexáveis. Também carregarão mais depressa.

    sempre foi minha recomendação ter uma base HTML e usar Angular para entregar os outros elementos na página. Faço esta recomendação sobre qualquer coisa relacionada com JavaScript desde 2010. Este processo de Universal Angular é o mesmo principal. Não sei dizer que tem muitos sites angulares e os sinais de JavaScript destruíram. Tenha cuidado com o seu e sempre obtê-lo exame por uma empresa SEO antes do lançamento.

    Inscreva-se para as nossas recapitulações diárias da paisagem de marketing de pesquisa em constante mudança.

    nota: ao enviar este formulário, você concorda com os termos da terceira porta Media. Respeitamos a sua privacidade.

    Sobre O Autor

    João E Lincoln

    João Lincoln é CEO da Inflamar Visibilidade, uma agência de marketing digital e um Inc. 5000 companhia. Lincoln é consistentemente nomeado um dos melhores especialistas em marketing na indústria. He has been a recipient of The Search Engine Land “Search Marketer of The Year” award, named the #1 SEO consultant in the US by Clutch.co, o CEO mais admirado e 40 menos de 40. Lincoln escreveu dois livros (O Método de Previsão e influenciador Digital) e fez dois filmes (SEO: The Movie and Social Media Marketing: The Movie) sobre marketing digital.

    Deixe uma resposta

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