Next.js é um popular framework web baseado em React que ganhou popularidade e uma comunidade em crescimento nos últimos anos. É uma ferramenta poderosa para construir aplicativos web rápidos e com boa otimização para mecanismos de busca, com páginas dinâmicas que funcionam muito bem em dispositivos móveis.

Devido à complexa natureza do design isomórfico, a otimização para mecanismos de busca com o Next.js pode ser um tópico complicado de entender, especialmente se você está vindo de aplicativos React tradicionais e está contando apenas com a documentação.

Com suporte integrado para renderização do lado do servidor, geração de sites estáticos e agora componentes do servidor React, o Next.js fornece uma plataforma robusta para alcançar métricas de SEO de qualidade em seu aplicativo da web. Ele também ajuda a fornecer experiências excepcionais aos usuários em várias páginas em aplicativos Node e React, tornando-os amigáveis para SEO.

Por que você deveria aprender o NextJS para desenvolvimento Front End?

Em resumo, a versão mais recente do NextJS é uma plataforma de código aberto que resolve muitos problemas de renderização que o React tem atualmente. O Next.js evita muitos problemas de renderização, tornando muito fácil para os motores de busca entenderem do que se trata o seu site.

Quem vai se beneficiar mais com este artigo?

Isso será muito útil para você se você é um profissional de marketing ou um desenvolvedor mais avançado que está enfrentando problemas de SEO.

No entanto, desenvolvedores mais novos também são bem-vindos para revisar essas informações, pois isso ajudará no longo prazo.

Como o Next SEO é diferente de outros frameworks?

O Next SEO se destaca por simplificar muitos recursos e ferramentas gratuitas em um pacote bem organizado que você pode facilmente compreender e aplicar em suas aplicações de página única. O Next faz um excelente trabalho quando se trata de tarefas como otimização para mecanismos de busca, otimização de imagem e minimização de deslocamento cumulativo de layout.

Os benefícios do Next.js SEO não param por aí. Estaremos abordando muitas das vantagens que o Next.js traz para a mesa relacionadas a mecanismos de busca, antigos e novos.

Conceitos de mecanismos de busca, SSR e SSG estão evoluindo

A maioria dos desenvolvedores e especialistas em SEO se tornaram bastante confortáveis com as estratégias de criação de páginas existentes e todo o paradigma de SSR vs SSG. Eles também desenvolveram um alto nível de confiança na versão 12 do Next.js, que fornece uma maneira clara de lidar com essas duas formas de geração de páginas.

Como de costume, no entanto, mais uma mudança de paradigma de aplicativos da web está em curso, desta vez na forma de Componentes do Servidor React (RSCs), que estão incluídos por padrão na versão 13 do Next.js.

Os conceitos de SEO não mudaram - apenas a abordagem

O SEO do Next JS não muda muito conceitualmente. Se você está procurando bons resultados de mecanismos de busca e tráfego orgânico, o jogo ainda gira em torno da ideia de carregamentos rápidos de página, pinturas rápidas, baixo deslocamento cumulativo de layout e tudo o mais. As páginas estáticas ainda desempenham um papel importante também.

Mas o Next.js nos oferece recursos bastante legais e novos que ajudam a facilitar excelentes métricas de mecanismos de busca, e não é apenas os Componentes do Servidor React.

Exploraremos algumas das melhores práticas juntamente com algumas técnicas e estratégias diferentes para alcançar ótimas métricas de otimização de SEO com o Next.js. Também veremos como aproveitar seus recursos exclusivos para melhorar a visibilidade do seu site nos mecanismos de busca e o engajamento do usuário.

O que há de novo no Next.js 13 que se relaciona com SEO?

Em vez de dar um guia abrangente das mudanças técnicas encontradas na versão 13, vamos nos concentrar principalmente nas vantagens relacionadas ao SEO do Next JS. Também veremos como você pode aproveitar as melhores práticas de SEO para obter os melhores resultados possíveis nos mecanismos de busca com muito menos esforço do que o normalmente necessário.

As mudanças da versão 13 que discutiremos aqui são as seguintes:

• Componentes do servidor React
• Divisão de UI em streaming
• Componente de imagem do Next atualizado
• Componente de fonte do Next

Além das propriedades de SEO padrão existentes do Next, essas atualizações específicas são o alicerce das melhorias de SEO do Next.js na versão 13. Cada uma delas é incrível por seus próprios motivos, que veremos em breve.

Componentes de Servidor do React

Os RSCs permitem uma abordagem mais refinada para renderização tanto no cliente quanto no servidor.

