next head seo Download - ดาวน์โหลดซอร์สโค้ด next head seo

หน้าหน้า

ปลั๊กอิน SEO ที่เรียบง่ายและเบาสำหรับแอปพลิเคชัน Next.js

⚡ <1kb gzipped
ศูนย์การพึ่งพา
✍ออกแบบตามแนวทางของ Google Webmaster
- การสนับสนุน TypeScript

แม้ว่า 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`

ตัวเลือกแรกคือการวาง <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} /> เนื่องจากหัวต่อไปจะเคารพค่าหลังสำหรับชื่อคุณสมบัติเดียวกัน

สร้างส่วนประกอบ wrapper สำหรับหัวต่อไป

อีกทางเลือกหนึ่งเพียงสร้างส่วนประกอบ wrapper ซึ่งสามารถใช้กับแต่ละส่วนประกอบของหน้า นี่เป็นวิธีที่ยืดหยุ่นและเชื่อถือได้มากขึ้นในการตั้งค่าเริ่มต้น

นี่คือตัวอย่างขององค์ประกอบ 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" ,
      } }
    />
  ) ;
} ;

จากนั้นวาง <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.site	ชื่อผู้ใช้ Twitter เริ่มต้นด้วย `@`	สาย
og.title	สำหรับ OG: ชื่อ ใช้ค่า `title` โดยอัตโนมัติหากว่างเปล่า ดูรายละเอียด: Open Graph Protocol	สาย
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>