Como gerenciar SEO em Next.js com Next SEO
Tags: nextjs, programming, tutorial, braziliandevs
Published: 2023-01-26 13:15:57

O SEO é um aspecto crítico que ajuda os sites a se classificarem de maneira mais eficaz nas páginas de resultados do mecanismo de pesquisa (SERPs). Uma classificação mais alta nas SERPs aumenta o tráfego orgânico e leva a maiores oportunidades de negócios, então você pode ver porque é vital manter isso em mente!

Por isso, é crucial para nós, como desenvolvedores, garantir que o SEO do site de nossos projetos seja gerenciado corretamente sem perder nenhuma propriedade.

Neste artigo, usaremos o Next SEO para gerenciar a otimização do mecanismo de pesquisa em nossas aplicações Next.js.

O que abordaremos nesse artigo:

- Next SEO e Next.js
- Configuração rápida
- Adicionando Next SEO a uma página 
- Default SEO
 - Substituir propriedades padrão
- Suporte a Open Graph
- Exemplo de áudio
- Suporte a dados estruturados
- Opções de Next SEO
- Suporte ao diretório de aplicações Nex.js 13
- Meta tags comuns
- Adicionando componentes JSON-LD

## Next SEO e Next.js

O Next.js tem suporte para a geração de sites estáticos (SSG), que oferece melhor capacidade de SEO do que a renderização do lado do cliente. Ele também possui um componente principal integrado para gerenciar meta informações de SEO, como título, descrição, canônico e Open Graph.

Quando há mais páginas em um site, também há mais metatags a serem contabilizadas. À medida que um site cresce, gerenciá-los pode se tornar um processo assustador.

Para simplificar isso, podemos usar um pacote chamado `next-seo`. Next SEO facilita o gerenciamento de SEO em seus projetos Next.js.

Ao usar o Next SEO, podemos passar as propriedades de SEO como um objeto e o pacote adiciona automaticamente as propriedades ao cabeçalho da página.

Você pode adicionar isso a cada página individualmente ou usar o componente `DefaultSeo` e sobrescrevê-lo em outras páginas.

Vamos começar e vê-lo em ação.

## Configuração rápida

Primeiro, instale o pacote next-seo em seu projeto Next.js usando o seguinte comando:

```
yarn add next-seo
```
**ou**

```
npm i next-seo
```

## Adicionando Next SEO a uma página

Vamos importar o pacote `next-seo` para a pasta `page` com propriedades de SEO. Para fazer isso, adicione o seguinte código ao componente `home`:

```jsx
//home.js

import { NextSeo } from 'next-seo';

const Home = () => (
    <>
        <NextSeo
            title="Home Page Title"
            description="Home page description of the page"
        />
        <p>Simple Usage</p>
    </>
);

export default Home
```
Isso renderizará uma tag `<head>` com um título e uma descrição para sua página. Você pode verificá-lo inspecionando-o, conforme mostrado aqui:


![Imagem com código](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ao53u9vsl3angm2abs6d.png)

Você pode ver que a tag inclui `og:title` e `og:description` por padrão, usando as propriedades `title` e `description`.

Essa é uma configuração simples; vamos explorar as outras opções disponíveis para nós no Next SEO.

## Default SEO

Para adicionar propriedades padrão a todas as nossas páginas, podemos usar o componente `DefaultSeo`, em vez de adicionar manualmente as propriedades individualmente a cada página. Também podemos substituir qualquer propriedade em uma página, se necessário.

Adicione o componente `DefaultSeo` a `_app.js` e adicione o seguinte código:

```jsx
/_app.js

import '../styles/globals.css'
import {DefaultSeo} from 'next-seo';

function MyApp({Component, pageProps}) {
    return (
        <>
            <DefaultSeo
                title="Next SEO Example"
                description="Next SEO is a plug in that makes managing your SEO easier in Next.js projects."
                openGraph={{
                    type: 'website',
                    locale: 'en_IE',
                    url: 'https://www.url.ie/',
                    siteName: 'SiteName',
                }}
                twitter={{
                    handle: '@handle',
                    site: '@site',
                    cardType: 'summary_large_image',
                }}
            />
            <Component {...pageProps} />
        </>
    )
}

export default MyApp
```

Agora, as propriedades de SEO adicionadas ao componente padrão serão renderizadas em todas as páginas. Você pode verificar isso inspecionando novamente a página, conforme mostrado aqui:


