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

Question

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

假设我想在

/contact

创建一个联系我们页面

在新框架中，我应该在

contact

目录中创建一个名为

app

的文件夹。按照惯例，我应该在其中创建一个名为

page.js

的页面。

现在我需要创建一个表单，当然需要管理它的状态。因此我应该使用

useState

或来自 React 的其他钩子。

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

'use client'

指令标记它。

但我不希望组件在客户端呈现。我需要我的

/contact

页面被搜索引擎索引。

我该怎么办？

Answer 1

use client

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

它与 Next.js 的早期版本一样工作。

它将在服务器上渲染并在客户端上进行水合。

Answer 2

您不能在服务器组件上使用钩子。服务器组件在服务器端呈现，因此不能像客户端组件那样保存状态。尝试将表单移动到新的客户端组件中，然后从

/contact

-page

渲染它

page.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
}

Answer 3

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

了解

app

目录使用阅读文档

主要变化

Next.js 不再删除头部的重复标签。这意味着我们 不能再以同样的方式使用。展望未来我们 只会使用

<NextSeo />

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

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

Answer 4

正如 Sefa Kocaaga 回答的那样，它的工作原理与以前的版本类似。它在服务器端渲染并在客户端进行水化。您可以在这里阅读相关内容。

https://nextjs.org/docs/getting-started/react-essentials#client-components

Answer 5

我有一个单页应用程序，主要是app/page.js，我有同样的问题，如果我使用use client，我在这个页面中使用useEffect和Usestat以及帧运动，它会影响这个页面的seo吗？