หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

คุณเคยเห็นจดหมายข่าว Next.js ใหม่หรือไม่

แบนเนอร์ NextjsWeekly

เครื่องมือที่มีประโยชน์

  • dub เพิ่งเปิดตัวเครื่องมือสร้าง UTM ฟรีที่มีประโยชน์! คุณสามารถใช้มันได้ที่นี่

การทำ SEO ครั้งต่อไป

Next SEO เป็นปลั๊กอินที่ทำให้การจัดการ SEO ของคุณง่ายขึ้นในโครงการ Next.js

ยินดีรับคำขอดึง อย่าลืมตรวจสอบปัญหาสำหรับการร้องขอคุณสมบัติหากคุณกำลังมองหาแรงบันดาลใจในสิ่งที่ควรเพิ่ม

รู้สึกอยากสนับสนุนปลั๊กอินฟรีนี้หรือไม่?

ต้องใช้เวลามากในการดูแลโครงการโอเพ่นซอร์ส ดังนั้นการสนับสนุนเล็กๆ น้อยๆ จะได้รับการชื่นชมอย่างมาก

การเข้ารหัสเชื้อเพลิงกาแฟ ☕️

next-seo.wallet (ERC20 & SOL)

หมายเหตุเกี่ยวกับไดเรกทอรีแอป

หมายเหตุนี้เกี่ยวข้องเฉพาะในกรณีที่ใช้ไดเรกทอรี app

สำหรับข้อมูลเมตามาตรฐาน (เช่น <title>) ขอแนะนำอย่างยิ่งให้คุณใช้เมธอด generateMetaData ในตัว คุณสามารถตรวจสอบเอกสารได้ที่นี่

สำหรับ JSON-LD การเปลี่ยนแปลงที่จำเป็นเพียงอย่างเดียวคือเพิ่ม useAppDir={true} ให้กับคอมโพเนนต์ JSON-LD ที่ใช้งานอยู่ คุณควรเพิ่มการใช้ส่วนประกอบนี้ใน page.js ของคุณ ไม่ใช่ head.js ของคุณ 

 <ArticleJsonLd
  useAppDir={true}
  url="https://example.com/article"
  title="Article headline" <- required for app directory
  />

หากคุณใช้ไดเรกทอรี pages NextSeo คือ สิ่งที่คุณต้องการสำหรับความต้องการ SEO ของคุณอย่างแน่นอน !

สารบัญ

  • การใช้งาน
    • ตั้งค่า
    • เพิ่ม SEO ให้กับเพจ
    • การกำหนดค่า SEO เริ่มต้น
    • ตัวเลือกถัดไปSeo
      • เทมเพลตชื่อเรื่อง
      • ชื่อเริ่มต้น
      • ไม่มีดัชนี
      • SetAllPagesToNoIndex อย่างเป็นอันตราย
      • ไม่ติดตาม
      • เป็นอันตรายSetAllPagesToNoFollow
      • หุ่นยนต์อุปกรณ์ประกอบฉาก
      • ทวิตเตอร์
      • เฟสบุ๊ค
      • URL ตามรูปแบบบัญญัติ
      • สลับกัน
      • เมตาแท็กเพิ่มเติม
      • แท็กลิงก์เพิ่มเติม
  • เปิดกราฟ
    • เปิดตัวอย่างกราฟ
      • ขั้นพื้นฐาน
      • วีดีโอ
      • เสียง
      • บทความ
      • หนังสือ
      • ประวัติโดยย่อ
  • JSON-LD
    • การรักษาความปลอดภัย JSON-LD
    • การจัดการหลายกรณี
    • บทความ
    • เกล็ดขนมปัง
    • บล็อก
    • ที่ตั้งแคมป์
    • สูตรอาหาร
    • ช่องค้นหาไซต์ลิงก์
    • คอร์ส
    • ชุดข้อมูล
    • ติดต่อองค์กร
    • หน้าคำถามที่พบบ่อย
    • วิธี
    • ประกาศรับสมัครงาน
    • ธุรกิจท้องถิ่น
    • โลโก้
    • ผลิตภัณฑ์
    • โปรไฟล์โซเชียล
    • บทความข่าว
    • สวน
    • วีดีโอ
    • วีดีโอเกม
    • เหตุการณ์
    • ถามตอบ
    • หน้าคอลเลกชัน
    • หน้าโปรไฟล์
    • ม้าหมุน
      • ค่าเริ่มต้น (รายการสรุป)
      • คอร์ส
      • ภาพยนตร์
      • สูตรอาหาร
      • กำหนดเอง
    • แอพซอฟต์แวร์
    • องค์กร
    • ยี่ห้อ
    • หน้าเว็บ
    • ข้อมูลเมตาของรูปภาพ
  • ผู้ร่วมให้ข้อมูล

