Téléchargement next head seo - Téléchargement du code source next head seo

prochain sel-seo

Un plugin de référencement simple et léger pour les applications Next.js.

⚡️ <1kb gzipipped
Zéro dépendances
✍️ conçu sur la base des directives de Google webmaster
? Support dactylographié

Bien que next-head-seo ne prenne en charge uniquement les propriétés SEO essentielles, cela serait suffisant pour la plupart des sites Web.

Si vous avez besoin de paramètres de référencement avancés tels que des données structurées, utilisez à la place le prochain Seo.

Installer

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

Usage

Importez next-head-seo sur chaque composant de page et ajoutez les propriétés souhaitées.

Exemple:

 // 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>

Paramètres SEO par défaut

Il existe 2 options pour configurer les correries SEO par défaut.

Placer par défaut `<NextHeadSeo />` sur `_app.tsx`

La première option consiste à placer <NextHeadSeo /> avec des valeurs par défaut sur _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

Assurez-vous que <NextHeadSeo /> est placé avant <Component {...pageProps} /> puisque le prochain-head-seo respecte cette dernière valeur pour le même nom de propriété.

Créer un composant wrapper pour le prochain Seo-Seo

Alternativement, créez simplement un composant wrapper qui peut être utilisé sur chaque composant de page. C'est un moyen plus flexible et fiable de définir des valeurs par défaut.

Voici un exemple de composant 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" ,
      } }
    />
  ) ;
} ;

Ensuite, placez <MyPageSeo /> dans chaque composant de page.

 // 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>

Options

Tous les accessoires pour next-head-seo sont facultatifs.

Soutenir	Description	Taper
titre	✅ Recommandé de définir toutes les pages. Titre de la page.	chaîne
canonique	✅ Recommandé de définir toutes les pages. URL canonique de la page.	chaîne
robots	Définissez `noindex, nofollow` uniquement lorsque vous ne voulez pas que la page soit indexée sur les moteurs de recherche. Sinon, vous n'avez pas à utiliser cet accessoire.	`"noindex, nofollow"` `"index, follow"` `"noindex"` `"nofollow"`
description	✅ Recommandé de définir toutes les pages. Description de la page. Le texte après 150 caractères sera tronqué comme Google.	chaîne
twitter.card	Type d'image de la carte Twitter. Définir avec `og:image` Prop. Voir détail: cartes Twitter	`"summary"` `"summary_large_image"` `"player"` `"app"`
Twitter.Site	Nom d'utilisateur Twitter en commençant par `@`	chaîne
og.title	Pour OG: titre. Utilisez automatiquement la valeur `title` si vide. Voir détail: Open Graph Protocol	chaîne
OG.Description	Pour OG: Description. Utilisez automatiquement la valeur `description` si vide.	chaîne
og.url	Pour OG: URL. Utilisez automatiquement la valeur `canonical` si vide.	chaîne
og.image	Pour OG: image. Définir l'URL de l'image.	chaîne
Type OG	Pour OG: Type.	`"article"` `"book"` `"website"` `"profile"`
og.SiteName	Pour OG: Site_name	chaîne
custommetatags	Tableau d'objet pour les balises de méta personnalisées. Voir la section Custommetatags.	Un tableau d'objets
coutumeshlinktags	Tableau d'objet pour les balises de liaison personnalisées. Voir la section CustomLinkTags.	Un tableau d'objets

Tags de méta personnalisés

Vous pouvez définir des balises Meta supplémentaires. Exemple:

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

Si vous souhaitez remplacer les balises de méta personnalisées à partir d'un autre composant de page, utilisez les mêmes touches pour les deux composants.

Exemple:

 // 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 liaison personnalisés

Vous pouvez définir des balises de liaison supplémentaires. Exemple:

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

Si vous souhaitez remplacer les balises de liaison personnalisées à partir d'un autre composant de page, utilisez les mêmes touches pour les deux composants. Exemple:

 // 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>