Em vez de ser forçado a decidir se renderizar uma página inteira no cliente ou servidor ao solicitar do usuário, o React permite que os desenvolvedores escolham se os componentes devem ser renderizados no servidor ou no cliente. Isso pode lhe dar uma enorme vantagem nas páginas de resultados de mecanismos de pesquisa.

Uma grande maioria da otimização de página nos dias de hoje gira em torno de enviar menos JavaScript para o cliente. Afinal, este é o principal benefício de usar pré-renderização e renderização do lado do servidor para criar páginas web e páginas HTML.

Os RSCs são outra ferramenta para ajudar a alcançar esse objetivo e obter o máximo de valor de SEO de suas páginas da web ou aplicativos de página única que você puder. Isso ajuda a alcançar um melhor SEO ao atualizar dados dinâmicos em um componente do React, enquanto deixa as partes estáticas do conteúdo da página intactas.

Transmissão de Pacotes de UI

O Next.js deu um grande salto em termos de SEO ao adicionar os RSCs, e a transmissão de pacotes de UI é a cereja do bolo. A transmissão de UI é uma derivação semelhante de um novo e crescente padrão de design chamado "arquitetura de ilha", que busca enviar o mínimo de código possível para o cliente no primeiro carregamento.

Permitir um controle mais refinado é ótimo, mas por que não enviar uma página totalmente renderizada, sem JavaScript, para o cliente e enviar o restante posteriormente? Isso é exatamente o que os pacotes de UI de transmissão conseguem.

Quando o Next.js renderiza uma página no servidor, a página geralmente vem com todo o JavaScript agrupado e enviado junto com ela. A capacidade de transmitir pacotes de dados elimina essa necessidade e permite o envio de uma página estática extremamente pequena para o cliente, melhorando significativamente as métricas da web, como a primeira pintura do conteúdo e a velocidade geral da página.

Diretório App do Next.js 13

Ao iniciar um novo projeto Next.js 13, você notará um novo diretório chamado "app". Tudo dentro do diretório "app" é pré-configurado para permitir RSCs e transmissão de pacotes de UI. Você só precisa criar um componente "loading.js", que envolverá completamente o componente da página e qualquer filho dentro de um limite de suspense.

Você pode obter um padrão de carregamento ainda mais granular criando manualmente os limites de suspense, permitindo essencialmente um controle ilimitado sobre o que é carregado na solicitação inicial.

Os passos para os pacotes de UI de transmissão são mais ou menos assim:

1. O usuário faz uma solicitação inicial.
2. Uma página HTML básica é renderizada e enviada para o cliente.
3. Os pacotes de JavaScript estão sendo preparados no servidor.
4. Uma seção da página que requer JavaScript se torna visível no navegador do cliente.
5. O pacote de JavaScript apenas para aquele componente é enviado para o cliente.

Essa nova ferramenta tem importantes implicações para o SEO técnico, permitindo que páginas mais interativas concorram com páginas estáticas em relação à velocidade de carregamento da página e outras métricas da web que são usadas como fatores de classificação nos resultados de pesquisa pelos mecanismos de busca.

Componente Next Image Atualizado

Outra atualização importante para a esfera de SEO do Next.js é o componente Image. Embora isso tenha sido um pouco subestimado, a maior melhoria, na minha opinião, é a utilização nativa do lazy loading.

Os navegadores têm oferecido suporte ao lazy loading nativo há algum tempo, e incluir JavaScript adicional para esse recurso é simplesmente um desperdício de largura de banda.

Algumas outras melhorias excelentes para SEO são:

• Tag alt obrigatória por padrão.
• Melhor validação para identificar erros envolvendo propriedades inválidas.
• Mais facilmente estilizado devido a uma interface mais semelhante ao HTML.

No geral, o novo componente Image é simplificado e enxuto, e no mundo da programação, o mais simples quase sempre é melhor.

O Componente de Fontes do Next

O componente de fontes é uma grande vitória para o SEO do Next.js, e certamente ajudará a aliviar muitas dores de cabeça no futuro. Qualquer desenvolvedor experiente sabe o quão tedioso pode ser configurar fontes corretamente (correto não é relativo neste caso!).

Mudanças cumulativas de layout devido a carregamentos lentos são uma irritação comum, e mecanismos de busca como o Google afirmaram abertamente que a CLS é uma métrica importante na web.

Dependendo do framework que você está usando (Gatsby vem à mente), pode ser complicado fazer com que suas fontes pré-carreguem efetivamente. Fazer solicitações externas a repositórios de fontes como o Google tem sido um mal necessário por algum tempo, criando um gargalo difícil de gerenciar em muitas aplicações SPA.

