使用 Next SEO 在 Next.js 中管理 SEO

作者：System 时间：2024年08月23日分类：所有,html5 字数：1095




import Head from 'next/head';
import { NextSeo } from 'next-seo';
 
export default function HomePage() {
  const title = '首页';
  const description = '这是首页的描述。';
 
  return (
    <>
      <NextSeo
        title={title}
        description={description}
        openGraph={{
          title: title,
          description: description,
          url: 'https://yourdomain.com',
          images: [
            {
              url: 'https://yourdomain.com/static/home-image.jpg',
              width: 800,
              height: 420,
              alt: '主页图片',
            },
          ],
        }}
        twitter={{
          handle: '@your_twitter',
          site: '@your_twitter',
          cardType: 'summary_large_image',
        }}
      />
      <Head>
        <meta name="msapplication-TileColor" content="#da532c" />
        <meta name="theme-color" content="#ffffff" />
      </Head>
      {/* 页面其余内容 */}
    </>
  );
}

这个代码实例展示了如何在一个Next.js应用中使用Next SEO来管理页面的SEO信息。我们定义了一个标题和描述，并且配置了Open Graph和Twitter卡片信息。同时，我们添加了两个meta标签来定制Windows平台的标签和设置应用的主题颜色。

使用 Next SEO 在 Next.js 中管理 SEO

评论已关闭

推荐阅读