การใช้งาน

NextSeo ทำงานโดยรวมไว้ในหน้าเว็บที่คุณต้องการเพิ่มคุณลักษณะ SEO เมื่อรวมไว้ในเพจแล้ว คุณจะส่งผ่านออบเจ็กต์การกำหนดค่าพร้อมกับคุณสมบัติ SEO ของเพจ ซึ่งสามารถสร้างแบบไดนามิกได้ที่ระดับเพจ หรือในบางกรณี API ของคุณอาจส่งคืนออบเจ็กต์ SEO

ตั้งค่า

ขั้นแรก ให้ติดตั้ง: 

npm install next-seo

หรือ 

yarn add next-seo

เพิ่ม SEO ให้กับเพจ

ใช้ไดเร็กทอรีแอป Next.js ที่นำมาใช้ใน Next.js 13 หรือไม่

หากคุณใช้ไดเร็กทอรีแอป Next.js ขอแนะนำอย่างยิ่งให้คุณใช้เมธอด generateMetaData ในตัว คุณสามารถตรวจสอบเอกสารได้ที่นี่

หากคุณใช้ไดเร็กทอรี pages NextSeo คือสิ่งที่คุณต้องการสำหรับความต้องการ SEO ของคุณอย่างแน่นอน!

จากนั้นคุณจะต้องนำเข้า NextSeo และเพิ่มคุณสมบัติที่ต้องการ สิ่งนี้จะแสดงแท็กใน <head> สำหรับ SEO อย่างน้อยที่สุด คุณควรเพิ่มชื่อและคำอธิบาย

ตัวอย่างที่มีเพียงชื่อและคำอธิบาย: 

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo
      title = "Simple Usage Example"
      description = "A short description goes here."
    / >
    < p > Simple Usage < / p >
  < / >
) ;

export default Page ;

แต่ NextSeo ให้ตัวเลือกมากมายแก่คุณที่คุณสามารถเพิ่มได้ ดูด้านล่างสำหรับตัวอย่างทั่วไปของเพจ

ตัวอย่างหน้าทั่วไป: 

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo
      title = "Using More of Config"
      description = "This example uses more of the available config options."
      canonical = "https://www.canonical.ie/"
      openGraph = { {
        url : 'https://www.url.ie/a' ,
        title : 'Open Graph Title' ,
        description : 'Open Graph Description' ,
        images : [
          {
            url : 'https://www.example.ie/og-image-01.jpg' ,
            width : 800 ,
            height : 600 ,
            alt : 'Og Image Alt' ,
            type : 'image/jpeg' ,
          } ,
          {
            url : 'https://www.example.ie/og-image-02.jpg' ,
            width : 900 ,
            height : 800 ,
            alt : 'Og Image Alt Second' ,
            type : 'image/jpeg' ,
          } ,
          { url : 'https://www.example.ie/og-image-03.jpg' } ,
          { url : 'https://www.example.ie/og-image-04.jpg' } ,
        ] ,
        siteName : 'SiteName' ,
      } }
      twitter = { {
        handle : '@handle' ,
        site : '@site' ,
        cardType : 'summary_large_image' ,
      } }
    / >
    < p > SEO Added to Page < / p >
  < / >
) ;

export default Page ;

หมายเหตุเกี่ยวกับแท็ก Twitter

Props cardType , site , handle เทียบเท่ากับ twitter:card , twitter:site , twitter:creator สามารถดูเอกสารได้ที่นี่

Twitter จะอ่านแท็ og:title , og:image และ og:description สำหรับการ์ดของพวกเขา next-seo ละเว้น twitter:title , twitter:image และ twitter:description เพื่อหลีกเลี่ยงการทำซ้ำ

