Download next head seo - next head seo

Próxima cabeça-seo

Um plug-in de SEO simples e leve para os aplicativos Next.JS.

⚡️ <1kb gzipped
Zero dependências
✍️ Projetado com base nas diretrizes do Google Webmasters
? Suporte TypeScript

Embora next-head-seo apoie apenas propriedades essenciais de SEO, seria suficiente para a maioria dos sites.

Se você precisar de configurações avançadas de SEO, como dados estruturados, use o próximo-seo.

Instalar

$ npm install next-head-seo
# or with yarn
$ yarn add next-head-seo

Uso

Importe next-head-seo em cada componente de página e adicione as propriedades desejadas.

Exemplo:

 // pages/example.tsx
import NextHeadSeo from 'next-head-seo' ;

const Page = ( ) => (
  < >
    < h1 > Hello! </ h1 >
    < NextHeadSeo
      title = "Hello!"
      description = "Some description"
      canonical = "https://example.com/hello"
      og = { {
        title : "Open graph title" ,
        image : "https://example.com/og.png" ,
      } }
    />
  </ >
) ;

export default Page

// Output:
// <head>
//   <title>Hello!</title>
//   <meta name="description" content="Some description" />
//   <link rel="canonical" href="https://example.com/hello"/>
//   <meta property="og:title" content="Open graph title"/>
//   <meta property="og:image" content="https://example.com/og.png"/>
// </head>

Configurações de SEO padrão

Existem 2 opções para configurar os adequados de SEO padrão.

Coloque o padrão `<NextHeadSeo />` em `_app.tsx`

A primeira opção é colocar <NextHeadSeo /> com valores padrão em _app.tsx .

 // pages/_app.tsx
import type { AppProps } from 'next/app'
import NextHeadSeo from 'next-head-seo' ;

function MyApp ( { Component , pageProps } : AppProps ) {
  return (
    < >
      { /* Default SEO configuration */ }
      < NextHeadSeo
        og = { {
          image : "https://example.com/default-og.png" ,
          type : 'article' ,
          siteName : 'Your app name' ,
        } }
        twitter = { {
          card : "summary"
        } }
      />
      { /* Place <Component /> after <NextHeadSeo /> */ }
      < Component { ... pageProps } />
    </ >
  ) ;
}

export default MyApp

Verifique se <NextHeadSeo /> está colocado antes de <Component {...pageProps} /> já que a próxima cabeça-seo respeita o último valor para o mesmo nome de propriedade.

Crie componente de wrapper para a próxima cabeça-seo

Como alternativa, basta criar um componente de wrapper que pode ser usado em cada componente de página. Essa é uma maneira mais flexível e confiável de definir valores padrão.

Aqui está um exemplo de componente de wrapper:

 // components/MyPageSeo.tsx
import NextHeadSeo from 'next-head-seo' ;

// types
export type MyPageSeoProps = {
  path : string ;
  title ?: string ;
  description ?: string ;
  ogImagePath ?: string ;
  noindex ?: boolean ;
  noTitleTemplate ?: boolean ;
} ;

export const MyPageSeo : React . FC < MyPageSeoProps > = ( props ) => {
  const {
    path ,
    title = "Default title" ,
    description = "Default description" ,
    ogImagePath = "/default-og.png" ,
    noindex ,
    noTitleTemplate ,
  } = props ;

  // Set APP_ROOT_URL on enviroment variables
  // e.g. APP_ROOT_URL=https://example.com
  // https://nextjs.org/docs/basic-features/environment-variables
  const APP_ROOT_URL = process . env . NEXT_PUBLIC_APP_ROOT_URL ;

  // Absolute page url
  const pageUrl = APP_ROOT_URL + path
  // Absolute og image url
  const ogImageUrl = APP_ROOT_URL + ogImagePath

  return (
    < NextHeadSeo
      title = { noTitleTemplate ? title : ` ${ title } - MyAppName` }
      canonical = { pageUrl }
      description = { description }
      robots = { noindex ? 'noindex, nofollow' : undefined }
      og = { {
        title ,
        description ,
        url : pageUrl ,
        image : ogImageUrl ,
        type : 'article' ,
        siteName : 'MyAppName' ,
      } }
      twitter = { {
        card : "summary_large_image" ,
      } }
    />
  ) ;
} ;

Em seguida, coloque <MyPageSeo /> em cada componente de página.

 // pages/example.tsx
import { MyPageSeo } from "../components/MyPageSeo"

const Page = ( ) => (
  < >
    < h1 > Hello! </ h1 >
    < MyPageSeo
      path = "/example"
      title = "Hello!"
      noindex = { true }
    />
  </ >
) ;
export default Page

