next seo
v6.6.0
Você viu o novo boletim informativo Next.js?
Ferramentas úteis
Next SEO é um plugin que facilita o gerenciamento de seu SEO em projetos Next.js.
Solicitações pull são muito bem-vindas. Certifique-se também de verificar os problemas de solicitações de recursos se estiver procurando inspiração sobre o que adicionar.
Quer apoiar este plugin gratuito?
Leva muito tempo para manter um projeto de código aberto, então qualquer pequena contribuição é muito apreciada.
Codificação de combustíveis de café ☕️
next-seo.wallet (ERC20 e SOL)
Nota sobre o diretório do aplicativo
Esta nota só é relevante se estiver usando o diretório app .
Para metadados padrão (por exemplo, <title>), é altamente recomendável que você use o método generateMetaData integrado. Você pode conferir os documentos aqui
Para JSON-LD, a única alteração necessária é adicionar useAppDir={true} ao componente JSON-LD em uso. Você deve adicionar use este componente em seu page.js e NÃO em seu head.js .
<ArticleJsonLd
useAppDir={true}
url="https://example.com/article"
title="Article headline" <- required for app directory
/>
Se você estiver usando o diretório pages , NextSeo é exatamente o que você precisa para suas necessidades de SEO!
NextSeo funciona incluindo-o nas páginas onde você gostaria que atributos de SEO fossem adicionados. Uma vez incluído na página, você passa um objeto de configuração com as propriedades SEO da página. Isso pode ser gerado dinamicamente no nível da página ou, em alguns casos, sua API pode retornar um objeto SEO.
Primeiro, instale-o:
npm install next-seoou
yarn add next-seoUsando o diretório de aplicativos Next.js introduzido no Next.js 13?
Se você estiver usando o diretório do aplicativo Next.js, é altamente recomendável usar o método generateMetaData integrado. Você pode conferir os documentos aqui
Se você estiver usando o diretório pages , NextSeo é exatamente o que você precisa para suas necessidades de SEO!
Então, você precisa importar NextSeo e adicionar as propriedades desejadas. Isso renderizará as tags no <head> para SEO. No mínimo, você deve adicionar um título e uma descrição.
Exemplo com apenas título e descrição:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo
title = "Simple Usage Example"
description = "A short description goes here."
/ >
< p > Simple Usage < / p >
< / >
) ;
export default Page ; Mas NextSeo oferece muito mais opções que você pode adicionar. Veja abaixo um exemplo típico de página.
Exemplo típico de página:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo
title = "Using More of Config"
description = "This example uses more of the available config options."
canonical = "https://www.canonical.ie/"
openGraph = { {
url : 'https://www.url.ie/a' ,
title : 'Open Graph Title' ,
description : 'Open Graph Description' ,
images : [
{
url : 'https://www.example.ie/og-image-01.jpg' ,
width : 800 ,
height : 600 ,
alt : 'Og Image Alt' ,
type : 'image/jpeg' ,
} ,
{
url : 'https://www.example.ie/og-image-02.jpg' ,
width : 900 ,
height : 800 ,
alt : 'Og Image Alt Second' ,
type : 'image/jpeg' ,
} ,
{ url : 'https://www.example.ie/og-image-03.jpg' } ,
{ url : 'https://www.example.ie/og-image-04.jpg' } ,
] ,
siteName : 'SiteName' ,
} }
twitter = { {
handle : '@handle' ,
site : '@site' ,
cardType : 'summary_large_image' ,
} }
/ >
< p > SEO Added to Page < / p >
< / >
) ;
export default Page ;Uma nota sobre tags do Twitter
Os adereços cardType , site , handle são equivalentes a twitter:card , twitter:site , twitter:creator . A documentação pode ser encontrada aqui.
O Twitter lerá as og:title , og:image e og:description de seu cartão. next-seo omite twitter:title , twitter:image e twitter:description para evitar duplicação.
Algumas ferramentas podem relatar isso como um erro. Veja a edição nº 14
NextSeo permite que você defina algumas propriedades de SEO padrão que aparecerão em todas as páginas sem a necessidade de incluir nada nelas. Você também pode substituí-los página por página, se necessário.
Para conseguir isso, você precisará criar um <App> personalizado. No diretório de páginas, crie um novo arquivo, _app.js . Consulte a documentação do Next.js aqui para obter mais informações sobre um <App> personalizado.
Dentro deste arquivo você precisará importar DefaultSeo do next-seo e passar props para ele.
Aqui está um exemplo típico:
import App , { Container } from 'next/app' ;
import { DefaultSeo } from 'next-seo' ;
// import your default seo configuration
import SEO from '../next-seo.config' ;
export default class MyApp extends App {
render ( ) {
const { Component , pageProps } = this . props ;
return (
< Container >
< DefaultSeo
openGraph = { {
type : 'website' ,
locale : 'en_IE' ,
url : 'https://www.url.ie/' ,
siteName : 'SiteName' ,
} }
twitter = { {
handle : '@handle' ,
site : '@site' ,
cardType : 'summary_large_image' ,
} }
/ >
< Component { ... pageProps } / >
< / Container >
) ;
}
} Para funcionar corretamente, DefaultSeo deve ser colocado acima (antes) Component devido ao comportamento interno do Next.js.
Alternativamente, você também pode criar um arquivo de configuração para armazenar valores padrão, como next-seo.config.js
export default {
openGraph : {
type : 'website' ,
locale : 'en_IE' ,
url : 'https://www.url.ie/' ,
siteName : 'SiteName' ,
} ,
twitter : {
handle : '@handle' ,
site : '@site' ,
cardType : 'summary_large_image' ,
} ,
} ; import { DefaultSeoProps } from 'next-seo' ;
const config : DefaultSeoProps = {
openGraph : {
type : 'website' ,
locale : 'en_IE' ,
url : 'https://www.url.ie/' ,
siteName : 'SiteName' ,
} ,
twitter : {
handle : '@handle' ,
site : '@site' ,
cardType : 'summary_large_image' ,
} ,
} ;
export default config ; importar no topo de _app.js
import SEO from '../next-seo.config' ; e o componente DefaultSeo pode ser usado assim
< DefaultSeo { ... SEO } / >A partir de agora, todas as suas páginas terão os padrões acima aplicados.
Observe que Container está obsoleto em Next.js v9.0.4, então você deve substituir esse componente aqui por React.Fragment nesta versão e posterior - veja aqui
| Propriedade | Tipo | Descrição |
|---|---|---|
titleTemplate | corda | Permite que você defina um modelo de título padrão que será adicionado ao seu título Mais informações |
title | corda | Defina o meta título da página |
defaultTitle | corda | Se nenhum título for definido em uma página, esta string será usada em vez de um titleTemplate vazio Mais informações |
noindex | booleano (padrão falso) | Define se a página deve ser indexada ou não Mais informações |
nofollow | booleano (padrão falso) | Define se a página deve ser seguida ou não Mais informações |
robotsProps | Objeto | Defina mais meta informações para o X-Robots-Tag Mais informações |
description | corda | Defina a meta descrição da página |
canonical | corda | Defina o URL canônico da página |
mobileAlternate.media | corda | Defina de qual tamanho de tela o site para celular deve ser veiculado |
mobileAlternate.href | corda | Defina o URL alternativo da página para celular |
languageAlternates | variedade | Defina o idioma dos URLs alternativos. Espera uma matriz de objetos com a forma: { hrefLang: string, href: string } |
themeColor | corda | Indica uma sugestão de cor que os agentes do usuário devem usar para personalizar a exibição da página ou da interface do usuário ao redor. Deve conter uma cor CSS válida |
additionalMetaTags | variedade | Permite adicionar uma meta tag que não está documentada aqui. Mais informações |
additionalLinkTags | variedade | Permite adicionar uma tag de link que não está documentada aqui. Mais informações |
twitter.cardType | corda | O tipo de cartão, que será summary , summary_large_image , app ou player |
twitter.site | corda | @username para o site usado no rodapé do cartão |
twitter.handle | corda | @username para o criador/autor do conteúdo (saída como twitter:creator ) |
facebook.appId | corda | Usado para Facebook Insights, você deve adicionar um ID de aplicativo do Facebook à sua página para obter mais informações |
openGraph.url | corda | A URL canônica do seu objeto que será usada como ID permanente no gráfico |
openGraph.type | corda | O tipo do seu objeto. Dependendo do tipo especificado, outras propriedades também podem ser necessárias. Mais informações |
openGraph.title | corda | O título do gráfico aberto pode ser diferente do seu meta título. |
openGraph.description | corda | A descrição do gráfico aberto pode ser diferente da sua meta descrição. |
openGraph.images | variedade | Um conjunto de imagens (objetos) a serem usadas por plataformas de mídia social, Slack, etc., como visualização. Se vários forem fornecidos, você poderá escolher um ao compartilhar. Veja exemplos |
openGraph.videos | variedade | Uma variedade de vídeos (objeto) |
openGraph.locale | corda | O local em que as tags do gráfico aberto são marcadas. Do formato idioma_TERRITORY. O padrão é en_US. |
openGraph.siteName | corda | Se o seu objeto fizer parte de um site maior, o nome que deverá ser exibido para o site geral. |
openGraph.profile.firstName | corda | Primeiro nome da pessoa. |
openGraph.profile.lastName | corda | Sobrenome da pessoa. |
openGraph.profile.username | corda | Nome de usuário da pessoa. |
openGraph.profile.gender | corda | Gênero da pessoa. |
openGraph.book.authors | corda[] | Escritores do artigo. Veja exemplos |
openGraph.book.isbn | corda | O ISBN |
openGraph.book.releaseDate | datahora | A data em que o livro foi lançado. |
openGraph.book.tags | corda[] | Marque palavras associadas a este livro. |
openGraph.article.publishedTime | datahora | Quando o artigo foi publicado pela primeira vez. Veja exemplos |
openGraph.article.modifiedTime | datahora | Quando o artigo foi alterado pela última vez. |
openGraph.article.expirationTime | datahora | Quando o artigo estiver desatualizado depois. |
openGraph.article.authors | corda[] | Escritores do artigo. |
openGraph.article.section | corda | Um nome de seção de alto nível. Por exemplo, tecnologia |
openGraph.article.tags | corda[] | Tag palavras associadas a este artigo. |
Substitui %s pela sua string de título
title = 'This is my title' ;
titleTemplate = 'Next SEO | %s' ;
// outputs: Next SEO | This is my title title = 'This is my title' ;
titleTemplate = '%s | Next SEO' ;
// outputs: This is my title | Next SEO title = undefined ;
titleTemplate = 'Next SEO | %s' ;
defaultTitle = 'Next SEO' ;
// outputs: Next SEO Definir isso como true definirá noindex,follow (para definir nofollow , consulte nofollow ). Isso funciona página por página. Esta propriedade funciona em conjunto com a propriedade nofollow e juntas preenchem a meta tag robots .
Nota: As propriedades noindex e nofollow são um pouco diferentes de todas as outras, no sentido de que defini-las como padrão não funciona conforme o esperado. Isso se deve ao fato do Next SEO já ter como padrão index,follow porque afinal next-seo é um plugin de SEO. Portanto, se você deseja globalmente essas propriedades, consulte perigosamenteSetAllPagesToNoIndex e perigosamenteSetAllPagesToNoFollow.
Exemplo Sem índice em uma única página:
Se você tiver uma única página que não deseja indexar, poderá fazer isso:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo noindex = { true } / >
< p > This page is no indexed < / p >
< / >
) ;
export default Page ;
/*
<meta name="robots" content="noindex,follow">
*/ Ele tem o prefixo dangerously porque noindex todas as páginas. Como este é um plugin de SEO, essa é uma ação meio perigosa. Não é ruim usar isso. Apenas certifique-se de que deseja noindex TODAS as páginas. Você ainda pode substituir isso no nível da página se tiver um caso de uso para index uma página. Isso pode ser feito definindo noindex: false .
A única maneira de desativar isso é removendo o suporte do DefaultSeo em seu <App> personalizado.
Definir isso como true definirá index,nofollow (para definir noindex , consulte noindex ). Isso funciona página por página. Esta propriedade funciona em conjunto com a propriedade noindex e, juntas, preenchem a meta tag robots .
Nota: Ao contrário das outras propriedades, definir noindex e nofollow por padrão não funciona conforme o esperado. Isso ocorre porque Next SEO tem como padrão index,follow , já que next-seo é, afinal, um plugin de SEO. Se você deseja permitir globalmente essas propriedades, consulte perigosamenteSetAllPagesToNoIndex e perigosamenteSetAllPagesToNoFollow.
Exemplo Não Seguir em uma única página:
Se você tiver uma única página que não deseja indexar, poderá fazer isso:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo nofollow = { true } / >
< p > This page is not followed < / p >
< / >
) ;
export default Page ;
/*
<meta name="robots" content="index,nofollow">
*/ Tem o prefixo dangerously porque nofollow todas as páginas. Como este é um plugin de SEO, essa é uma ação meio perigosa. Não é ruim usar isso. Apenas certifique-se de que deseja nofollow TODAS as páginas. Você ainda pode substituir isso no nível da página se tiver um caso de uso para follow uma página. Isso pode ser feito definindo nofollow: false .
A única maneira de desativar isso é removendo o suporte do DefaultSeo em seu <App> personalizado.
noindex | nofollow | meta conteúdo de robots |
|---|---|---|
| -- | -- | index,follow (padrão) |
| falso | falso | index,follow |
| verdadeiro | -- | noindex,follow |
| verdadeiro | falso | noindex,follow |
| -- | verdadeiro | index,nofollow |
| falso | verdadeiro | index,nofollow |
| verdadeiro | verdadeiro | noindex,nofollow |
Além do index, follow a meta tag robots que aceita mais propriedades para arquivar um rastreamento mais preciso e servir snippets melhores para bots de SEO que rastreiam sua página.
Exemplo:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo
robotsProps = { {
nosnippet : true ,
notranslate : true ,
noimageindex : true ,
noarchive : true ,
maxSnippet : - 1 ,
maxImagePreview : 'none' ,
maxVideoPreview : - 1 ,
} }
/ >
< p > Additional robots props in Next-SEO!! < / p >
< / >
) ;
export default Page ;
/*
<meta name="robots" content="index,follow,nosnippet,max-snippet:-1,max-image-preview:none,noarchive,noimageindex,max-video-preview:-1,notranslate">
*/Propriedades disponíveis
| Propriedade | Tipo | Descrição |
|---|---|---|
noarchive | booleano | Não mostre um link em cache nos resultados da pesquisa. |
nosnippet | booleano | Não mostre um snippet de texto ou uma visualização de vídeo nos resultados da pesquisa desta página. |
max-snippet | número | Use no máximo [número] caracteres como snippet de texto para este resultado de pesquisa. Leia mais |
max-image-preview | 'nenhum','padrão','grande' | Defina o tamanho máximo de uma visualização de imagem para esta página nos resultados da pesquisa. |
max-video-preview | número | Use no máximo [número] segundos como snippet de vídeo para vídeos nesta página nos resultados de pesquisa. Leia mais |
notranslate | booleano | Não ofereça tradução desta página nos resultados de pesquisa. |
noimageindex | booleano | Não indexe imagens nesta página. |
unavailable_after | corda | Não mostre esta página nos resultados da pesquisa após a data/hora especificada. A data/hora deve ser especificada em um formato amplamente adotado, incluindo, entre outros, RFC 822, RFC 850 e ISO 8601. |
Para obter mais referências sobre o X-Robots-Tag visite Central de Pesquisa do Google - Controle de rastreamento e indexação
O Twitter lerá as tags og:title , og:image e og:description para seu cartão, é por isso que next-seo omite twitter:title , twitter:image e twitter:description para não duplicar.
Algumas ferramentas podem relatar isso como um erro. Veja a edição nº 14
facebook = { {
appId : '1234567890' ,
} }Adicione isso à sua configuração de SEO para incluir a meta fb:app_id se precisar ativar os insights do Facebook para o seu site. Informações sobre isso podem ser encontradas na documentação do Facebook
Adicione isso página por página quando quiser consolidar URLs duplicados.
canonical = 'https://www.canonical.ie/' ; Esta relação de link é usada para indicar uma relação entre um site para desktop e um site móvel para os mecanismos de pesquisa.
Exemplo:
mobileAlternate = { {
media : 'only screen and (max-width: 640px)' ,
href : 'https://m.canonical.ie' ,
} } languageAlternates = { [ {
hrefLang : 'de-AT' ,
href : 'https://www.canonical.ie/de' ,
} ] } Isso permite que você adicione quaisquer outras meta tags que não são abordadas na config e devem ser usadas em vez da propriedade children .
content é necessário. Em seguida, name , property ou httpEquiv . (Apenas um de cada)
Exemplo:
additionalMetaTags = { [ {
property : 'dc:creator' ,
content : 'Jane Doe'
} , {
name : 'application-name' ,
content : 'NextSeo'
} , {
httpEquiv : 'x-ua-compatible' ,
content : 'IE=edge; chrome=1'
} ] }Exemplos inválidos:
Eles são inválidos porque contêm mais de um name , property e httpEquiv na mesma entrada.
additionalMetaTags = { [ {
property : 'dc:creator' ,
name : 'dc:creator' ,
content : 'Jane Doe'
} , {
property : 'application-name' ,
httpEquiv : 'application-name' ,
content : 'NextSeo'
} ] } Uma coisa a observar sobre isso é que atualmente ele suporta apenas tags exclusivas, a menos que você use a propriedade keyOverride para fornecer uma chave exclusiva para cada meta tag adicional.
O comportamento padrão (sem uma propriedade keyOverride ) é renderizar uma tag por name / property / httpEquiv exclusivo. O último definido será renderizado.
Por exemplo, se você passar 2 tags com a mesma property :
additionalMetaTags = { [ {
property : 'dc:creator' ,
content : 'Joe Bloggs'
} , {
property : 'dc:creator' ,
content : 'Jane Doe'
} ] }isso resultará na renderização:
< meta property =" dc:creator " content =" Jane Doe " /> Fornecendo uma propriedade keyOverride adicional como esta:
additionalMetaTags = { [ {
property : 'dc:creator' ,
content : 'Joe Bloggs' ,
keyOverride : 'creator1' ,
} , {
property : 'dc:creator' ,
content : 'Jane Doe' ,
keyOverride : 'creator2' ,
} ] }resulta na renderização do HTML correto:
< meta property =" dc:creator " content =" Joe Bloggs " />
< meta property =" dc:creator " content =" Jane Doe " /> Isso permite que você adicione quaisquer outras tags de link que não sejam abordadas na config .
rel e href são obrigatórios.
Exemplo:
additionalLinkTags = { [
{
rel : 'icon' ,
href : 'https://www.test.ie/favicon.ico' ,
} ,
{
rel : 'apple-touch-icon' ,
href : 'https://www.test.ie/touch-icon-ipad.jpg' ,
sizes : '76x76'
} ,
{
rel : 'manifest' ,
href : '/manifest.json'
} ,
{
rel : 'preload' ,
href : 'https://www.test.ie/font/sample-font.woof2' ,
as : 'font' ,
type : 'font/woff2' ,
crossOrigin : 'anonymous'
}
] }isso resultará na renderização:
< link rel =" icon " href =" https://www.test.ie/favicon.ico " />
< link
rel =" apple-touch-icon "
href =" https://www.test.ie/touch-icon-ipad.jpg "
sizes =" 76x76 "
/>
< link rel =" manifest " href =" /manifest.json " />
< link
rel =" preload "
href =" https://www.test.ie/font/sample-font.woof2 "
as =" font "
type =" font/woff2 "
crossorigin =" anonymous "
/>Para obter as especificações completas, verifique http://ogp.me/
Próximo SEO atualmente suporta:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo
openGraph = { {
type : 'website' ,
url : 'https://www.example.com/page' ,
title : 'Open Graph Title' ,
description : 'Open Graph Description' ,
images : [
{
url : 'https://www.example.ie/og-image.jpg' ,
width : 800 ,
height : 600 ,
alt : 'Og Image Alt' ,
} ,
{
url : 'https://www.example.ie/og-image-2.jpg' ,
width : 800 ,
height : 600 ,
alt : 'Og Image Alt 2' ,
} ,
] ,
} }
/ >
< p > Basic < / p >
