前置
【上一篇】完成了使用 Next.js 构建 blog 并添加了主题切换功能。
好的 SEO 将有助于提高网站权重，带来更多流量。作为前端工程师的我们，就有着得天独厚的优势，我们不需要做到优化工程师的级别，我们只需要做好几个方面，就能完成一个网站 80%左右的 SEO 优化工作了～因为我研究下来发现 SEO 针对点大部分都是前端基础～
创建组件
创建components/SEO/index.tsx
import {NextSeo} from 'next-seo'
export default function SEO(props) {
const {url, cover, description, title} = props
return (
<NextSeo
titleTemplate="%s - Manon.icu"
openGraph={{
type: 'website',
url,
description:
description ??
'The personal website for Manon, Frontend Web Developer.',
site_name: title ?? 'Manon | manon.icu',
images: [
{
url: cover ?? 'https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/9oh25b.jpg',
width: 900,
height: 900
}
]
}}
canonical={url}
twitter={{
handle: '@Manonicu',
cardType: 'summary_large_image'
}}
/>
)
}
修改pages/_app.tsx，引入components/SEO/index.tsx，在Head下添加 SEO 组件，组件加上 propsurl
在 blog 内页同样引入，分别传入title、description、cover
// pages/[...slug].tsx
// <SEO
// title={title}
// description={description}
// cover={cover}
// openGraph={{title, description}}
// />
Top comments (0)