เครื่องมือบางอย่างอาจรายงานว่าสิ่งนี้เป็นข้อผิดพลาด ดูฉบับที่ #14

การกำหนดค่า SEO เริ่มต้น

NextSeo ช่วยให้คุณสามารถตั้งค่าคุณสมบัติ SEO เริ่มต้นบางส่วนที่จะปรากฏในทุกหน้าโดยไม่จำเป็นต้องใส่อะไรลงไป คุณยังสามารถแทนที่สิ่งเหล่านี้ได้ทีละหน้าหากจำเป็น

เพื่อให้บรรลุเป้าหมายนี้ คุณจะต้องสร้าง <App> ที่กำหนดเอง ในไดเรกทอรีหน้าของคุณ ให้สร้างไฟล์ใหม่ _app.js ดูเอกสาร Next.js ที่นี่ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ <App> ที่กำหนดเอง

ภายในไฟล์นี้คุณจะต้องนำเข้า DefaultSeo จาก next-seo และส่งผ่านอุปกรณ์ประกอบฉาก

นี่คือตัวอย่างทั่วไป: 

 import App , { Container } from 'next/app' ;
import { DefaultSeo } from 'next-seo' ;

// import your default seo configuration
import SEO from '../next-seo.config' ;

export default class MyApp extends App {
  render ( ) {
    const { Component , pageProps } = this . props ;
    return (
      < Container >
        < DefaultSeo
          openGraph = { {
            type : 'website' ,
            locale : 'en_IE' ,
            url : 'https://www.url.ie/' ,
            siteName : 'SiteName' ,
          } }
          twitter = { {
            handle : '@handle' ,
            site : '@site' ,
            cardType : 'summary_large_image' ,
          } }
        / >
        < Component { ... pageProps } / >
      < / Container >
    ) ;
  }
}

เพื่อให้ทำงานได้อย่างถูกต้อง ควรวาง DefaultSeo ไว้ด้านบน (ก่อน) Component เนื่องจากพฤติกรรมของ Next.js ภายใน

หรือคุณสามารถสร้างไฟล์กำหนดค่าเพื่อจัดเก็บค่าเริ่มต้น เช่น next-seo.config.js 

 export default {
  openGraph : {
    type : 'website' ,
    locale : 'en_IE' ,
    url : 'https://www.url.ie/' ,
    siteName : 'SiteName' ,
  } ,
  twitter : {
    handle : '@handle' ,
    site : '@site' ,
    cardType : 'summary_large_image' ,
  } ,
} ;
หรือเช่นนี้ หากคุณใช้ TypeScript 

 import { DefaultSeoProps } from 'next-seo' ;

const config : DefaultSeoProps = {
  openGraph : {
    type : 'website' ,
    locale : 'en_IE' ,
    url : 'https://www.url.ie/' ,
    siteName : 'SiteName' ,
  } ,
  twitter : {
    handle : '@handle' ,
    site : '@site' ,
    cardType : 'summary_large_image' ,
  } ,
} ;

export default config ;

นำเข้าที่ด้านบนของ _app.js 

 import SEO from '../next-seo.config' ;

และส่วนประกอบ DefaultSeo สามารถใช้ในลักษณะนี้แทนได้ 

 < DefaultSeo { ... SEO } / >

จากนี้ไป หน้าเว็บทั้งหมดของคุณจะใช้ค่าเริ่มต้นข้างต้น

โปรดทราบว่า Container เลิกใช้งานแล้วใน Next.js v9.0.4 ดังนั้นคุณควรแทนที่ส่วนประกอบนั้นที่นี่ด้วย React.Fragment ในเวอร์ชันนี้และใหม่กว่า - ดูที่นี่

ตัวเลือกถัดไปSeo

