next seo
v6.6.0
您看過新的 Next.js 電子報嗎？
有用的工具
Next SEO 是一個插件，可以讓您在 Next.js 專案中更輕鬆地管理 SEO。
非常歡迎請求請求。如果您正在尋找添加內容的靈感，請務必查看功能請求的問題。
想要支援這個免費插件嗎？
維護一個開源專案需要花費大量時間，因此任何小的貢獻都會受到極大的讚賞。
咖啡為編碼提供能量 ☕️
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 需求所需要的！
NextSeo工作原理是將其包含在您想要添加 SEO 屬性的頁面上。一旦包含在頁面中，您就可以向其傳遞一個帶有頁面 SEO 屬性的配置物件。這可以在頁面層級動態生成，或者在某些情況下，您的 API 可能會傳回 SEO 物件。
首先，安裝它：
npm install next-seo或者
yarn add next-seo使用 Next.js 13 中引入的 Next.js 應用程式目錄？
如果您使用 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 標籤上的註釋
屬性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 期
NextSeo可讓您設定一些預設的 SEO 屬性，這些屬性將顯示在所有頁面上，而無需在其中包含任何內容。如果需要，您也可以逐頁覆蓋這些內容。
為此，您需要建立一個自訂<App> 。在您的頁面目錄中，建立一個新檔案_app.js 。有關自訂<App>的更多信息，請參閱此處的 Next.js 文件。
在此檔案中，您需要從next-seo匯入DefaultSeo並向其傳遞 props。
這是一個典型的例子：
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 >
) ;
}
}為了正常工作，由於 Next.js 內部的行為， DefaultSeo應放置在Component上方（之前）。
或者，您也可以建立一個設定檔來儲存預設值，例如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' ,
} ,
} ; 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 } / >從現在開始，您的所有頁面都將套用上述預設值。
請注意，Next.js v9.0.4 中已棄用Container ，因此您應該在此版本及更高版本上將此元件替換為React.Fragment - 請參閱此處
| 財產 | 類型 | 描述 |
|---|---|---|
titleTemplate | 細繩 | 允許您設定將添加到您的標題的預設標題模板更多信息 |
title | 細繩 | 設定頁面的元標題 |
defaultTitle | 細繩 | 如果頁面上未設定標題，則將使用此字串而不是空的titleTemplate更多信息 |
noindex | 布林值（預設 false） | 設定頁面是否應該被索引更多信息 |
nofollow | 布林值（預設 false） | 設定是否應關注頁面更多信息 |
robotsProps | 目的 | 為X-Robots-Tag設定更多元信息 更多信息 |
description | 細繩 | 設定頁面元描述 |
canonical | 細繩 | 設定頁面規範url |
mobileAlternate.media | 細繩 | 設定行動網站的螢幕尺寸 |
mobileAlternate.href | 細繩 | 設定行動頁面備用網址 |
languageAlternates | 大批 | 設定備用網址的語言。需要具有以下形狀的物件陣列： { hrefLang: string, href: string } |
themeColor | 細繩 | 指示使用者代理應使用的建議顏色來自訂頁面或周圍使用者介面的顯示。必須包含有效的 CSS 顏色 |
additionalMetaTags | 大批 | 允許您新增此處未記錄的元標記。更多資訊 |
additionalLinkTags | 大批 | 允許您新增此處未記錄的連結標籤。更多資訊 |
twitter.cardType | 細繩 | 卡片類型，可以是summary 、 summary_large_image 、 app或player之一 |
twitter.site | 細繩 | @卡頁腳中使用的網站的使用者名 |
twitter.handle | 細繩 | @內容創作者/作者的使用者名稱（輸出為twitter:creator ） |
facebook.appId | 細繩 | 用於 Facebook Insights，您必須將 Facebook 應用程式 ID 添加到您的頁面以獲取更多信息 |
openGraph.url | 細繩 | 物件的規範 URL，將用作圖中的永久 ID |
openGraph.type | 細繩 | 您的物件的類型。根據您指定的類型，可能還需要其他屬性更多信息 |
openGraph.title | 細繩 | 開放圖標題，這可能與您的元標題不同。 |
openGraph.description | 細繩 | 開放圖描述，這可能與您的元描述不同。 |
openGraph.images | 大批 | 社群媒體平台、slack 等用作預覽的一組影像（物件）。如果提供多個，您可以在共用時選擇一個。查看範例 |
openGraph.videos | 大批 | 視訊數組（物件） |
openGraph.locale | 細繩 | 標記開放圖標籤的語言環境。預設為 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 外掛。因此，如果您想要全域使用這些屬性，請參閱angerouslySetAllPagesToNoIndex 和angerouslySetAllPagesToNoFollow。
單頁無索引範例：
如果您有一個頁面不希望被索引，您可以透過以下方式實現：
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">
*/ 它有dangerously前綴，因為它不會noindex所有頁面。由於這是一個 SEO 插件，因此這是一個危險的行為。用這個也不錯。請確保您希望對每個頁面都noindex 。如果您有index頁面的用例，您仍然可以在頁面層級覆寫此設定。這可以透過設定noindex: false來完成。
取消設定的唯一方法是從自訂<App>中的DefaultSeo中刪除該道具。
設定為true將會設定index,nofollow （設定noindex ，請參考noindex ）。這是逐頁進行的。此屬性與noindex屬性協同工作，它們一起填充robots元標記。
注意：與其他屬性不同，預設設定noindex和nofollow不會如預期般運作。這是因為 Next SEO 有一個預設值index,follow ，因為next-seo畢竟是 SEO 外掛。如果您想要全域允許這些屬性，請參閱angerouslySetAllPagesToNoIndex 和dangerouslySetAllPagesToNoFollow。
單一頁面上沒有關注範例：
如果您有一個頁面不希望被索引，您可以透過以下方式實現：
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">
*/ 它有dangerously的前綴，因為它不會nofollow所有頁面。由於這是一個 SEO 插件，因此這是一種危險的行為。用這個也不錯。請確保您不想nofollow每個頁面。如果您有follow頁面的用例，您仍然可以在頁面層級覆蓋此設定。這可以透過設定nofollow: false來完成。
取消設定的唯一方法是從自訂<App>中的DefaultSeo中刪除該道具。
noindex | nofollow | robots的meta內容 |
|---|---|---|
| -- | -- | 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 搜尋中心 - 控制抓取和索引
Twitter 將讀取其卡片的og:title 、 og:image和og:description標籤，這就是next-seo省略twitter:title 、 twitter:image和twitter:description的原因，以免重複。
某些工具可能會將此報告為錯誤。請參閱第 14 期
facebook = { {
appId : '1234567890' ,
} }如果您需要為您的網站啟用 Facebook 洞察，請將其新增至您的 SEO 配置中以包含 fb:app_id 元資料。有關這方面的資訊可以在 Facebook 的文檔中找到
當您想要合併重複的 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/
Next 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 >
