next head seo Download - Nächster next head seo Source Code Download

Nächstkopf-Seo

Ein einfaches und leichtes SEO-Plugin für Next.js-Anwendungen.

⚡️ <1kb gziped
Null Abhängigkeiten
✍️, die basierend auf Google Webmaster -Richtlinien entwickelt wurden
? Unterstützung von Typenkript

Obwohl next-head-seo nur wesentliche SEO-Immobilien unterstützt, reichen dies für die meisten Websites aus.

Wenn Sie erweiterte SEO-Einstellungen wie strukturierte Daten benötigen, verwenden Sie stattdessen die nächste Seo.

Installieren

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

Verwendung

Importieren Sie in jeder Seitenkomponente next-head-seo und fügen Sie die gewünschten Eigenschaften hinzu.

Beispiel:

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

Standard -SEO -Einstellungen

Es gibt 2 Optionen zum Konfigurieren von Standard -SEO -Richtigkeiten.

Standardeinstellung `<NextHeadSeo />` auf `_app.tsx`

Die erste Option besteht darin, <NextHeadSeo /> mit Standardwerten auf _app.tsx zu platzieren.

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

Stellen Sie sicher, dass <NextHeadSeo /> vor <Component {...pageProps} /> platziert ist, da der SEO-SEO des nächsten Kopfes den letzteren Wert für denselben Eigenschaftsnamen respektiert.

Erstellen Sie die Wrapper-Komponente für den nächsten Kopf-Kopf

Erstellen Sie alternativ einfach eine Wrapper -Komponente, die für jede Seitenkomponente verwendet werden kann. Dies ist flexibler und zuverlässiger, um Standardwerte festzulegen.

Hier ist ein Beispiel für Wrapper -Komponente:

 // 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" ,
      } }
    />
  ) ;
} ;

Platzieren Sie dann <MyPageSeo /> in jede Seitenkomponente.

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

Optionen

Alle Requisiten für next-head-seo sind optional.

Stütze	Beschreibung	Typ
Titel	✅ empfohlen auf alle Seiten. Seitentitel.	Saite
kanonisch	✅ empfohlen auf alle Seiten. Kanonische URL der Seite.	Saite
Roboter	Setzen Sie `noindex, nofollow` nur dann, wenn Sie nicht möchten, dass die Seite in Suchmaschinen indiziert wird. Andernfalls müssen Sie diese Requisite nicht verwenden.	`"noindex, nofollow"` `"index, follow"` `"noindex"` `"nofollow"`
Beschreibung	✅ empfohlen auf alle Seiten. Seitenbeschreibung. Der Text nach 150 Zeichen wird wie Google abgeschnitten.	Saite
Twitter.Card	Twitter -Karten -Bildtyp. Setzen Sie zusammen mit `og:image` . Siehe Detail: Twitter -Karten	`"summary"` `"summary_large_image"` `"player"` `"app"`
Twitter.site	Twitter -Benutzername beginnend mit `@`	Saite
Og.title	Für OG: Titel. Verwenden Sie automatisch `title` , wenn es leer ist. Siehe Detail: Öffnen Sie das Diagrammprotokoll	Saite
Og.Description	Für OG: Beschreibung. Verwenden Sie automatisch `description` , wenn es leer ist.	Saite
og.url	Für OG: URL. Verwenden Sie `canonical` Wert automatisch, wenn es leer ist.	Saite
Og.image	Für OG: Bild. Setzen Sie Bild -URL.	Saite
og.type	Für OG: Typ.	`"article"` `"book"` `"website"` `"profile"`
Og.Sitename	Für OG: Site_NAME	Saite
CustomMetatags	Array von Objekt für benutzerdefinierte Meta -Tags. Siehe Abschnitt CustomMetatags.	Eine Reihe von Objekten
CustomLinktags	Array von Objekt für benutzerdefinierte Link -Tags. Siehe Abschnitt CustomLinktags.	Eine Reihe von Objekten

Benutzerdefinierte Meta -Tags

Sie können zusätzliche Meta -Tags festlegen. Beispiel:

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

Wenn Sie benutzerdefinierte Meta -Tags von einer anderen Seitenkomponente überschreiben möchten, verwenden Sie die gleichen Schlüssel für beide Komponenten.

Beispiel:

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

Benutzerdefinierte Link -Tags

Sie können zusätzliche Link -Tags festlegen. Beispiel:

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

Wenn Sie benutzerdefinierte Link -Tags von einer anderen Seitenkomponente überschreiben möchten, verwenden Sie die gleichen Schlüssel für beide Komponenten. Beispiel:

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