Como melhorar o SEO com Next.js

A tradução do artigo foi preparada em antecipação ao início do curso “Desenvolvedor JavaScript. Básico " .

Deseja saber mais sobre o curso “Desenvolvedor JavaScript. Básico "? Convidamos você para um webinar gratuito, no qual o instrutor do curso responderá a todas as suas perguntas.

---

Existem várias abordagens modernas para o desenvolvimento de aplicativos. Os dois mais populares são aplicativos de página única (SPA) e aplicativos renderizados por servidor .



Os aplicativos de página única têm um ótimo desempenho e, embora o rastreador do Google tenha mudado ligeiramente após algumas atualizações , eles ainda não veem resultados de SEO impressionantes. A renderização do servidor permite que você otimize aplicativos para mecanismos de pesquisa com mais eficiência, enquanto seu desempenho, neste caso, também será bastante decente.



Com o advento de excelentes estruturas de JavaScript como Next e Gatsby, existem mais aplicativos renderizados por servidor, então vamos ver por que aplicativos de página única nem sempre são uma boa solução, especialmente quando você precisa de altas classificações de pesquisa.

O que há de errado com aplicativos de página única?

Antes de decidir entre aplicativos de página única e renderização do lado do servidor, vale a pena decidir sobre o conteúdo.







Os aplicativos de página única carregam apenas uma página HTML. Cada vez que o usuário solicita um novo conteúdo HTML, ele é carregado dinamicamente por JavaScript, manipulando os elementos DOM. Mas se você não precisa carregar uma nova página HTML toda vez, por que existe um problema com a otimização de mecanismo de pesquisa?



A questão é que os mecanismos de pesquisa não conseguem indexar corretamenteAplicativos de página única, ao contrário de aplicativos renderizados pelo servidor. Um aplicativo de página única carrega apenas a página HTML inicial. Como resultado, os mecanismos de pesquisa não conseguem indexar o conteúdo que é recriado usando JavaScript toda vez que ele é alterado, embora deva ser observado que os aplicativos de página única têm muitas outras vantagens: além de alto desempenho, eles carregam rapidamente mesmo com baixas velocidades de conexão e não requerem alta largura de banda. , têm melhor desempenho em dispositivos móveis e assim por diante.



Por outro lado, os aplicativos renderizados por servidor, especialmente aqueles criados com Next.js, apresentam bom desempenho e eficiência de SEO.

SEO (otimização de mecanismos de pesquisa)

SEO (do inglês search engine optimization) é a otimização para mecanismos de pesquisa, ou seja, ações para alterar seu site para atrair mais tráfego de pesquisa orgânica. Existem muitas técnicas e truques de SEO diferentes para manter em mente a fim de tornar seu site mais atraente e acessível aos mecanismos de pesquisa.



Next.js



Next.js é uma estrutura para aplicativos React gerados estaticamente ou renderizados pelo servidor que abre muitas possibilidades para os desenvolvedores: criação de aplicativos prontos para uso, de configuração zero, divisão de código, exportação de uma página HTML estática, etc. etc.



Next.jsfornecerá altos resultados de otimização de mecanismo de pesquisa e você não precisa fazer nada de especial para fazer isso - você só precisa criar um aplicativo. No entanto , bons resultados de SEO não são fornecidos especificamente pelo Next.js , mas pela renderização do servidor.



Vamos dar um exemplo de como o Next.js funciona .



Next.js permite que você crie um aplicativo em um comando usando a estrutura Create Next App :

npx create-next-app

Depois de criar o projeto, você notará que ele é ligeiramente diferente de outros modelos criados com, por exemplo, Create React App . Todas as páginas do aplicativo serão armazenadas em uma pasta pagese cada uma delas será um componente React.



Para gerar uma nova rota dentro do aplicativo, basta criar um novo arquivo na pasta pagese um novo componente React para ele:

// pages/about.js
const About = () => (
  <div>
    <h1>About page</h1>
  </div>
);
export default About;

Nota. Conforme você trabalha em seu aplicativo, pode ver seus relatórios de classificação de SEO mesmo nos estágios iniciais, por exemplo, usando o serviço Lighthouse .

Criar um novo aplicativo com Next.js é extremamente fácil. Vamos dar uma olhada em como o Next.js pode ajudar a melhorar suas classificações de pesquisa e direcionar mais tráfego orgânico para seu site.

Como melhorar o SEO com Next.js

Com Next.js, você pode melhorar significativamente seus resultados de SEO, mas não deve se esquecer de outros aspectos do aplicativo. Se você deseja bons resultados de SEO, considere o seguinte:

• Meta tags
• Habilidades especiais
• Progressive Web Apps

Meta



tags As meta tags fornecem dados sobre a sua página aos mecanismos de pesquisa e aos visitantes do site. Eles afetam como uma página é exibida nas páginas de resultados do mecanismo de pesquisa e se pode atrair um visitante para seu site. As metatags não são visíveis para os usuários, mas para um aplicativo que você deseja trazer para o topo dos mecanismos de pesquisa, esta é a parte mais importante do código.



A meta tag informa ao mecanismo de pesquisa sobre o tipo de conteúdo postado em uma página, o tópico dessa página e como o mecanismo de pesquisa deve exibi-lo.



