diff --git a/chinese/articles/nextjs-seo.md b/chinese/articles/nextjs-seo.md
index d2394ee7b..2b57564fd 100644
--- a/chinese/articles/nextjs-seo.md
+++ b/chinese/articles/nextjs-seo.md
@@ -1,218 +1,217 @@
-> - 原文地址：[Next.js SEO for Developers – How to Build Highly Performant Apps with Next](https://www.freecodecamp.org/news/nextjs-seo/)
-> - 原文作者：[Scott Gary](https://www.freecodecamp.org/news/author/scott-gary/)
-> - 译者：
-> - 校对者：
+> - 原文地址：[Next.js SEO for Developers – How to Build Highly Performant Apps with Next](https://www.freecodecamp.org/news/nextjs-seo/)
+> - 原文作者：[Scott Gary](https://www.freecodecamp.org/news/author/scott-gary/)
+> - 译者：[luojiyin](https://github.com/luojiyin1987)
+> - 校对者：
-Next.js is a popular React-based web framework that has gained popularity and a growing community in recent years. It's a powerful tool for building fast and SEO-friendly web applications with dynamic pages that work great on mobile devices.
+Next.js 是一个流行的基于 React 的网络框架，近年来获得了流行和不断增长的社区。它是一个强大的工具，用于构建快速和对 SEO 友好的网络应用，其动态页面在移动设备上运行良好。
-Due to the complex nature of isomorphic system design, Next.js SEO can be a tricky topic to get your head around. Especially if you're coming from traditional React apps and you're relying solely on documentation.
+由于同构系统设计的复杂性质，Next.js 的 SEO 可能是一个棘手的话题，让你头疼。特别是如果你来自传统的 React 应用程序，而且你只依赖文档。
-With its built-in support for server-side rendering, static site generation, and now React server components, Next.js provides a robust platform for achieving quality SEO web metrics in your web application. It also helps you deliver exceptional user experiences across multiple pages in Node and React apps while making them SEO friendly.
+凭借其对服务器端渲染、静态网站生成以及现在的 React 服务器组件的内置支持，Next.js 提供了一个强大的平台，可以在你的网络应用中实现高质量的 SEO 网络指标。它还可以帮助你在 Node 和 React 应用程序中的多个页面上提供卓越的用户体验，同时使它们对 SEO 友好。
-## Why Should You Learn NextJS for Front End Development?
+## 为什么要学习 NextJS 用于前端开发？
-In short, the newest version of NextJS is an open source platform that addresses a lot of rendering issues that React currently has. I wrote this article because a lot of front end developers get mad at me :-D.
+简而言之，最新版本的 NextJS 是一个开源平台，解决了 React 目前存在的很多渲染问题。我写这篇文章是因为很多前端开发者对我很生气:-D。
-They spend 6-9 months developing a React App, and then I have to ask them to refactor their code.
+他们花了 6-9 个月开发一个 React App，然后我不得不要求他们重构代码。
-Next.js avoids a lot of rending issues – it makes it very easy for search engines to understand what your website is all about.
+Next.js 避免了很多渲染问题。它让搜索引擎非常容易理解你的网站是怎么回事。
-### Who Will get the most out of this article?
+### 谁会从这篇文章中得到最大的收获？
-This will be very helpful to you if you're a marketer or more advanced developer who's experiencing SEO issues.
+如果你是一个营销人员或遇到 SEO 问题的更高级的开发人员，这将对你很有帮助。
-However newer developers are welcome to review this info as well, as it will help you in the long term.
+然而，也欢迎新的开发者查看这些信息，因为它将对你有长期的帮助。
-## How Should You Render Your Next JS Web Page Application?
+## 你应该如何渲染你的下一个 JS 网页应用程序？
-I've personally reviewed a ton of theses websites from my consultancy [OhMyCrawl](https://www.ohmycrawl.com/) and made a video overview to help understand the benefits of using frameworks such as Next.js for SEO:
+我个人从我的咨询公司[OhMyCrawl](https://www.ohmycrawl.com/)查看了大量的这些网站，并制作了一个视频概述，以帮助了解使用 Next.js 等框架对 SEO 的好处：
-## How is Next SEO Different from Other Frameworks?
+## Next SEO 与其他框架有什么不同？
-Next SEO sets itself apart by streamlining so many features and free tools into a well-organized package that you can easily digest and apply in your single page applications. Next does a great job when it comes to tasks such as search engine optimization, image optimization, and minimizing cumulative layout shift.
+Next SEO 通过将如此多的功能和免费工具精简到一个组织良好的软件包中，使你可以轻松地消化和应用于你的单页应用，从而使自己与众不同。当涉及到搜索引擎优化、图像优化和最小化累积布局转移等任务时，Next 做得很好。
-The benefits of Next.js SEO don't stop there. We’ll be covering many of the goodies that Next.js brings to the table related to search engines, old and new.
+Next.js SEO 的好处还不止于此。我们将介绍 Next.js 带来的许多与搜索引擎有关的好东西，无论新旧。
-## Search Engines, SSR, and SSG Concepts Are Evolving
+## 搜索引擎、SSR 和 SSG 的概念在不断发展
-Most developers and SEO experts have become pretty comfortable with the existing page creation strategies and the whole SSR vs SSG paradigm. They've also developed a high level of trust in version 12 of Next.js, which provides a clear cut way to handle these two forms of page generation.
+大多数开发者和 SEO 专家已经对现有的页面创建策略和整个 SSR 与 SSG 范式感到相当满意。他们也对 Next.js 的第 12 版产生了高度的信任，该版本提供了一个清晰的方式来处理这两种形式的页面生成。
-As usual, though, yet another web app paradigm shift is underway, this time in the form of React Server Components (RSCs), which are included by default in Next.js version 13.
+不过，像往常一样，另一个网络应用模式的转变正在进行中，这次是以 React 服务器组件（RSCs）的形式出现的，Next.js 第 13 版中默认包含了这些组件。
-### SEO Concepts Haven’t Changed – Just the Approach
+### SEO 的概念没有改变--只是方法改变了
-Next JS SEO won’t change much conceptually. If you’re looking for good search engine results and organic traffic, the game still revolves around the notion of fast page loads, quick paints, low cumulative layout shifts, and all the rest. Static pages still play a large role as well.
+Nextjs SEO 在概念上不会有太大变化。如果你想获得良好的搜索引擎结果和流量增长，关键仍然是快速载入页面、快速渲染、低累积布局变动等等。静态页面仍然扮演着重要角色。
-But Next.js gives us some pretty cool and novel features that help facilitate excellent search engine metrics, and it’s more than just React Server Components.
+但是，Next.js 提供了一些非常棒而独特的功能，可以帮助我们实现出色的搜索引擎指标，它不仅仅是 React Server Components。
-We'll explore some best practices along with a few different techniques and strategies for achieving great SEO optimization web metrics with Next.js. We'll also see how to take advantage of its unique features to improve your website's search engine visibility and user engagement.
+我们将探讨一些最佳实践，以及使用 Next.js 实现出色的 SEO 优化网络指标的不同技术和策略。我们还将看到如何利用它独特的功能来提高网站的搜索引擎可见性(网页里优先显示)和用户参与度。
-## What’s New With Next.js 13 that Relates to SEO?
+## Next.js 13 有哪些与 SEO 相关的新内容？
-Rather than give you a comprehensive guide to the technical changes found in version 13, we’re going to focus mainly on Next JS SEO related advantages. We'll also look at how you can leverage the best SEO practices to achieve the best possible results in search engines with much less sweat off your back than is typically needed.
+我们不会给你一个关于第 13 版技术变化的全面指南，而是主要关注 Next JS 的 SEO 相关优势。我们还将探讨如何利用最佳的 SEO 实践，在搜索引擎中取得尽可能好的结果，而且比通常所需的汗水少得多。
-The version 13 changes we’ll discuss here are as follows:
+我们将在这里讨论的 Nextjs 13 变化如下：
-- React server components
-- Streaming UI chunks
-- Updated Next Image component
-- Next Font component
+- React 服务器组件
+- UI 的 流动块 (Streaming UI chunks)
+- 升级的 Next 图片组件
+- Next 字体组件
-On top of the existing default SEO properties of Next, these particular upgrades are the cornerstone of Next.js SEO improvements in version 13. Each one is awesome for its own reasons, which we’ll be going over shortly.
+除了 Next.js 默认的 SEO 属性外，这些特定的升级是 Next.js 版本 13 中 SEO 改进的基石。每个升级都有其自身的优点，我们将很快逐个介绍。
-### React Server Components
+### React 服务器组件
-RSCs allow for a more fine-grained approach to rendering on both the client and the server.
+RSCs 允许在客户端和服务器上采用更精细的渲染方式。
-Rather than being forced to decide whether to render an entire page on the client or server upon user requests, React allows developers to choose whether components should be rendered on the server or the client. This can give you a huge advantage in search engine results pages.
+React 允许开发者选择组件是在服务器上还是在客户端渲染，而不是在用户请求时被迫决定在客户端还是服务器上渲染整个页面。这可以让你在搜索引擎结果页面中获得巨大优势。
-A huge majority of page optimization these days revolves around sending less JavaScript to the client. After all, this is the primary benefit of using pre-rendering and Server Side Rendering to create web pages and HTML pages.
+如今，绝大多数的页面优化都是围绕着减少向客户端发送 JavaScript。毕竟，这是使用预渲染和服务器端渲染来创建网页和 HTML 页面的主要好处。
-RSCs are another tool to help achieve this end and gain as much SEO value from your web pages or single page applications as you can. This helps achieve better SEO by refreshing dynamic data in a React component while leaving the static parts of the page’s content intact.
+RSC 是帮助实现这一目的的另一个工具，并从你的网页或单页应用程序中获得尽可能多的 SEO 价值。这有助于通过刷新 React 组件中的动态数据，同时保持页面内容的静态部分不变，从而实现更好的 SEO。
-### Streaming UI Chunks
+### 流式 UI 块
-Next.js SEO made a huge leap adding RSC to the mix, and streaming UI chunks is the cherry on top. Streaming UI is a similar spin-off of a new and growing design pattern called “the island architecture,” which strives to send as little code to the client as possible at first load.
+Next.js SEO 在添加 RSC (React Server Components) 的同时，迈出了一大步，而流式 UI(Streaming UI) 代码块则是锦上添花。流式 UI 是一个类似的新兴设计模式，称为 `岛屿架构(the island architecture)`，旨在在首次加载时尽量向客户端发送最少的代码。
-Allowing fine-grained control is great, but why not send a JavaScript-free, fully rendered page to the client, and send the rest later? That’s exactly what streaming UI chunks accomplish.
+允许细粒度的控制非常好，但为什么不向客户端发送一个无需 JavaScript 的完全渲染的页面，然后再发送剩余的内容呢？这正是流式 UI 代码块所实现的目标。
-When Next.js renders a page on the server, the page typically comes with all the JavaScript bundled up and sent along with it. The ability to stream chunks of data eliminates this need, and allows an extremely tiny static page to be sent to the client, significantly improving web metrics such as first contentful paint and overall page speed.
+当 Next.js 在服务器端渲染页面时，通常会将页面的所有 JavaScript 捆绑并与之一起发送。而流式 UI 代码块的引入消除了这种需要，允许向客户端发送一个非常小的静态页面，显著改善了诸如首次内容呈现时间和整体页面速度等网络指标。
-### Next.js 13 App Directory
+### Next.js 13 App 目录
-When you start a new Next.js 13 project, you’ll notice a new directory called **app**. Everything within the app directory is preconfigured to allow for RSCs and streaming UI chunks. You need only create a [loading.js](https://beta.nextjs.org/docs/routing/loading-ui) component, which will wrap the page component entirely and any children within a suspense boundary.
+当你启动一个新的 Next.js 13 项目时，你会注意到一个名为\**app*的新目录。在 app 目录下的所有东西都是预先配置好的，以允许 RSCs 和流媒体 UI 块的出现。你只需要创建一个[loading.js](https://beta.nextjs.org/docs/routing/loading-ui)组件，它将完全包住页面组件和悬念边界内的任何子节点。
-You can achieve an _even more_ granular loading pattern by manually creating the suspense boundaries yourself, essentially allowing for unlimited control over what gets loaded upon the initial request.
+你可以通过自己手动创建悬念边界来实现更精细的加载模式，基本上可以无限地控制初始请求时加载的内容。
-The steps for streaming UI chunks go something like this:
+流式 UI 代码块的步骤大致如下：
-1. User makes initial request.
-2. Barebones HTML page is rendered and sent to the client.
-3. JavaScript bundles are being prepared on the server.
-4. A page section requiring JavaScript becomes visible in the client browser.
-5. JavaScript bundle for only that component is sent to the client.
+用户发起初始请求。
+渲染并发送基本的 HTML 页面给客户端。
+服务器准备 JavaScript 捆绑文件。
+在客户端浏览器中显示需要 JavaScript 的页面部分。
+仅将该组件所需的 JavaScript 捆绑文件发送给客户端。
+这种新的工具对于技术性 SEO 具有重要影响，它使得更具交互性的页面能够与静态页面竞争，提高页面载入速度和其他在搜索引擎中用作排名因素的网络指标。
-This new tooling has important implications for technical SEO by allowing more interactive pages to compete with static pages in regards to page load speed and other web metrics that are used as ranking factors in search results by search engines.
+### 升级的 Next Image 组件
-### Updated Next Image Component
+Next.js SEO 领域的另一个重要升级是图片组件(Image component)。虽然它被低估了，但在我看来，最大的改进是利用了原生的懒加载。
-Another important upgrade to the Next.js SEO sphere is the Image component. Although it’s been somewhat understated, the biggest improvement in my opinion is the utilization of native lazy loading.
+浏览器对本地懒加载的支持已经有一段时间了，为这个功能添加额外的 JavaScript 只是浪费带宽而已。
-Browsers have had great support for native lazy loading for some time now, and including extra JavaScript for this feature is simply a waste of bandwidth.
+其他一些对 SEO 有很大帮助的改进是：
-A few other great improvement for SEO are:
+- 默认需要 alt 标签。
+- 更好的验证，以确定涉及无效属性的错误。
+- 由于有了一个更像 HTML 的界面，更容易进行样式设计。
-- Required alt tag by default.
-- Better validation to pinpoint errors involving invalid properties.
-- More easily styled due to a more HTML-like interface.
+总的来说，新的图片组件被简化和精简了，而在编程领域，简单的东西几乎总是更好。
-Overall, the new Image component is simplified and slimmed down, and in the programming world simpler is almost always better.
+### Next Font 组件
-### The Next Font Component
+字体组件(font component)对 Next.js 的 SEO 来说是一个巨大的胜利，它肯定会帮助减轻未来的许多头痛问题。任何有经验的开发者都知道，正确配置字体是多么繁琐的事情（在这种情况下，正确不是相对的！）。
-The font component is a huge win for Next.js SEO, and it will certainly help alleviate many headaches in the future. Any experienced developer knows how tedious it can be configuring fonts properly (proper is not relative in this case!).
+由于加载缓慢而导致的累积布局转移是一个常见的困扰，像谷歌这样的搜索引擎已经[公开表示](https://developers.google.com/publisher-tag/guides/minimize-layout-shift)，CLS 是一个重要的网络指标。(CLS 是 Cumulative Layout Shift 的缩写，衡量在网页的整个生命周期内发生的所有意外布局偏移的得分总和。)
-Cumulative layout shifts due to slow loading is a common nuisance, and search engines like Google have [openly stated](https://developers.google.com/publisher-tag/guides/minimize-layout-shift) that CLS is an important web metric.
+根据你所使用的框架（我想到的是 Gatsby），让你的字体有效地预加载可能是很棘手的。一段时间以来，向谷歌等字体库发出外部请求是一个避免不了的丑陋行为，在许多 SPA 应用程序中造成了一个难以管理的瓶颈。
-Depending on the framework you’re working with (Gatsby comes to mind), it can be tricky getting your fonts to preload effectively. Making external requests to font repositories such as Google have been a necessary evil for some time, creating a hard to manage bottleneck in many SPA applications.
+Next Font Component 旨在解决这个问题，它在构建时获取所有的外部字体，并从你自己的域中自我托管它们。字体也被自动优化，并且通过自动利用 CSS **size-adjust(大小调整)** 属性实现了零累积的布局转移。
-The Next Font Component aims to solve this problem by fetching all external fonts at build time, and self-hosting them from your own domain. Fonts are also optimized automatically, and zero cumulative layout shift is accomplished by automatic utilization of the CSS **size-adjust** property.
+## 用 Next.js 完成与 SEO 相关的常见任务
-## Common SEO-Related Tasks with Next.js
+为 Next.js 13 配置常见 SEO 任务时，有几个重要的议题需要考虑。
-There are a few important topics to consider when configuring common Next.js SEO tasks for version 13.
+### Next.js 13 的 SEO
-### Next.js SEO With Version 13
+Nextjs 的 React Head 组件通常被用来给文档头部的(Head)元标签赋值，也可以用来注入结构化数据。
-The Next version of the React Head component has typically been used to assign values to meta tags within the document head and also to inject structured data.
+然而，Nextjs13 中，Head 组件就不复存在了。起初，Next 选择利用一个名为 **head.js** 的特殊文件，其工作方式与 Head 组件类似。在 13.2 版本之后，Next 实现了**Metadata**组件，这是一个更专有的实现，通过轻松填充元标签来解决元数据问题。
-With version 13, however, the Head component goes out the window. At first, Next opted to utilize a special file called **head.js** that works in a similar fashion as the Head component. After version 13.2, Next implemented the **Metadata** component, which is a more proprietary implementation to solving the metadata problem by easily populating meta tags.
+让我们仔细看看这两个常见的 SEO 任务，并检查它们过去是如何处理的，而不是新的 13 版的方式。
-Let’s take a closer look at these two common SEO tasks, and examine how they used to be handled as opposed to the new version 13 way.
+## 如何为搜索引擎优化配置头部标签(head tag)
-## How to Configure the Head Tag for Search Engine Optimization
+在 13 版之前，我们会导入 **Next/Head** 组件，并在网页的 HTML 文件中设置任何必要的元数据值，如标题和描述或其他元标签。
-Prior to version 13, we would import the **Next/Head** component, and set any necessary metadata values such as title and description or other meta tags within the html file of the web page.
-
-A simple example of the Head component in version 12 looks like this:
+12 版中 Head 组件的一个简单例子是这样的：
```js
-import Head from 'next/head'
+import Head from 'next/head';
const structData = {
-'@context': 'https://schema.org',
-'@type': 'BlogPosting',
-headline: 'Learning Next.js SEO',
-description: 'All about Next.js features and more',
-author: [
-{
-'@type': 'Person',
-name: 'Jane Doe',
-},
-],
-datePublished: '2023-02-16T09:00:00.000Z',
+ '@context': 'https://schema.org',
+ '@type': 'BlogPosting',
+ headline: 'Learning Next.js SEO',
+ description: 'All about Next.js features and more',
+ author: [
+ {
+ '@type': 'Person',
+ name: 'Jane Doe'
+ }
+ ],
+ datePublished: '2023-02-16T09:00:00.000Z'
};
function IndexPage() {
-return (
-
-
-
-
My page title
-
-
-
Hello world!
-
+
+
+
My page title
+
+
+
Hello world!
+