คุณสมบัติ พิมพ์ คำอธิบาย
titleTemplate เชือก ช่วยให้คุณสามารถตั้งค่าเทมเพลตชื่อเริ่มต้นที่จะเพิ่มลงในชื่อของคุณ ข้อมูลเพิ่มเติม
title เชือก ตั้งชื่อเมตาของเพจ
defaultTitle เชือก หากไม่มีการกำหนดชื่อเรื่องบนเพจ สตริงนี้จะถูกนำมาใช้แทน titleTemplate ที่ว่างเปล่า เทมเพลต ข้อมูลเพิ่มเติม
noindex บูลีน (ค่าเริ่มต้นเท็จ) ตั้งค่าว่าควรจัดทำดัชนีหน้าหรือไม่ ข้อมูลเพิ่มเติม
nofollow บูลีน (ค่าเริ่มต้นเท็จ) ตั้งค่าว่าควรติดตามเพจหรือไม่ ข้อมูลเพิ่มเติม
robotsProps วัตถุ ตั้งค่าข้อมูลเมตาเพิ่มเติมสำหรับข้อมูลเพิ่มเติมของ X-Robots-Tag
description เชือก ตั้งค่าคำอธิบายเมตาของหน้า
canonical เชือก ตั้งค่า URL ตามรูปแบบบัญญัติของหน้า
mobileAlternate.media เชือก กำหนดขนาดหน้าจอที่ควรแสดงเว็บไซต์บนมือถือ
mobileAlternate.href เชือก ตั้งค่า URL สำรองของเพจมือถือ
languageAlternates อาร์เรย์ ตั้งค่าภาษาของ URL ทางเลือก คาดว่าอาร์เรย์ของวัตถุที่มีรูปร่าง: { hrefLang: string, href: string }
themeColor เชือก ระบุสีที่แนะนำซึ่งตัวแทนผู้ใช้ควรใช้ในการปรับแต่งการแสดงเพจหรืออินเทอร์เฟซผู้ใช้โดยรอบ ต้องมีสี CSS ที่ถูกต้อง
additionalMetaTags อาร์เรย์ ช่วยให้คุณเพิ่มเมตาแท็กที่ไม่ได้บันทึกไว้ที่นี่ ข้อมูลเพิ่มเติม
additionalLinkTags อาร์เรย์ อนุญาตให้คุณเพิ่มแท็กลิงก์ที่ไม่ได้จัดทำเอกสารไว้ที่นี่ ข้อมูลเพิ่มเติม
twitter.cardType เชือก ประเภทการ์ด ซึ่งจะเป็นหนึ่งใน summary , summary_large_image , app หรือ player
twitter.site เชือก @username สำหรับเว็บไซต์ที่ใช้ในส่วนท้ายของการ์ด
twitter.handle เชือก @ชื่อผู้ใช้ สำหรับผู้สร้างเนื้อหา / ผู้แต่ง (เอาต์พุตเป็น twitter:creator )
facebook.appId เชือก ใช้สำหรับ Facebook Insights คุณต้องเพิ่ม ID แอพ Facebook ลงในเพจของคุณเพื่อให้ข้อมูลเพิ่มเติม
openGraph.url เชือก Canonical URL ของออบเจ็กต์ของคุณที่จะใช้เป็นรหัสถาวรในกราฟ
openGraph.type เชือก ประเภทของวัตถุของคุณ อาจจำเป็นต้องใช้คุณสมบัติอื่นๆ ข้อมูลเพิ่มเติม ทั้งนี้ขึ้นอยู่กับประเภทที่คุณระบุ
openGraph.title เชือก ชื่อกราฟแบบเปิด ซึ่งอาจแตกต่างจากชื่อเมตาของคุณ
openGraph.description เชือก คำอธิบายกราฟแบบเปิด ซึ่งอาจแตกต่างจากคำอธิบายเมตาของคุณ
openGraph.images อาร์เรย์ อาร์เรย์ของรูปภาพ (วัตถุ) ที่จะใช้โดยแพลตฟอร์มโซเชียลมีเดีย การหย่อน ฯลฯ เป็นตัวอย่าง หากมีหลายรายการ คุณสามารถเลือกหนึ่งรายการเมื่อแชร์ ดูตัวอย่าง
openGraph.videos อาร์เรย์ อาร์เรย์ของวิดีโอ (วัตถุ)
openGraph.locale เชือก ตำแหน่งที่แท็กกราฟเปิดถูกมาร์กอัป ในรูปแบบ language_TERRITORY ค่าเริ่มต้นคือ en_US
openGraph.siteName เชือก หากวัตถุของคุณเป็นส่วนหนึ่งของเว็บไซต์ขนาดใหญ่ ชื่อที่ควรจะแสดงสำหรับเว็บไซต์โดยรวม
openGraph.profile.firstName เชือก ชื่อบุคคล
openGraph.profile.lastName เชือก นามสกุลของบุคคล
openGraph.profile.username เชือก ชื่อผู้ใช้ของบุคคล
openGraph.profile.gender เชือก เพศของบุคคล
openGraph.book.authors สตริง[] ผู้เขียนบทความ ดูตัวอย่าง
openGraph.book.isbn เชือก ไอเอสบีเอ็น
openGraph.book.releaseDate วันที่และเวลา วันที่หนังสือออกจำหน่าย
openGraph.book.tags สตริง[] แท็กคำที่เกี่ยวข้องกับหนังสือเล่มนี้
openGraph.article.publishedTime วันที่และเวลา เมื่อบทความถูกตีพิมพ์ครั้งแรก ดูตัวอย่าง
openGraph.article.modifiedTime วันที่และเวลา เมื่อบทความถูกเปลี่ยนแปลงครั้งล่าสุด
openGraph.article.expirationTime วันที่และเวลา เมื่อบทความล้าสมัยหลังจากนั้น
openGraph.article.authors สตริง[] ผู้เขียนบทความ
openGraph.article.section เชือก ชื่อส่วนระดับสูง เช่นเทคโนโลยี
openGraph.article.tags สตริง[] แท็กคำที่เกี่ยวข้องกับบทความนี้

