next head seo下載 - next head seo源代碼下載

下一步的詩

Next.js應用程序的簡單且輕巧的SEO插件。

⚡️<1kb gzpipped
零依賴性
基於Google網站管理員指南設計的✍️
？打字稿支持

儘管next-head-seo僅支持必需的SEO屬性，但對於大多數網站來說，這是足夠的。

如果您需要高級SEO設置，例如結構化數據，請改用Next-Seo。

安裝

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

用法

在每個頁面組件上導入next-head-seo ，並添加所需的屬性。

例子：

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

默認的SEO設置

有2個選項可以配置默認的SEO工作。

默認`<NextHeadSeo />`在`_app.tsx`上

第一個選項是在_app.tsx上使用默認值放置<NextHeadSeo /> 。

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

確保將<NextHeadSeo />放置在<Component {...pageProps} />之前，因為下一個seo尊重同一屬性名稱的後一個值。

為下一個seo創建包裝組件

另外，只需創建一個可以在每個頁面組件上使用的包裝組件即可。這是設置默認值的更靈活和可靠的方法。

這是包裝組件的示例：

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

然後，將<MyPageSeo />放入每個頁面組件中。

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

選項

所有next-head-seo的道具都是可選的。

支柱	描述	類型
標題	✅建議在所有頁面上設置。頁面標題。	細繩
典範	✅建議在所有頁面上設置。頁面的規範URL。	細繩
機器人	僅當您不希望在搜索引擎上索引頁面時，設置`noindex, nofollow` 。否則，您不必使用此道具。	`"noindex, nofollow"` `"index, follow"` `"noindex"` `"nofollow"`
描述	✅建議在所有頁面上設置。頁面描述。 150個字符後的文字將像Google一樣被截斷。	細繩
Twitter.Card	Twitter卡圖像類型。與`og:image`道具。請參閱詳細信息：Twitter卡	`"summary"` `"summary_large_image"` `"player"` `"app"`
Twitter.Lot	Twitter用戶名從`@`開始	細繩
og.title	對於OG：標題。如果空白，則會自動使用`title`值。請參閱詳細信息：打開圖協議	細繩
OG.Description	用於OG：描述。如果空白，則自動使用`description`值。	細繩
og.url	用於OG：URL。如果空白，則會自動使用`canonical`值。	細繩
og.image	用於OG：圖像。設置圖像URL。	細繩
og.type	對於OG：類型。	`"article"` `"book"` `"website"` `"profile"`
OG.SiteName	for og：site_name	細繩
Customtatags	自定義元標記的對像數組。請參閱Customtatags部分。	一系列對象
CustomLinkTags	自定義鏈接標籤的對像數組。請參閱CustomLinkTags部分。	一系列對象

自定義元標記

您可以設置其他元標記。例子：

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

如果要從另一個頁面組件中覆蓋自定義元標記，請為兩個組件使用相同的鍵。

例子：

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

自定義鏈接標籤

您可以設置其他鏈接標籤。例子：

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

如果要從另一個頁面組件中覆蓋自定義鏈接標籤，請為兩個組件使用相同的鍵。例子：

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