搜索引擎优化
Next SEO 是一个插件,可让您更轻松地在 Next.js 项目中管理 SEO。
非常欢迎拉取请求。此外,如果您是,请务必查看功能请求的问题 寻找有关添加内容的灵感。
想支持这个免费插件吗?
维护一个开源项目需要花费大量时间,因此非常感谢任何小贡献。
next-seo.wallet (ERC20 和 SOL)
关于应用目录的注意事项
仅当使用目录时,此注释才相关。app
对于标准元数据(例如:、
对于 JSON-LD,唯一需要的更改是您应该添加到正在使用的 JSON-LD 组件中。
<ArticleJsonLd
useAppDir={true}
url="https://example.com/article"
title="Article headline" <- required for app directory
/>
如果您使用的是页面目录,那么这正是您 SEO 需求所需要的!
用法
NextSeo工作原理是将其包含在您希望添加 SEO 属性的页面上。一旦包含在页面上,您就会向它传递一个带有页面 SEO 属性的配置对象。这可以在页面级别动态生成,或者在某些情况下,您的 API 可能会返回 SEO 对象。
设置
首先,安装它:
npm install next-seo
或
yarn add next-seo
将 SEO 添加到页面
使用 Next.js 13 中引入的 Next.js 应用程序目录?
如果您使用的是 Next.js 应用程序目录,则强烈建议您使用内置方法。
如果您使用的是目录,那么这正是您 SEO 需求所需要的!
然后,您需要导入并添加所需的属性。这将呈现 for 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;
但是为您提供了更多可以添加的选项。有关页面的典型示例,请参见下文。
典型页面示例:
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标签的说明
Twitter 将读取其卡片的 、 和 标签。 省略 ,以避免重复。
某些工具可能会报告此错误。
默认 SEO 配置
NextSeo使您能够设置一些默认的 SEO 属性,这些属性将显示在所有页面上,而无需在其上包含任何内容。如果需要,您还可以逐页覆盖这些内容。
为此,您需要创建一个自定义 .在 pages 目录中创建一个新文件 …js有关自定义 .
在此文件中,您需要从中导入并传递 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 内部的行为,应放在上面(之前)。
或者,您也可以创建一个配置文件来存储默认值,例如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
导入_app.js
import SEO from '../next-seo.config';
组件可以这样使用DefaultSeo
<DefaultSeo {...SEO} />
从现在开始,您的所有页面都将应用上述默认值。
请注意:容器在 Next.js v9.0.4 中已弃用,因此您应该在此版本及更高版本上将该组件替换为 React.Fragment。
NextSeo 选项
财产 | 类型 | 描述 |
---|---|---|
titleTemplate | 字符串 | 允许您设置将添加到标题中的默认标题模板 |
title | 字符串 | 设置页面的元标题 |
defaultTitle | 字符串 | 如果页面上未设置标题,则将使用此字符串而不是空字符串 |
noindex boolean | (默认值 false) | 设置是否应将网页编入索引 |
nofollow boolean | (默认值 false) | 设置是否应关注页面 |
robotsProps | 对象 | 为“更多信息”设置更多元信息X-Robots-Tag |
description | 字符串 | 设置页面元描述 |
canonical | 字符串 | 设置网页规范网址 |
mobileAlternate.media | 字符串 | 设置移动网站应从什么屏幕尺寸开始投放 |
mobileAlternate.href | 字符串 | 设置移动页面备用网址 |
languageAlternates | 数组 | 设置备用 URL 的语言。需要具有以下形状的对象数组:{ hrefLang: string, href: string } |
themeColor | 字符串 | 指示用户代理应用于自定义页面或周围用户界面的显示的建议颜色。必须包含有效的 CSS 颜色 |
additionalMetaTags | 数组 | 允许您添加此处未记录的 meta 标记。 |
additionalLinkTags | 数组 | 允许您添加此处未记录的链接标记。 |
twitter.cardType | 字符串 | 卡类型,将是 、 、 或summarysummary_large_imageappplayer |
twitter.site | 字符串 | @username卡页脚中使用的网站 |
twitter.handle | 字符串 | 内容创建者/作者的@username(输出为twitter:creator) |
facebook.appId | 字符串 | 用于 Facebook Insights,您必须将 Facebook 应用程序 ID 添加到您的页面才能获得更多信息 |
openGraph.url | 字符串 | 对象的规范 URL,将在图形中用作其永久 ID |
openGraph.type | 字符串 | 对象的类型。根据您指定的类型,可能还需要其他属性 更多信息 |
openGraph.title | 字符串 | 打开图表标题,这可能与您的元标题不同。 |
openGraph.description | 字符串 | 开放图描述,这可能与您的元描述不同。 |
openGraph.images | 数组 | 社交媒体平台、松弛等用作预览的图像(对象)数组。如果提供了多个,您可以在共享时选择一个。 |
openGraph.videos | 数组 | 视频数组(对象) |
openGraph.locale | 字符串 | 标记 open graph 标记的区域设置的格式language_TERRITORY。默认值为 en_US。 |
openGraph.siteName | 字符串 | 如果对象是较大网站的一部分,则应为整个网站显示的名称。 |
openGraph.profile.firstName | 字符串 | 人的名字。 |
openGraph.profile.lastName | 字符串 | 人员的姓氏。 |
openGraph.profile.username | 字符串 | 人员的用户名。 |
openGraph.profile.gender | 字符串 | 人的性别。 |
openGraph.book.authors | 字符串[] | 文章的作者。 |
openGraph.book.isbn | 字符串 | 国际标准书号(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
无索引
将其设置为 will set(要设置,请参考 nofollow)。这是逐页工作的。此属性与属性协同工作,它们一起填充 meta 标记。
注意:和 nofollow 属性与所有其他属性略有不同,因为将它们设置为默认值无法按预期工作。这是因为Next SEO已经有一个默认值,因为毕竟是一个SEO插件。
示例:单个页面上没有索引:
如果您不希望将单个网页编入索引,可以通过以下方式实现此目的:
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">
*/
dangerouslySetAllPagesToNoIndex
它的前缀是 因为它将所有页面。由于这是一个 SEO 插件,这是一个有点危险的操作。使用它也不错,只是请确保您想要每个页面。如果您有页面的用例,您仍然可以在页面级别覆盖它。这可以通过设置 来完成。
取消设置此设置的唯一方法是从自定义中删除道具。
暂无关注
将其设置为 will set。这是逐页工作的。此属性与属性协同工作,它们一起填充 meta 标记。
注意:与其他属性不同,默认情况下,设置 和 不会按预期工作。这是因为 Next SEO 的默认值为 ,因为毕竟是一个 SEO 插件。
示例:单个页面上没有关注:
如果您不希望将单个网页编入索引,可以通过以下方式实现此目的:
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">
*/
dangerouslySetAllPagesToNoFollow
它的前缀是 因为它将所有页面。由于这是一个 SEO 插件,这是一个有点危险的操作。使用它也不错,只是请确保您想要每个页面。如果您有页面的用例,您仍然可以在页面级别覆盖它。这可以通过设置 来完成。
取消设置此设置的唯一方法是从自定义中删除道具。
noindex | nofollow | meta内容robots |
---|---|---|
– | – | index,follow(默认) |
假 | 假 | index,follow |
真 | – | noindex,follow |
真 | 假 | noindex,follow |
– | 真 | index,nofollow |
假 | 真 | index,nofollow |
真 | 真 | noindex,nofollow |
机器人道具
此外,元标记接受更多属性以存档更准确的抓取,并为抓取页面的 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 | boolean | 不要在搜索结果中显示缓存的链接。 |
nosnippet | boolean | 请勿在此页面的搜索结果中显示文本片段或视频预览。 |
max-snippet | number | 在此搜索结果中,最多使用 [number] 个字符作为文本摘要。 |
max-image-preview | ‘无’,‘标准’,‘大’ | 在搜索结果中设置此页面的图像预览的最大大小。 |
max-video-preview | number | 在搜索结果中,此网页上的视频片段最多使用 [数] 秒作为视频片段。 |
notranslate | boolean | 不要在搜索结果中提供此页面的翻译。 |
noimageindex | boolean | 请勿将此页面上的图像编入索引。 |
unavailable_after | 字符串 | 不要在指定日期/时间之后在搜索结果中显示此页面。日期/时间必须以广泛采用的格式指定,包括但不限于 RFC 822、RFC 850 和 ISO 8601。 |
Twitter 将读取其卡片的 、 和标签,这就是省略 的原因,因此不会重复。
脸书
facebook={{
appId: '1234567890',
}}
如果您需要为您的网站启用 Facebook 见解,请将其添加到您的 SEO 配置中以包含 fb:app_id 元。
规范网址
当您想要合并重复的 URL 时,请逐页添加此项。
canonical = 'https://www.canonical.ie/';
Alternate
此链接关系用于指示桌面和移动网站与搜索引擎之间的关系。
例:
mobileAlternate={{
media: 'only screen and (max-width: 640px)',
href: 'https://m.canonical.ie',
}}
languageAlternates={[{
hrefLang: 'de-AT',
href: 'https://www.canonical.ie/de',
}]}
其他元标记
这允许您添加 和 中未涵盖的任何其他元标记 应该使用而不是 prop。
content是必需的
例:
additionalMetaTags={[{
property: 'dc:creator',
content: 'Jane Doe'
}, {
name: 'application-name',
content: 'NextSeo'
}, {
httpEquiv: 'x-ua-compatible',
content: 'IE=edge; chrome=1'
}]}
无效示例:
这些是无效的,因为它们包含多个 ,并且位于同一条目上。
additionalMetaTags={[{
property: 'dc:creator',
name: 'dc:creator',
content: 'Jane Doe'
}, {
property: 'application-name',
httpEquiv: 'application-name',
content: 'NextSeo'
}]}
需要注意的一点是,它目前只支持唯一标签,除非你使用 prop 为每个额外的元标签提供唯一的键。
默认行为(没有 prop)是为每个唯一 / / 渲染一个标签。将呈现最后一个定义的。
例如,如果您传递 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" />
其他链接标签
这允许您添加 中未涵盖的任何其他链接标记。
rel并且是必需的。
例:
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"
/>
Open Graph
Next SEO 目前支持:
- basic
- 视频
- article
- 书
- 轮廓
Open Graph 示例
basic
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>
</>
);
export default Page;
注意
下一个 .js 版本提供多个图像7.0.0-canary.0
对于版本 - 您只需要提供单个项目数组6.0.07.0.0-canary.0:
images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],
提供多张图像不会破坏任何东西,但只会将一张图像添加到头部。
视频
import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
title="Video Page Title"
description="Description of video page"
openGraph={{
title: 'Open Graph Video Title',
description: 'Description of open graph video',
url: 'https://www.example.com/videos/video-title',
type: 'video.movie',
video: {
// Multiple Open Graph actors is only available in version `7.0.2-canary.35`+ of next
actors: [
{
profile: 'https://www.example.com/actors/@firstnameA-lastnameA',
role: 'Protagonist',
},
{
profile: 'https://www.example.com/actors/@firstnameB-lastnameB',
role: 'Antagonist',
},
],
// Multiple Open Graph directors is only available in version `7.0.2-canary.35`+ of next
directors: [
'https://www.example.com/directors/@firstnameA-lastnameA',
'https://www.example.com/directors/@firstnameB-lastnameB',
],
// Multiple Open Graph writers is only available in version `7.0.2-canary.35`+ of next
writers: [
'https://www.example.com/writers/@firstnameA-lastnameA',
'https://www.example.com/writers/@firstnameB-lastnameB',
],
duration: 680000,
releaseDate: '2022-12-21T22:04:11Z',
// Multiple Open Graph tags is only available in version `7.0.2-canary.35`+ of next
tags: ['Tag A', 'Tag B', 'Tag C'],
},
siteName: 'SiteName',
}}
/>
<h1>Video Page SEO</h1>
</>
);
export default Page;
注意
下一个 .js 版本提供多个图像7.0.0-canary.0
对于版本 - 您只需要提供单个项目数组6.0.07.0.0-canary.0:
images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],
提供多张图像不会破坏任何东西,但只会将一张图像添加到头部。
音频
import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
title="Audio Page Title"
description="Description of audio page"
openGraph={{
title: 'Open Graph Audio',
description: 'Description of open graph audio',
url: 'https://www.example.com/audio/audio',
audio: [
{
url: 'http://examples.opengraphprotocol.us/media/audio/1khz.mp3',
secureUrl: 'https://d72cgtgi6hvvl.cloudfront.net/media/audio/1khz.mp3',
type: "audio/mpeg"
},
{
url: 'http://examples.opengraphprotocol.us/media/audio/250hz.mp3',
secureUrl: 'https://d72cgtgi6hvvl.cloudfront.net/media/audio/250hz.mp3',
type: "audio/mpeg"
},
]
site_name: 'SiteName',
}}
/>
<h1>Audio Page SEO</h1>
</>
);
export default Page;
article
import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
openGraph={{
title: 'Open Graph Article Title',
description: 'Description of open graph article',
url: 'https://www.example.com/articles/article-title',
type: 'article',
article: {
publishedTime: '2017-06-21T23:04:13Z',
modifiedTime: '2018-01-21T18:04:43Z',
expirationTime: '2022-12-21T22:04:11Z',
section: 'Section II',
authors: [
'https://www.example.com/authors/@firstnameA-lastnameA',
'https://www.example.com/authors/@firstnameB-lastnameB',
],
tags: ['Tag A', 'Tag B', 'Tag C'],
},
images: [
{
url: 'https://www.test.ie/images/cover.jpg',
width: 850,
height: 650,
alt: 'Photo of text',
},
],
}}
/>
<p>Article</p>
</>
);
export default Page;
注意
多个图像,作者,标签可从下一个.js版本获得7.0.0-canary.0
对于版本 - 您只需要提供单个项目数组6.0.07.0.0-canary.0:
images:
images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],
authors:
authors: [
'https://www.example.com/authors/@firstnameA-lastnameA',
],
tags:
tags: ['Tag A'],
提供上述任何一个的倍数不会破坏任何东西,但只会在头部添加一个。
书
import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
openGraph={{
title: 'Open Graph Book Title',
description: 'Description of open graph book',
url: 'https://www.example.com/books/book-title',
type: 'book',
book: {
releaseDate: '2018-09-17T11:08:13Z',
isbn: '978-3-16-148410-0',
authors: [
'https://www.example.com/authors/@firstnameA-lastnameA',
'https://www.example.com/authors/@firstnameB-lastnameB',
],
tags: ['Tag A', 'Tag B', 'Tag C'],
},
images: [
{
url: 'https://www.test.ie/images/book.jpg',
width: 850,
height: 650,
alt: 'Cover of the book',
},
],
}}
/>
<p>Book</p>
</>
);
export default Page;
注意
多个图像,作者,标签可从下一个.js版本获得7.0.0-canary.0
对于版本 - 您只需要提供单个项目数组6.0.07.0.0-canary.0:
images:
images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],
authors:
authors: [
'https://www.example.com/authors/@firstnameA-lastnameA',
],
tags:
tags: ['Tag A'],
提供上述任何一个的倍数不会破坏任何东西,但只会在头部添加一个。
轮廓
import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
openGraph={{
title: 'Open Graph Profile Title',
description: 'Description of open graph profile',
url: 'https://www.example.com/@firstlast123',
type: 'profile',
profile: {
firstName: 'First',
lastName: 'Last',
username: 'firstlast123',
gender: 'female',
},
images: [
{
url: 'https://www.test.ie/images/profile.jpg',
width: 850,
height: 650,
alt: 'Profile Photo',
},
],
}}
/>
<p>Profile</p>
</>
);
export default Page;
注意
下一个 .js 版本提供多个图像7.0.0-canary.0
对于版本 - 您只需要提供单个项目数组6.0.07.0.0-canary.0:
images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],
提供多张图像不会破坏任何东西,但只会将一张图像添加到头部。