next head seoダウンロード - next head seoソースコードのダウンロード

Next-Head-Seo

next.jsアプリケーション用のシンプルで軽量のSEOプラグイン。

⚡⚡️<1kb gzipt
ゼロ依存関係
Google Webmasterガイドラインに基づいて設計されています
？タイプスクリプトサポート

next-head-seo重要なSEOプロパティのみをサポートしていますが、ほとんどのWebサイトでは十分です。

構造化データなどの高度な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設定

デフォルトのSEO EPERIESを構成する2つのオプションがあります。

`_app.tsx`にデフォルト`<NextHeadSeo />`を配置します

最初のオプションは<NextHeadSeo /> _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

<NextHeadSeo />が<Component {...pageProps} />の前に配置されていることを確認してください。なぜなら、次元SEOは同じプロパティ名の後者の値を尊重するためです。

Next-Head-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のすべての小道具はオプションです。

小道具	説明	タイプ
タイトル	fallすべてのページに設定することをお勧めします。ページタイトル。	弦
正規	fallすべてのページに設定することをお勧めします。ページの標準URL。	弦
ロボット	`noindex, nofollow`設定します。検索エンジンでページをインデックスを作成したくない場合にのみ。それ以外の場合は、この小道具を使用する必要はありません。	`"noindex, nofollow"` `"index, follow"` `"noindex"` `"nofollow"`
説明	fallすべてのページに設定することをお勧めします。ページの説明。 150文字の後のテキストは、Googleのように切り捨てられます。	弦
twitter.card	Twitterカードの画像タイプ。 `og:image`小道具。詳細を参照：Twitterカード	`"summary"` `"summary_large_image"` `"player"` `"app"`
twitter.site	`@`で始まる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	OGの場合：site_name	弦
custommetatags	カスタムメタタグのオブジェクトの配列。 CustomMetatagsセクションを参照してください。	オブジェクトの配列
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>