เทมเพลตชื่อเรื่อง

แทนที่ %s ด้วยสตริงหัวเรื่องของคุณ 

 title = 'This is my title' ;
titleTemplate = 'Next SEO | %s' ;
// outputs: Next SEO | This is my title 
 title = 'This is my title' ;
titleTemplate = '%s | Next SEO' ;
// outputs: This is my title | Next SEO

ชื่อเริ่มต้น 

 title = undefined ;
titleTemplate = 'Next SEO | %s' ;
defaultTitle = 'Next SEO' ;
// outputs: Next SEO

ไม่มีดัชนี

การตั้งค่านี้เป็น true จะตั้ง noindex,follow (หากต้องการตั้ง nofollow โปรดดูที่ nofollow ) การทำงานนี้ในแต่ละหน้า คุณสมบัตินี้ทำงานควบคู่กับคุณสมบัติ nofollow และจะเติมเมตาแท็ก robots ร่วมกัน

หมายเหตุ: คุณสมบัติ noindex และ nofollow แตกต่างจากคุณสมบัติอื่นๆ เล็กน้อยในแง่ที่ว่าการตั้งค่าให้เป็นค่าเริ่มต้นจะไม่ทำงานตามที่คาดไว้ นี่เป็นเพราะว่า Next SEO มีค่าเริ่มต้นของ index,follow เพราะว่า next-seo นั้นเป็นปลั๊กอิน SEO ดังนั้น หากคุณต้องการใช้คุณสมบัติเหล่านี้ทั่วโลก โปรดดู DangerlySetAllPagesToNoIndex และ DangerlySetAllPagesToNoFollow

ตัวอย่างไม่มีดัชนีในหน้าเดียว:

หากคุณมีเพจเดียวที่ไม่ต้องการให้จัดทำดัชนี คุณสามารถทำได้โดย: 

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo noindex = { true } / >
    < p > This page is no indexed < / p >
  < / >
) ;

export default Page ;

/*
<meta name="robots" content="noindex,follow">
*/

SetAllPagesToNoIndex อย่างเป็นอันตราย

มีคำนำหน้าที่ dangerously เนื่องจากจะ noindex ทุกหน้า เนื่องจากนี่คือปลั๊กอิน SEO จึงถือเป็นการกระทำที่อันตราย มัน ไม่ เลวเลยที่จะใช้สิ่งนี้ โปรดแน่ใจว่าคุณต้องการ noindex ทุก หน้า คุณยังคงลบล้างสิ่งนี้ได้ในระดับเพจ หากคุณมีกรณีการใช้งานในการ index เพจ ซึ่งสามารถทำได้โดยการตั้งค่า noindex: false

