从掘金的网站举例，看一下SEO如何做的，再实践下

SEO其实也就是搜索引擎优化，用来获得更多的流量 曝光度的东西，一般官网，营销产品，博客这些用的比较多，刚好写的个人博客需要用到。

                                实现手段

seo优化手段主要有以下几个方面，这里先以掘金举例。

第一点：Title(标题)、Description（描述）和 Keywords（关键词）的缩写，其实也就是网站的基本信息

第二点：robots， 用来指定爬虫在网站上的抓取内容，一般都是过滤掉不重要的页面，看一下掘金的，这里的disallow是过滤的意思

第三点：open Graph 官网https://ogp.me/，其实也就是让网页在分享到社交平台（微信、微博、Twitter 这一些）时，能显示标题、描述、缩略图等信息，而不是只显示一个链接。

这里看一下b站的

第四点：siteMap，其实告诉搜索引擎网站有哪些页面，方便它们抓取和收录，看一下掘金的。

第五点：技术选型使用服务端渲染，开发规范化，使用语义化标签，使用https（SSL证书也挺贵的，这里就不示范了）

实践

以next举例（可以参考下官网https://nextjs.org/docs/app/api-reference/functions/generate-metadata）。

因为seo设置一般都是动态的存储在后端的，可以在后台中动态的更改。

next本身是支持seo优化的，且支持动态的meta信息以及静态的meta信息，只需要在服务端页面 layout或者page中export一个meta对象或者generateMetadata的异步函数，返回一个meta对象。如果是一个对象的化就是静态的，抛出generateMetadata异步函数的化，next在每次服务端渲染生成这个页面时都会执行generateMetadata函数，拿到返回的meta对象。

这里需要注意两点：第一 generateMetadata只能在服务端组件且只能是layout或者page中使用。第二，如果在父级的layout中已经使用了，但是在其对应的子页面中会有另外的seo配置，那么也只需暴露generateMetadata，next会自动将这两个meta对象做一个深合合并（例如博客的文章页面存在此场景）。

// 从后端获取SEO设置并生成metadata
export async function generateMetadata(): Promise<Metadata> {
  const seoSettings = await getSeoSettings();

  if (!seoSettings) {
    return defaultMetadata;
  }

  // 解析keywords字符串为数组
  const keywords = seoSettings.keywords
    ? seoSettings.keywords.split(",").map((k) => k.trim())
    : [];

  // 解析robots字符串
  const robotsConfig = parseRobots(seoSettings.robots);

  // 构建metadata对象
  const metadata: Metadata = {
    title: {
      default: seoSettings.title,
      template: `%s | ${seoSettings.title}`,
    },
    description: seoSettings.description || defaultMetadata.description,
    keywords: keywords.length > 0 ? keywords : defaultMetadata.keywords,
    authors: seoSettings.metaAuthor
      ? [{ name: seoSettings.metaAuthor }]
      : undefined,
    creator: seoSettings.metaAuthor,
    publisher: seoSettings.metaAuthor,
    formatDetection: {
      email: false,
      address: false,
      telephone: false,
    },
    // metadataBase: seoSettings.canonicalUrl
    //   ? new URL(seoSettings.canonicalUrl)
    //   : undefined,
    alternates: seoSettings.canonicalUrl
      ? {
          canonical: seoSettings.canonicalUrl,
        }
      : undefined,
    openGraph: {
      type: "website",
      locale: "zh_CN",
      url: seoSettings.canonicalUrl || undefined,
      title: seoSettings.ogTitle || seoSettings.title,
      description: seoSettings.ogDescription || seoSettings.description || undefined,
      siteName: seoSettings.title,
      images: seoSettings.ogImage
        ? [
            {
              url: seoSettings.ogImage,
              width: 1200,
              height: 630,
              alt: seoSettings.ogTitle || seoSettings.title,
            },
          ]
        : undefined,
    },
    twitter: {
      card: "summary_large_image",
      title: seoSettings.ogTitle || seoSettings.title,
      description: seoSettings.ogDescription || seoSettings.description || undefined,
      images: seoSettings.ogImage ? [seoSettings.ogImage] : undefined,
    },
    robots: robotsConfig,
    icons: {
      icon: "/favicon.ico",
      shortcut: "/favicon-16x16.png",
      apple: "/apple-touch-icon.png",
    },
    manifest: "/site.webmanifest",
  };

  return metadata;
}

// 解析robots字符串为Next.js的robots配置
function parseRobots(robots: string | null): Metadata["robots"] {
  if (!robots) {
    return {
      index: true,
      follow: true,
      googleBot: {
        index: true,
        follow: true,
        "max-video-preview": -1,
        "max-image-preview": "large",
        "max-snippet": -1,
      },
    };
  }

  const robotsLower = robots.toLowerCase();
  const index = !robotsLower.includes("noindex");
  const follow = !robotsLower.includes("nofollow");

  return {
    index,
    follow,
    googleBot: {
      index,
      follow,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  };
}

                                                                                             seo综合查询

还是以掘金举例，工具网站  https://seo.chinaz.com/