DEV Community

panfan
panfan

Posted on • Originally published at manon.icu on

Next.js - Add Next-seo

前置

【上一篇】完成了使用 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'
      }}
    />
  )
}
Enter fullscreen mode Exit fullscreen mode

修改pages/_app.tsx,引入components/SEO/index.tsx,在Head下添加 SEO 组件,组件加上 propsurl

在 blog 内页同样引入,分别传入titledescriptioncover

// pages/[...slug].tsx
// <SEO
//   title={title}
//   description={description}
//   cover={cover}
//   openGraph={{title, description}}
// />
Enter fullscreen mode Exit fullscreen mode

Source Code

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more