![Imagem de código](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pepp0u309botez0p3pgi.png)

## Substituindo propriedades padrão

Agora, vamos substituir as propriedades padrão de SEO em nossa página de blog , pois cada blog terá um título e uma descrição individuais. Adicione o seguinte código à página:

```jsx
//blog.js

import {NextSeo} from 'next-seo';

const Blog = () => (
    <>
        <NextSeo
            title="Manage SEO in NextJS with Next SEO"
            description="Next SEO packages simplifies the SEO management in Next Apps with less configurations"
            canonical="www.example.com/next-seo-blog"
            openGraph={{
                type: 'article',
                article: {
                    publishedTime: '2022-06-21T23:04:13Z',
                    modifiedTime: '2022-01-21T18:04:43Z',
                    authors: [
                        'https://www.example.com/authors/@firstnameA-lastnameA',
                        'https://www.example.com/authors/@firstnameB-lastnameB',
                    ],
                    tags: ['Tag A', 'Tag B', 'Tag C'],
                },
                url: 'www.example.com/next-seo-blog',
                images: {
                    url: 'https://www.test.ie/images/cover.jpg',
                    width: 850,
                    height: 650,
                    alt: 'Photo of text',
                },
                site_name: 'Next Blog'
            }}
        />
        <p>Manage SEO in NextJS with Next SEO - Blog</p>
    </>
);

export default Blog;
```

Aqui, substituímos o `title`, a `description` e outras propriedades. Você também pode ver algumas novas propriedades especificamente relacionadas às nossas postagens de blog:

- **publishedTime**: Data de publicação do blog
- **modifiedTime**: Data de atualização do blog
- **tags**: Tags associadas à postagem do blog
- **authors**:  Autor do blog

Você pode verificar isso inspecionando a página:


![Imagem de código](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4drnjjh4yo0z694u6gy2.png)

Como você pode ver, há algumas meta-informações relacionadas aos cartões do Twitter, mas não as incluímos na página do blog — elas foram adicionadas pelo Next SEO, que adicionamos anteriormente usando o Componente `DefaultSeo`.

Você pode ver com este exemplo, como ele oferece suporte a propriedades de SEO relacionadas ao blog prontas para a para facilidade de uso.

## Suporte a Open Graph

O protocolo Open Graph controla qual conteúdo deve ser exibido ao compartilhar links nas mídias sociais. O uso de tags Open Graph em páginas Web, permite que elas se tornem objetos ricos em um gráfico social.

Por exemplo, o protocolo OG permite controlar qual título, imagem e descrição são exibidos ao compartilhar links em plataformas de mídia social. Se você compartilhar sem tags OG, as plataformas de mídia social escolherão um título, imagem e descrição aleatórios.

Plataformas como Twitter, LinkedIn e Facebook reconhecem tags Open Graph — no entanto, o Twitter também tem meta tags chamadas Twitter Cards, mas usará tags OG quando não houver necessidade de usar tags Twitter Card.

Next SEO suporta as seguintes propriedades OG:

- Áudio
- Video
- Artigo
- Perfil
- Livro

## Exemplo de áudio

A configuração a seguir habilita o suporte de Open Graph de áudio com vários arquivos de áudio:


```jsx
//Podcast.js

import { NextSeo } from 'next-seo';
const Podcast = () => (
  <>
    <NextSeo
      title="Podcast Page Title"
      description="Next SEO PodCast"
      openGraph={{
        title: 'Open Graph Audio',
        description: 'Description of open graph audio',
        url: 'https://www.example.com/audio/audio',
        audio: [
          {
            url: 'http://examples.opengraphprotocol.us/media/audio/1khz.mp3',
            secureUrl: 'https://d72cgtgi6hvvl.cloudfront.net/media/audio/1khz.mp3',
            type: "audio/mpeg"
          },
          {
            url: 'http://examples.opengraphprotocol.us/media/audio/250hz.mp3',
            secureUrl: 'https://d72cgtgi6hvvl.cloudfront.net/media/audio/250hz.mp3',
            type: "audio/mpeg"
          },
        ]
        site_name: 'SiteName',
      }}
    />
    <h1>Audio Page SEO</h1>
  </>
);
export default Podcast;
```

Você pode dar uma olhada em outros exemplos para outros tipos de OG para saber mais.

## Suporte a dados estruturados

