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>