Next.js tem um componente integrado que adiciona metatags ao contêiner da <head>página:

import Head from 'next/head'

Para inserir uma metatag em uma página, use o componente integrado Head:

import Head from 'next/head'

const Example = () => {
  return (
    <div>
      <Head>
        <title>Example</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hi Next.js!</p>
    </div>
  )
}

export default Example



O componente integrado Headevita a duplicação de metatags no site - se você adicionar a propriedade key, a metatag será exibida apenas uma vez:

<meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />

Você pode melhorar a classificação de pesquisa de um aplicativo simplesmente adicionando algumas metatags à página. Aqui você pode ler sobre as importantes meta tags para SEO.



Verifique seu código agora para ver se há metatags nele, e essas são as metatags que você deseja? Acredite em mim, as metatags certas são o que você precisa para melhorar a qualidade da indexação e direcionar o tráfego orgânico.



Produtividade



Os usuários estão acostumados com o carregamento rápido das páginas e não estão prontos para esperar para sempre. Ao desenvolver um aplicativo, pense primeiro no desempenho. É também um dos principais fatores de classificação do mecanismo de pesquisa.



Os mecanismos de pesquisa, especialmente o Google, usam os primeiros tempos de exibição do conteúdo(First Contentful Paint, ou FCP) como uma métrica de desempenho principal. O FCP mede o tempo desde o início do carregamento de uma página até o primeiro item de conteúdo ser exibido na tela. Um FCP baixo terá uma classificação SEO baixa.



Com Next.js, você pode analisar as métricas FCP e LCP (tempo de renderização para a maior parte do conteúdo, Largest Contentful Paint) criando um componente de aplicativo personalizado e declarando uma função reportWebVitals:

// pages/_app.js
export function reportWebVitals(metric) {
  console.log(metric)
}

A função reportWebVitalsserá chamada quando os valores finais da métrica para a página forem calculados. Você pode ler



mais sobre como medir o desempenho em Next.js aqui . Aqui está o que você precisa para melhorar o FCP.

Certificado SSL

Em agosto de 2014, o Google anunciou que levaria HTTPS em conta ao classificar. O protocolo de comunicação HTTPS seguro fornece uma camada adicional de proteção para usuários que transmitem seus dados ao seu site.



Para conectar HTTPS, você precisa obter um certificado SSL. Um bom certificado SSL pode custar um bom dinheiro. Como obter um certificado SSL gratuitamente com Next.js ?



Para fazer isso, o aplicativo precisa ser implantado em uma plataforma de nuvem como o Vercel . A Vercel é a empresa por trás do Next.js, portanto, a integração ocorrerá sem problemas. Para implantar Next.js na plataforma Vercel, você precisa instalar o Vercel CLI:

yarn global add vercel

Em seguida, vá para o projeto e execute o comando:

vercel

O projeto será publicado no Vercel e protegido por um certificado SSL.

O conteúdo é importante

É muito importante apresentar adequadamente o conteúdo que os visitantes do seu site veem. Criar um produto de qualidade é a principal tarefa de todo desenvolvedor.



Qual aplicativo desenvolver - página única ou renderizada no lado do servidor - depende do tipo de conteúdo que você deseja mostrar e como deseja obter feedback dos clientes.



A estrutura Next.js é construída para o desenvolvimento de aplicativos React renderizados por servidor, o que nos dá ótimo SEO, UX, desempenho e muito mais. Ajuda empresas e desenvolvedores a melhorar a qualidade de seus sites e projetos e direcionar mais tráfego de pesquisa orgânico. ...



Bem, é hora de passar para Next.js e explorar todo o potencial dos aplicativos de renderização do lado do servidor. Eles serão úteis para você e sua empresa, e em geral - eles são simplesmente incríveis! Garanto que você ficará surpreso.

Conclusão

Neste artigo, examinamos mais de perto a estrutura Next.js e aprendemos como ela pode ser usada para otimizar aplicativos modernos para mecanismos de pesquisa. Também classificamos os conceitos gerais de SEO e cobrimos meta tags, desempenho, certificados SSL e assim por diante, que são os aspectos a serem considerados ao desenvolver um aplicativo.

LogRocket : Visibilidade Completa do Aplicativo da Web

LogRocket é um serviço de monitoramento de aplicativo da web que permite que você repita os problemas do usuário como se eles tivessem ocorrido em seu navegador. Agora não há necessidade de adivinhar por que o erro ocorreu ou pedir aos usuários que façam capturas de tela ou despejos de log. LogRocket permite que você repita a sessão e descubra o que está causando o problema. Funciona muito bem com qualquer aplicativo em qualquer estrutura e você pode usar plug-ins para adicionar contexto adicional de Redux, Vuex e @ngrx/store.



Além de adicionar ações e estados Redux, LogRocket registra logs de console, erros de JavaScript, rastreamentos de pilha, solicitações de rede e respostas com cabeçalhos e corpos, metadados do navegador e logs personalizados. Ele usa o DOM para escrever HTML e CSS na página, fornecendo replays de vídeo por pixel até mesmo para os aplicativos de página única mais complexos.



Experimente gratuitamente .

Consulte Mais informação:

• Perguntas que me fizeram em entrevistas iniciais