DEV Community

Cover image for Como gerenciar SEO em Next.js com Next SEO
Ivan Trindade
Ivan Trindade

Posted on

Como gerenciar SEO em Next.js com Next SEO

#nextjs #programming #tutorial #braziliandevs

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
Enter fullscreen mode Exit fullscreen mode

ou

npm i next-seo
Enter fullscreen mode Exit fullscreen mode

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:

//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
Enter fullscreen mode Exit fullscreen mode

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

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:

/_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
Enter fullscreen mode Exit fullscreen mode

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

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:

//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;
Enter fullscreen mode Exit fullscreen mode

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

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:

//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;
Enter fullscreen mode Exit fullscreen mode

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:

/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;
Enter fullscreen mode Exit fullscreen mode

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

Imagem de código

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 , 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 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:

// 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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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

Imagem de código

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:

// 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',
  },
};
Enter fullscreen mode Exit fullscreen mode

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

// 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} />;
}
Enter fullscreen mode Exit fullscreen mode

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:

 // 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} />;
}
Enter fullscreen mode Exit fullscreen mode

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

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:

// 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;
Enter fullscreen mode Exit fullscreen mode

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

Imagem de código

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. Obrigado pela leitura!

Top comments (0)

Read next

kolort profile image

Understanding Color Gradients in Digital Design: A Comprehensive Guide

kolort -

yuliana_seplveda profile image

User Interface (UI) Design: A Guide for Developers

Yuliana Sepúlveda Marín -

bobbyhalljr profile image

Random Image Generation and Caching in JavaScript

Bobby Hall Jr -

nicooprat profile image

Using BroadcastChannel API with Vue to sync a ref across multiple tabs

Nico Prat -