// Output:
// <head>
//   <title>Hello! - MyAppName</title>
//   <meta name="robots" content="noindex, nofollow"/>
//   <meta name="description" content="Default description" />
//   <link rel="canonical" href="https://example.com/example"/>
//   <meta property="og:url" content="https://example.com/example"/>
//   <meta property="og:title" content="Hello!"/>
//   <meta property="og:description" content="Default description"/>
//   <meta property="og:image" content="https://example.com//default-og.png"/>
//   <meta property="og:type" content="article"/>
//   <meta property="og:site_name" content="MyAppName"/>
//   <meta name="twitter:card" content="summary_large_image"/>
// </head>

Opções

Todos os adereços para next-head-seo são opcionais.

Prop	Descrição	Tipo
título	✅ Recomendado para definir em todas as páginas. Título da página.	corda
canônico	✅ Recomendado para definir em todas as páginas. URL canônico da página.	corda
robôs	Defina `noindex, nofollow` apenas quando você não deseja que a página seja indexada nos mecanismos de pesquisa. Caso contrário, você não precisa usar este suporte.	`"noindex, nofollow"` `"index, follow"` `"noindex"` `"nofollow"`
descrição	✅ Recomendado para definir em todas as páginas. Descrição da página. O texto após 150 caracteres será truncado como o Google.	corda
twitter.card	Twitter Card Type. Defina junto com `og:image` Prop. Veja detalhes: cartões do Twitter	`"summary"` `"summary_large_image"` `"player"` `"app"`
Twitter.site	Nome de usuário do Twitter começando com `@`	corda
og.title	Para OG: Título. Use automaticamente o valor `title` se em branco. Veja Detalhes: Abrir protocolo de gráfico	corda
OG.Description	Para OG: Descrição. Use automaticamente o valor `description` se em branco.	corda
OG.url	Para OG: URL. Use automaticamente o valor `canonical` se em branco.	corda
OG.IMAGE	Para OG: Image. Defina o URL da imagem.	corda
OG.TYPE	Para OG: Tipo.	`"article"` `"book"` `"website"` `"profile"`
OG.sitename	Para OG: site_name	corda
custommetatags	Matriz de objeto para metatags personalizadas. Consulte a seção CustomMetatags.	Uma variedade de objetos
CustomLinkTags	Matriz de objeto para tags de link personalizadas. Consulte a seção CustomLinktags.	Uma variedade de objetos

Tags de meta personalizadas

Você pode definir meta tags adicionais. Exemplo:

 < NextHeadSeo
  customMetaTags = { [
    {
      name : 'foo' ,
      content : 'foo-content'
    } ,
    {
      property : 'bar' ,
      content : 'bar-content'
    }
  ] }
/>
// Output:
// <head>
//   <meta name="foo" content="foo-content"/>
//   <meta name="bar" content="bar-content"/>
// </head>

Se você deseja substituir as tags de meta personalizadas de outro componente de página, use as mesmas teclas para ambos os componentes.

Exemplo:

 // in /pages/_app.tsx
< NextHeadSeo
  customMetaTags = { [
    {
      key : "custom-meta" ,
      name : 'foo' ,
      content : 'foo-content'
    }
  ] }
/>

// in /pages/example.tsx
< NextHeadSeo
  customMetaTags = { [
    {
      key : "custom-meta" ,
      name : 'bar' ,
      content : 'bar-content'
    }
  ] }
/ >

// Output:
// <head>
//   <meta name="bar" content="bar-content"/>
// </head>

Tags de link personalizadas

Você pode definir tags de link adicionais. Exemplo:

 < NextHeadSeo
  customLinkTags = { [
    {
      rel : 'foo' ,
      href : 'https://example.com/foo'
    } ,
     {
      rel : 'bar' ,
      type : 'bar-type' ,
      href : 'https://example.com/bar'
    } ,
  ] }
/>
// Output:
// <head>
//   <link rel="foo" content="https://example.com/foo"/>
//   <link rel="bar" type="bar-type" content="https://example.com/bar"/>
// </head>

Se você deseja substituir as tags de link personalizadas de outro componente de página, use as mesmas teclas para ambos os componentes. Exemplo:

 // in /pages/_app.tsx
< NextHeadSeo
  customLinkTags = { [
    {
      key : "custom-link" ,
      rel : 'foo' ,
      content : 'https://example.com/foo'
    }
  ] }
/>

// in /pages/example.tsx
< NextHeadSeo
  customLinkTags = { [
    {
      key : "custom-link" ,
      rel : 'bar' ,
      type : 'bar-type' ,
      ccontent : 'https://example.com/bar'
    }
  ] }
/ >

// Output:
// <head>
//   <link rel="bar" type="bar-type" content="https://example.com/bar"/>
// </head>