วิธีเดียวที่จะยกเลิกการตั้งค่านี้คือการลบ prop ออกจาก DefaultSeo ใน <App> ที่คุณกำหนดเอง

ไม่ติดตาม

การตั้งค่านี้เป็น true จะตั้ง index,nofollow (หากต้องการตั้ง noindex โปรดดูที่ noindex ) สิ่งนี้ทำงานบนพื้นฐานทีละหน้า พร็อพเพอร์ตี้นี้ทำงานควบคู่กับพร็อพเพอร์ตี้ noindex และเมื่อรวมกันแล้วจะเติมเมตาแท็ก robots

หมายเหตุ: ต่างจากคุณสมบัติอื่นๆ การตั้ง noindex และ nofollow เป็นค่าเริ่มต้นไม่ทำงานตามที่คาดไว้ เนื่องจาก Next SEO มีค่าเริ่มต้นเป็น index,follow เนื่องจาก next-seo เป็นปลั๊กอิน SEO หากคุณต้องการอนุญาตคุณสมบัติเหล่านี้ทั่วโลก โปรดดู DangerlySetAllPagesToNoIndex และ DangerlySetAllPagesToNoFollow

ตัวอย่างการไม่ติดตามในหน้าเดียว:

หากคุณมีเพจเดียวที่ไม่ต้องการให้จัดทำดัชนี คุณสามารถทำได้โดย: 

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo nofollow = { true } / >
    < p > This page is not followed < / p >
  < / >
) ;

export default Page ;

/*
<meta name="robots" content="index,nofollow">
*/

เป็นอันตรายSetAllPagesToNoFollow

มีคำนำหน้าว่า dangerously เพราะจะ nofollow ทุกหน้า เนื่องจากนี่คือปลั๊กอิน SEO จึงถือเป็นการกระทำที่อันตราย มัน ไม่ เลวเลยที่จะใช้สิ่งนี้ เพียงให้แน่ใจว่าคุณต้องการ nofollow ทุก หน้า คุณยังคงสามารถแทนที่สิ่งนี้ได้ในระดับเพจ หากคุณมีกรณีการใช้งานในการ follow เพจ ซึ่งสามารถทำได้โดยการตั้งค่า nofollow: false

วิธีเดียวที่จะยกเลิกการตั้งค่านี้ได้คือการลบ prop ออกจาก DefaultSeo ใน <App> ที่คุณกำหนดเอง

noindex nofollow เนื้อหา meta ของ robots
- - index,follow (ค่าเริ่มต้น)
เท็จ เท็จ index,follow
จริง - noindex,follow
จริง เท็จ noindex,follow
- จริง index,nofollow
เท็จ จริง index,nofollow
จริง จริง noindex,nofollow

หุ่นยนต์อุปกรณ์ประกอบฉาก

นอกเหนือจาก index, follow เมตาแท็ก robots เพื่อยอมรับคุณสมบัติเพิ่มเติมเพื่อเก็บถาวรการรวบรวมข้อมูลที่แม่นยำยิ่งขึ้น และแสดงตัวอย่างข้อมูลที่ดีขึ้นสำหรับบอท SEO ที่รวบรวมข้อมูลหน้าเว็บของคุณ

ตัวอย่าง: 

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo
      robotsProps = { {
        nosnippet : true ,
        notranslate : true ,
        noimageindex : true ,
        noarchive : true ,
        maxSnippet : - 1 ,
        maxImagePreview : 'none' ,
        maxVideoPreview : - 1 ,
      } }
    / >
    < p > Additional robots props in Next-SEO!! < / p >
  < / >
) ;

export default Page ;

/*
<meta name="robots" content="index,follow,nosnippet,max-snippet:-1,max-image-preview:none,noarchive,noimageindex,max-video-preview:-1,notranslate">
*/

คุณสมบัติที่มีอยู่

