Next SEO 使用教程

最新推荐文章于 2024-12-17 17:15:00 发布

井隆榕Star

最新推荐文章于 2024-12-17 17:15:00 发布

阅读量572

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00609/article/details/141847073

Next SEO 使用教程

next-seoNext SEO is a plug in that makes managing your SEO easier in Next.js projects.项目地址:https://gitcode.com/gh_mirrors/ne/next-seo

项目介绍

Next SEO 是一个用于 Next.js 应用的 SEO 插件，旨在简化在 Next.js 项目中管理 SEO 元数据的过程。通过 Next SEO，开发者可以轻松地添加和更新页面的标题、描述、关键词以及其他重要的 SEO 相关标签。

项目快速启动

安装

首先，通过 npm 或 yarn 安装 Next SEO：

npm install next-seo

或

yarn add next-seo

配置

在你的 Next.js 项目中，创建一个 next-seo.config.js 文件来配置全局的 SEO 设置：

// next-seo.config.js
export default {
  title: 'My Next.js Site',
  description: 'This is my Next.js site description',
  openGraph: {
    type: 'website',
    locale: 'en_IE',
    url: 'https://www.url.ie/',
    site_name: 'SiteName',
  },
};

在你的 _app.js 文件中引入并使用这个配置：

// pages/_app.js
import { DefaultSeo } from 'next-seo';
import SEO from '../next-seo.config';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo {...SEO} />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

页面级 SEO

在每个页面中，你可以通过 NextSeo 组件来添加页面特定的 SEO 信息：

// pages/index.js
import { NextSeo } from 'next-seo';

export default function Home() {
  return (
    <>
      <NextSeo
        title="Home"
        description="This is the home page description"
        openGraph={{
          url: 'https://www.example.com/home',
          title: 'Home',
          description: 'This is the home page description',
          images: [
            {
              url: 'https://www.example.com/images/home.jpg',
              width: 800,
              height: 600,
              alt: 'Home Image',
            },
          ],
        }}
      />
      <div>
        <h1>Welcome to the Home Page</h1>
      </div>
    </>
  );
}