O Componente de Fontes do Next visa resolver esse problema, buscando todas as fontes externas no momento da construção e hospedando-as em seu próprio domínio. As fontes também são otimizadas automaticamente, e uma mudança cumulativa de layout zero é alcançada pela utilização automática da propriedade CSS size-adjust.

Tarefas comuns relacionadas ao SEO com Next.js

Existem alguns tópicos importantes a serem considerados ao configurar tarefas comuns de SEO do Next.js para a versão 13.

SEO do Next.js com a versão 13

A versão do Next do componente React Head costumava ser usada para atribuir valores às tags meta dentro do cabeçalho do documento e também para injetar dados estruturados.

No entanto, com a versão 13, o componente Head não é mais utilizado. Inicialmente, o Next optou por utilizar um arquivo especial chamado head.js que funciona de maneira semelhante ao componente Head. Depois da versão 13.2, o Next implementou o componente Metadata, que é uma implementação proprietária mais avançada para resolver o problema de metadados, preenchendo facilmente as tags meta.

Vamos dar uma olhada mais de perto nessas duas tarefas comuns de SEO e examinar como elas costumavam ser tratadas em comparação com a nova maneira da versão 13.

Como configurar a tag Head para otimização de mecanismos de busca

Antes da versão 13, nós importávamos o componente Next/Head e definíamos os valores de metadados necessários, como título, descrição ou outras tags meta dentro do arquivo HTML da página da web.

Um exemplo simples do componente Head na versão 12 se parece com isso:

import Head from 'next/head'
const structData = {
  '@context': 'https://schema.org',
  '@type': 'BlogPosting',
  headline: 'Aprendendo Next.js SEO',
  description: 'Tudo sobre os recursos do Next.js',
  author: [
    {
    '@type': 'Person',
    name: 'Fulano',
    },
  ],
  datePublished: '2023-02-16T09:00:00.000Z',
};

function IndexPage() {
return (
  <div>
    <Head>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <title>Título da página</title>
      <script
        key="structured-1"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structData) }}
      />
    </Head>

    <p>Hello world!</p>
  </div>
  )
}

export default IndexPage

Adicionar dados estruturados, como título e descrição ou quaisquer outras tags meta adicionais nos metadados de uma página é simplesmente incluir uma tag script com o atributo dangerouslySetInnerHTML, como visto no exemplo.

A maioria dos desenvolvedores codifica um componente SEO que utiliza o componente Head para alcançar uma abordagem mais DRY (não se repita). Aqui, você evita que os mesmos dados ou arquivos HTML sejam enviados várias vezes ao usuário. Mas na verdade é tudo a mesma coisa, e Head era a abordagem preferida para otimizar uma página da web em relação às tags meta.

O arquivo head.js especial do Next

Com a versão 13, você pode esquecer completamente o componente Head usual. A partir da primeira iteração da versão 13, o Next implementou o arquivo head.js (ou .tsx). Este arquivo pode ser incluído em qualquer pasta dentro do diretório do aplicativo para gerenciar dinamicamente os metadados de SEO e declarar quais tags, juntamente com seus valores, serão utilizados para uma rota específica e página específica.

Cada pasta no diretório do aplicativo representa uma nova rota, por isso é necessário criar um arquivo head.js em cada pasta para configurar os valores dos metadados. Aqui está um exemplo de arquivo head.js:

export default function Head(params) {
  return (
    <>
      <title>Exemplo head.js</title>
    </>
  );
}

Observe que retornamos um fragmento React em vez de uma tag head real ou qualquer outro elemento. Este é um aspecto necessário do componente head.js.

Você só pode retornar as seguintes tags de metadados de dentro do fragmento: <title>, <meta>, <link> (com o atributo precedence) ou <script> (com o atributo async).

O Next nunca implementou completamente este componente, o que fez com que a maioria dos desenvolvedores criasse implementações personalizadas para adicionar dados estruturados à mistura. Embora, um pouco mais tarde, o Next começou a recomendar que os dados estruturados fossem adicionados ao componente de layout ou página, o que abordaremos um pouco mais tarde.

Este componente tornou-se obsoleto na versão 13.2, e a equipe do Vercel passou a utilizar o componente Metadata.

O componente Metadata do Next

Com o lançamento do Next versão 13.2, o Next decidiu não utilizar mais o componente Head e, em vez disso, criou o componente Metadata.