คุณสมบัติ พิมพ์ คำอธิบาย
noarchive บูลีน อย่าแสดงลิงก์ที่แคชไว้ในผลการค้นหา
nosnippet บูลีน อย่าแสดงตัวอย่างข้อความหรือตัวอย่างวิดีโอในผลการค้นหาสำหรับหน้านี้
max-snippet ตัวเลข ใช้อักขระได้สูงสุด [number] ตัวเป็นตัวอย่างข้อความสำหรับผลการค้นหานี้ อ่านเพิ่มเติม
max-image-preview 'ไม่มี', 'มาตรฐาน', 'ใหญ่' ตั้งค่าขนาดสูงสุดของการแสดงตัวอย่างรูปภาพสำหรับหน้านี้ในผลการค้นหา
max-video-preview ตัวเลข ใช้เวลาสูงสุด [number] วินาทีเป็นตัวอย่างวิดีโอสำหรับวิดีโอในหน้านี้ในผลการค้นหา อ่านเพิ่มเติม
notranslate บูลีน อย่าเสนอการแปลหน้านี้ในผลการค้นหา
noimageindex บูลีน อย่าจัดทำดัชนีภาพในหน้านี้
unavailable_after เชือก อย่าแสดงหน้านี้ในผลการค้นหาหลังจากวันที่/เวลาที่ระบุ ต้องระบุวันที่/เวลาในรูปแบบที่ใช้กันอย่างแพร่หลาย ซึ่งรวมถึงแต่ไม่จำกัดเพียง RFC 822, RFC 850 และ ISO 8601

หากต้องการข้อมูลอ้างอิงเพิ่มเติมเกี่ยวกับ X-Robots-Tag โปรดไปที่ Google Search Central - ควบคุมการรวบรวมข้อมูลและการจัดทำดัชนี

ทวิตเตอร์

Twitter จะอ่านแท็ก og:title , og:image และ og:description สำหรับการ์ดของพวกเขา นี่คือเหตุผลว่าทำไม next-seo จึงละเว้น twitter:title , twitter:image และ twitter:description เพื่อไม่ให้ซ้ำกัน

เครื่องมือบางอย่างอาจรายงานว่าสิ่งนี้เป็นข้อผิดพลาด ดูฉบับที่ #14

เฟสบุ๊ค 

 facebook = { {
  appId : '1234567890' ,
} }

เพิ่มสิ่งนี้ลงในการกำหนดค่า SEO ของคุณเพื่อรวมเมตา fb:app_id หากคุณต้องการเปิดใช้งานข้อมูลเชิงลึกของ Facebook สำหรับเว็บไซต์ของคุณ ข้อมูลเกี่ยวกับเรื่องนี้สามารถพบได้ในเอกสารของ Facebook

URL ตามรูปแบบบัญญัติ

เพิ่มข้อมูลนี้ในแต่ละหน้าเมื่อคุณต้องการรวม URL ที่ซ้ำกัน 

 canonical = 'https://www.canonical.ie/' ;

สลับกัน

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

ตัวอย่าง: 

 mobileAlternate = { {
  media : 'only screen and (max-width: 640px)' ,
  href : 'https://m.canonical.ie' ,
} } 
 languageAlternates = { [ {
  hrefLang : 'de-AT' ,
  href : 'https://www.canonical.ie/de' ,
} ] }

เมตาแท็กเพิ่มเติม

ซึ่งจะทำให้คุณสามารถเพิ่มเมตาแท็กอื่นๆ ที่ไม่ครอบคลุมอยู่ใน config และควรใช้แทนการรองรับ children

จำเป็นต้องมี content จากนั้น name , property หรือ httpEquiv (อย่างละหนึ่งเท่านั้น)

ตัวอย่าง: 

 additionalMetaTags = { [ {
  property : 'dc:creator' ,
  content : 'Jane Doe'
} , {
  name : 'application-name' ,
  content : 'NextSeo'
} , {
  httpEquiv : 'x-ua-compatible' ,
  content : 'IE=edge; chrome=1'
} ] }

ตัวอย่างที่ไม่ถูกต้อง:

สิ่งเหล่านี้ไม่ถูกต้องเนื่องจากมี name , property และ httpEquiv มากกว่าหนึ่งรายการในรายการเดียวกัน 

 additionalMetaTags = { [ {
  property : 'dc:creator' ,
  name : 'dc:creator' ,
  content : 'Jane Doe'
} , {
  property : 'application-name' ,
  httpEquiv : 'application-name' ,
  content : 'NextSeo'
} ] }

