使用 Next SEO 在 Next.js 中管理 SEO
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平台的标签和设置应用的主题颜色。
评论已关闭