【SEO】Next SEO的使用方法:1

最新推荐文章于 2024-04-16 18:35:35 发布

SEO_juper

最新推荐文章于 2024-04-16 18:35:35 发布

阅读量320

点赞数

分类专栏： SEO 工具文章标签： dreamweaver 搜索引擎

本文链接：https://blog.csdn.net/SEO_juper/article/details/134216924

版权

SEO 同时被 2 个专栏收录

94 篇文章 2 订阅

订阅专栏

工具

14 篇文章 0 订阅

订阅专栏

搜索引擎优化

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

取消设置此设置的唯一方法是从自定义中删除道具。

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

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',
  },
],

提供多张图像不会破坏任何东西，但只会将一张图像添加到头部。

SEO_juper

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【SEO】Next SEO的使用方法:1

Next SEO 是一个插件，可让您更轻松地在 Next.js 项目中管理 SEO。非常欢迎拉取请求。此外，如果您是，请务必查看功能请求的问题寻找有关添加内容的灵感。想支持这个免费插件吗？（ERC20 和 SOL）仅当使用目录时，此注释才相关。app对于标准元数据（例如：、对于 JSON-LD，唯一需要的更改是您应该添加到正在使用的 JSON-LD 组件中。如果您使用的是页面目录，那么这正是您 SEO 需求所需要的！
复制链接

扫一扫

专栏目录