No momento em que este texto foi escrito, ainda não há muitas informações disponíveis sobre exemplos de uso e afins. Na verdade, a versão 13.2 ainda não foi lançada, e estamos apenas na versão 13.1.7-canary no momento.

No entanto, o Next tem uma documentação decente sobre o assunto, então vamos examinar o uso e fazer uma análise básica. É importante estar informado sobre isso se você planeja estar por dentro do SEO do Next.js, porque está chegando.

O componente Metadata tem como objetivo ser a loja única para preencher a tag head com título, descrição e outros metadados dinâmicos de maneira eficiente e fácil de usar. O uso é realmente bastante simples e envolve exportar um objeto chamado metadata ou uma função chamada generateMetadata do próprio componente de página.

Vamos dar uma olhada em um exemplo básico de uso:

Exemplo de exportação de metadados do Next.js

examplePage.tsx

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Componente de exemplo',
  description: 'Aprendendo Next.js SEO',
};

export default function Page() {
  return (
    <>
      <div>Exemplo de página</div>
    </>
  )
}

Isso preencherá automaticamente o componente examplePage.tsx com as tags meta HTML apropriadas e valores fornecidos.

O componente de metadados também oferece um conjunto de tags padrão, que configura automaticamente as seguintes tags meta charset e viewport:

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

Next.js exporta a função generateMetadata para gerar metadados

Em muitas aplicações, especialmente em comércio eletrônico, pode ser necessário preencher dinamicamente as tags meta e garantir que esses dados reflitam sempre as alterações em um banco de dados ou outra fonte de dados.

Para casos como esses, o Next oferece a função generateMetadata, que pode ser exportada de qualquer componente de página juntamente com as chamadas de API necessárias para buscar e injetar os dados desejados.

Aqui está um exemplo de componente de página que utiliza esse método:

pageExample.tsx

import type { Metadata } from 'next';

async function getInfo(id) {
  const res = await fetch(`https://someapi/product/${id}`);
  return res.json();
}

export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getInfo(params.id);
  return { title: product.title }
}

export default async function Page() {
  return (
    <div>Exemplo de página</div>
  )
}

Como você pode ver, criamos um método que retorna informações sobre um produto de uma API e usamos esse método em nossa função generateMetadata para preencher a propriedade de título. Isso, por sua vez, definirá a tag de título em nossa página HTML renderizada.

É importante observar que a função generateMetadata só pode ser usada em componentes do servidor, como discutimos anteriormente. Lembre-se de que todos os componentes dentro do diretório app são automaticamente configurados como componentes do servidor por padrão.

Para uma lista exaustiva de propriedades e extensões de propriedades disponíveis com o componente de metadados, dê uma olhada na documentação. Praticamente tudo o que você possa imaginar pode ser realizado com relativa facilidade.

Como implementar dados estruturados com o Next 13

O Next recomenda adicionar dados JSON-LD estruturados ao layout ou componente da página. Sinceramente, essa sempre foi uma solução muito mais simples, pois o Google nunca disse nada sobre excluir dados estruturados da própria página.

Na verdade, isso tem sido uma prática comum há muito tempo, e é um pouco um mistério por que muitos desenvolvedores se fixaram na ideia de colocá-lo na tag head.

Como adicionar dados estruturados ao layout ou componente da página

Adicionar dados estruturados a um componente, seja o layout ou a página, parece algo assim (exemplo retirado diretamente da documentação):

export default async function Page({ params }) {
  const product = await getProduct(params.id);

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    image: product.image,
    description: product.description
  };

  return (
    <section>
      {/* Add JSON-LD na página */}
      <script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
      {/* ... */}
    </section>
  );
}

Como você pode ver, isso é super simples e realmente não há necessidade de complicar as coisas tentando injetar dados estruturados na tag head.

Conclusão sobre SEO com Next.js

Nós cobrimos muita coisa sobre SEO com o Next.js. Desde as novas funcionalidades incluídas no Next 13 que visam resolver muitos problemas relacionados ao SEO, até as funcionalidades antigas sendo aprimoradas e simplificadas para uma melhor experiência do desenvolvedor, as coisas estão ótimas para o Next.

Se você planeja usar o Next.js como seu framework de escolha, recomendo experimentar o Next 13. Embora recursos como o componente Font ainda estejam em beta e tudo ainda esteja na fase de teste, grande parte da versão 13 já é considerada estável e está sendo usada por muitos desenvolvedores e empresas líderes no mundo.

Atualizações de versões principais podem parecer assustadoras, mas certifique-se de ler toda a documentação e testá-la para garantir que você esteja mantendo-se atualizado com as últimas novidades do SEO com Next.js.