สิ่งหนึ่งที่ควรทราบก็คือ ขณะนี้สนับสนุนเฉพาะแท็กที่ไม่ซ้ำใคร เว้นแต่คุณจะใช้คีย์ keyOverride เพื่อจัดเตรียมคีย์ที่ไม่ซ้ำให้กับเมตาแท็กเพิ่มเติมแต่ละรายการ

พฤติกรรมเริ่มต้น (โดยไม่มีพร็อพ keyOverride ) คือการแสดงผลหนึ่งแท็กต่อ name / property / httpEquiv ที่ไม่ซ้ำกัน สิ่งสุดท้ายที่กำหนดไว้จะถูกแสดงผล

ตัวอย่างเช่น หากคุณส่งแท็ก 2 แท็กด้วย property เดียวกัน : 

 additionalMetaTags = { [ {
  property : 'dc:creator' ,
  content : 'Joe Bloggs'
} , {
  property : 'dc:creator' ,
  content : 'Jane Doe'
} ] }

มันจะส่งผลให้สิ่งนี้ถูกเรนเดอร์: 

 < meta property =" dc:creator " content =" Jane Doe " />

การระบุคุณสมบัติ keyOverride เพิ่มเติมเช่นนี้: 

 additionalMetaTags = { [ {
  property : 'dc:creator' ,
  content : 'Joe Bloggs' ,
  keyOverride : 'creator1' ,
} , {
  property : 'dc:creator' ,
  content : 'Jane Doe' ,
  keyOverride : 'creator2' ,
} ] }

ส่งผลให้มีการแสดงผล HTML ที่ถูกต้อง: 

 < meta property =" dc:creator " content =" Joe Bloggs " />
< meta property =" dc:creator " content =" Jane Doe " />

แท็กลิงก์เพิ่มเติม

ซึ่งจะทำให้คุณสามารถเพิ่มแท็กลิงก์อื่นๆ ที่ไม่ครอบคลุมใน config

จำเป็นต้องมี rel และ href

ตัวอย่าง: 

 additionalLinkTags = { [
  {
    rel : 'icon' ,
    href : 'https://www.test.ie/favicon.ico' ,
  } ,
  {
    rel : 'apple-touch-icon' ,
    href : 'https://www.test.ie/touch-icon-ipad.jpg' ,
    sizes : '76x76'
  } ,
  {
    rel : 'manifest' ,
    href : '/manifest.json'
  } ,
  {
    rel : 'preload' ,
    href : 'https://www.test.ie/font/sample-font.woof2' ,
    as : 'font' ,
    type : 'font/woff2' ,
    crossOrigin : 'anonymous'
  }
] }

มันจะส่งผลให้สิ่งนี้ถูกเรนเดอร์: 

 < link rel =" icon " href =" https://www.test.ie/favicon.ico " />
< link
  rel =" apple-touch-icon "
  href =" https://www.test.ie/touch-icon-ipad.jpg "
  sizes =" 76x76 "
/>
< link rel =" manifest " href =" /manifest.json " />
< link
  rel =" preload "
  href =" https://www.test.ie/font/sample-font.woof2 "
  as =" font "
  type =" font/woff2 "
  crossorigin =" anonymous "
/>

เปิดกราฟ

สำหรับข้อมูลจำเพาะทั้งหมดโปรดตรวจสอบที่ http://ogp.me/

ปัจจุบัน SEO ถัดไปรองรับ:

  • ขั้นพื้นฐาน
  • วิดีโอ
  • บทความ
  • หนังสือ
  • ประวัติโดยย่อ

เปิดตัวอย่างกราฟ

ขั้นพื้นฐาน 

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo
      openGraph = { {
        type : 'website' ,
        url : 'https://www.example.com/page' ,
        title : 'Open Graph Title' ,
        description : 'Open Graph Description' ,
        images : [
          {
            url : 'https://www.example.ie/og-image.jpg' ,
            width : 800 ,
            height : 600 ,
            alt : 'Og Image Alt' ,
          } ,
          {
            url : 'https://www.example.ie/og-image-2.jpg' ,
            width : 800 ,
            height : 600 ,
            alt : 'Og Image Alt 2' ,
          } ,
        ] ,
      } }
    / >
    < p > Basic < / p >
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด