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 | 细绳 | 标记开放图标签的语言环境。格式为 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 插件。因此，如果您想全局使用这些属性，请参阅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 >