Dados estruturados são um formato padronizado para fornecer informações sobre uma página e classificar o conteúdo da página. Isso ajuda os mecanismos de pesquisa a entender a página Web e exibir os títulos, descrições, imagens e outras informações mais relevantes para os usuários finais.

O Next SEO também suporta dados estruturados com configuração limitada necessária, suportando vários tipos JSON-LD como `article`, `blog`, `FAQ` e `course`.

Vamos ver isso em ação com um exemplo.

O componente `ArticleJsonLd` é usado para adicionar dados estruturados a uma página. Adicione o seguinte código para adicionar dados estruturados aos nossos blogs:

```jsx
/blog.js

import {ArticleJsonLd, NextSeo} from 'next-seo';

const Blog = () => (
    <>
        <NextSeo
            title="Manage SEO in NextJS with Next SEO"
            description="Next SEO packages simplifies the SEO management in Next Apps with less configurations"
            canonical="www.example.com/next-seo-blog"
            openGraph={{
                type: 'article',
                article: {
                    publishedTime: '2022-06-21T23:04:13Z',
                    modifiedTime: '2022-01-21T18:04:43Z',
                    authors: [
                        'https://www.example.com/authors/@firstnameA-lastnameA',
                        'https://www.example.com/authors/@firstnameB-lastnameB',
                    ],
                    tags: ['Tag A', 'Tag B', 'Tag C'],
                },
                url: 'www.example.com/next-seo-blog',
                images: {
                    url: 'https://www.test.ie/images/cover.jpg',
                    width: 850,
                    height: 650,
                    alt: 'Photo of text',
                },
                site_name: 'Next Blog'
            }}
        />
        <ArticleJsonLd
            type="BlogPosting"
            url="https://example.com/blog"
            title="Manage SEO in NextJS with Next SEO"
            images={[
                'https://example.com/photos/1x1/photo.jpg',
                'https://example.com/photos/4x3/photo.jpg',
                'https://example.com/photos/16x9/photo.jpg',
            ]}
            datePublished="2022-06-21T23:04:13Z"
            dateModified="2022-06-21T23:04:13Z"
            authorName="Author Name"
            description="Next SEO packages simplifies the SEO management in Next Apps with less configurations"
        />
        <p>Manage SEO in NextJS with Next SEO - Blog</p>
    </>
);

export default Blog;

```

Agora adicionamos algumas propriedades de SEO ao `JsonLd`, que serão renderizadas da seguinte forma:


![Imagem de código](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vblzkor8m92b6zqxiefa.png)

Os dados JSON são renderizados na tag `<script>`. Você pode verificar todos os tipos JSON-LD disponíveis para obter mais informações sobre isso.

## Opções de Next SEO

A seguir estão as propriedades do componente `NextSeo`, que podemos usar para lidar com diferentes propriedades de meta tags. Algumas das propriedades mais utilizadas são:

- **defaultTitle**: Se nenhum título for definido em uma página, esta string será usada em vez de um título vazio.
- **noindex**: Opção para definir se a página deve ser indexada ou não.
- **nofollow**: Opção para definir se a página deve ser seguida ou não.
- canonical: defina o URL canônico da página.
- **facebook.appId**: Adicione o ID do aplicativo do Facebook à sua página para receber dados do Facebook Insights.
- **additionalMetaTags**: Metatags adicionais como title e content.
- **additionalLinkTags**: metalinks adicionais como favicons.

## Suporte ao diretório de aplicativos Next.js 13

O Next.js 13 introduziu um recurso beta no diretório `app` para roteamento ao lado do diretório `pages`.

Devido a essa alteração, o uso e a configuração do `next-seo` também mudam, pois o novo diretório `app` traz as seguintes alterações no fluxo existente:

1. Next.js não remove mais as tags duplicadas no head, então não podemos usar o componente **DefaultSeo** para SEO global.
2. O diretório app inclui o arquivo **head.js** para incluir tags **<head>**, mas ele não suporta script embutido síncrono. Como resultado, componentes JSON-LD não podem ser adicionados em **head.js**, então ele precisa ser adicionado em **page.js**, que adiciona o **<body/>** do documento.
3. Next.js não adiciona meta tags abaixo por padrão, então precisamos adicionar isso manualmente no layout raiz.

## Meta tags comuns

De acordo com o novo diretório `app`, as metatags `DefaultSeo` não podem ser substituídas em outras páginas. Por conta disso, precisamos identificar as tags comuns e colocá-las no layout raiz (`/app/layout.js`), conforme demonstrado aqui:

```jsx
// app/layout.js
import { NextSeo } from 'next-seo';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        {/* Used to be added by default, now we need to add manually */}
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width" />
        {/* 
          Anything we add in layout will appear on EVERY PAGE. At present it can not be overridden lower down the tree.
          This can be useful for things like favicons, or other meta tags that are the same on every page.
        */}
        <NextSeo
          useAppDir={true}
          facebook={{ appId: '1234567890' }}
          themeColor="#73fa97"
          titleTemplate="%s | Next SEO"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}
```

A seguir estão as meta tags renderizadas do exemplo acima:


![Imagem de código](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbdy4skskoab600zyrp5.png)

## COnfigurações meta padrão

Para usar meta tags comuns como `og`, `image`, `title` e `description`, comece adicionando o arquivo `next-seo-config.js` com meta tags comuns e importe-o para as páginas necessárias. Aqui está um exemplo do que quero dizer:

```jsx
// next-seo-config.js
export const NEXT_SEO_DEFAULT = {
  title: 'Page Title',
  description: 'Page Description',
  openGraph: {
    type: 'website',
    locale: 'en_IE',
    url: 'https://www.url.ie/a',
    title: 'OG Title',
    description: 'OG Decription',
    siteName: 'Example',
  },
};
```

Agora, importe o arquivo `next-seo-config.js` para `head.js`, conforme mostrado aqui:

```jsx
// app/head.js
import { NextSeo } from 'next-seo';

import { NEXT_SEO_DEFAULT } from './next-seo-config'; // seu caminho vai variar

export default async function Head() {
  return <NextSeo {...NEXT_SEO_DEFAULT} useAppDir={true} />;
}
```

## Substitua o SEO default

Você pode substituir as meta tags padrão `next-seo-config` em outras páginas, se necessário — dê uma olhada no exemplo a seguir para ver como isso é feito:

```jsx
 // app/profile/head.js
import { NextSeo } from 'next-seo';

import { NEXT_SEO_DEFAULT } from '../next-seo-config'; // your path may vary

export default async function Head() {
  const updateMeta = {
    ...NEXT_SEO_DEFAULT,
    title: 'Profile',
    description: 'User Profile',
  };
  return <NextSeo {...updateMeta} useAppDir={true} />;
}
```
Aqui, estamos atualizando o título e a descrição das meta tags de SEO padrão de acordo com nossas próprias especificações.

Aqui está a saída para o exemplo acima:


![Imagem de código](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31bsruskfxntgq7onver.png)

## Adicionando componentes JSON-LD

Como vimos anteriormente, no novo diretório `app`  o `head.js` não suporta um `<script>` embutido. Podemos adicionar o JSON-LD ao arquivo `page.js`, que adiciona os dados estruturados JSON-LD ao body do documento.

Confira o exemplo a seguir:

```jsx
// app/blog/page.js
import { ArticleJsonLd } from 'next-seo';

const Article = () => (
  <>
    <h1>Article</h1>
    <p>Inspect page for output.</p>
    <ArticleJsonLd
      useAppDir={true}
      type="BlogPosting"
      url="https://example.com/blog"
      title="Blog headline"
      images={[
        'https://example.com/photos/1x1/photo.jpg',
        'https://example.com/photos/4x3/photo.jpg',
        'https://example.com/photos/16x9/photo.jpg',
      ]}
      datePublished="2015-02-05T08:00:00+08:00"
      dateModified="2015-02-05T09:00:00+08:00"
      authorName="Jane Blogs"
      description="This is a mighty good description of this blog."
    />
  </>
);

export default Article;
```

Aqui está a saída para o exemplo acima:


![Imagem de código](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw0133469awb0blyxpmx.png)

## Conclusão

SEO é essencial para páginas web que precisam ser descobertas organicamente. Para ter altas classificações de página, os sites precisam ser organizados para que possam ser facilmente rastreados pelos mecanismos de pesquisa.

O Next SEO torna o gerenciamento da otimização de mecanismo de pesquisa em projetos Next.js muito simples e fácil de implementar - ajuda os desenvolvedores a adicionar propriedades de SEO com eficiência, sem perder nenhuma metatag importante, evitando a ocorrência de duplicatas.

Você pode encontrar outras propriedades e exemplos na [documentação oficial](https://github.com/garmeeh/next-seo). Obrigado pela leitura!