如何处理 Next.js 13 中客户端组件的 SEO？答案

【问题标题】：How to handle SEO for client components in Next.js 13?如何处理 Next.js 13 中客户端组件的 SEO？
【发布时间】：2023-01-24 02:34:32
【问题描述】：

我对如何在 Next.js 13 中管理客户端组件的 SEO 感到困惑。

假设我想在 /contact 创建一个联系我们的页面

在新框架中，我应该在app 目录中创建一个名为contact 的文件夹。按照惯例，我应该在其中创建一个名为 page.js 的页面。

现在我需要创建一个表单，当然需要管理它的状态。因此，我应该使用 useState 或来自 React 的其他钩子。

但是当我这样做时，Next.js 编译器会抱怨它是一个服务器组件，如果我想在客户端使用它，我应该在顶部用 'use client' 指令标记它。

但我不希望组件在客户端呈现。我需要我的 /contact 页面被搜索引擎索引。

我应该怎么办？

【问题讨论】：

Client components 仍在服务器上预渲染。但与服务器组件不同的是，它们也会在客户端得到补充。只要您的 SEO 逻辑不在仅客户端代码（useEffect 内）中处理，就不会有任何问题。

标签： next.js seo server-side-rendering

【解决方案1】：

您不能在服务器组件上使用挂钩。服务器组件在服务器端呈现，因此不能像客户端组件那样保持状态。尝试将表单移动到一个新的客户端组件中，并从 /contact 页面呈现它

页面.js

const ContactPage = () => {
  // set your SEO headers etc here
  return (
    <CustomForm />
  )
}

自定义表单.jsx

'use client'
const CustomForm = () => {
  // Handle your state and form rendering in this component
}

【讨论】：

谢谢回答。但是您似乎没有正确理解我的问题。由于 SEO，我说的是在服务器上呈现客户端组件。
你不能在服务器端渲染基于状态的东西。在服务器上呈现 SEO 关键内容，在客户端呈现基于状态的内容
添加示例，看看是否有帮助

【解决方案2】：

你可以使用 next-seo npm 包。你可以找到普通页面的例子。

对于app目录使用read the docs

主要变化

Next.js 不再删除头部的重复标签。这意味着我们不能再以同样的方式使用。前进的我们将仅使用<NextSeo />

head.js 目前不支持没有 src="" 的标签。所以对于 JSON-LD 组件，他们现在必须通过页面添加。这将导致他们被添加到页面的。这对于 SEO 来说是 100% 可以的，而不是担心。谷歌证实了这一点。我也验证了这一点使用模式工具。

Next.js 不再自动将下面的标签添加到您的您可能需要的应用程序。我建议将它们添加到您的根标签中的布局。

【讨论】：

【解决方案3】：

use client 并不意味着您的组件将仅在客户端呈现。

它与以前版本的 Next.js 一样工作。

它将在服务器上呈现并在客户端上混合。

【讨论】：