前言
SEO（搜索引擎优化）是一个相对于前端而言比较陌生的一个概念。它可以使得网站更容易被搜索引擎识别和收录，从而提高网站的曝光率和流量。
在开发动态页面时，我们通常需要注意以下几点来实现 SEO 友好：
- 静态化网站内容
- 手动提供元数据
- 选用合适的 URL 路径
- 确保 HTML 结构合法且语义正确
- 为页面设置合适的标题和描述
Next.js 是一个流行的 React.js 框架，它可以使得我们在开发时轻松地实现以上点。在本文中，我们将学习如何使用 Next.js 制作 SEO 友好的动态页面。
静态化网站内容
通常，搜索引擎检索的是静态 HTML 页面，而非动态页面。因此，我们需要将我们的网站内容静态化。
在 Next.js 中可以使用 getStaticProps 来获取动态数据，并生成静态 HTML。例如：
-- -------------------- ---- -------
------ ----- -------- ---------------- -
----- --- - ----- --------------------------------------
----- ----- - ----- ----------
------ -
------ -
------
--
-
-上面的代码将获取到的数据 posts 保存在静态 HTML 页面中。进行这个操作后，这个页面将不再依赖数据库以及服务端的其他环境设置，从而符合搜索引擎的检索条件。
手动提供元数据
搜索引擎使用元数据来显示摘要、标题及其他信息。你可以使用 Head 组件为你的页面提供元数据。例如：
-- -------------------- ---- -------
------ ---- ---- -----------
-------- ------ -
------ -
-----
------
-----------------
----- ------------------ ---------------------------
-------
------------------
------
-
-
------ ------- ----这个 Head 组件将会向客户端返回如下 HTML：
<head> <title>首页</title> <meta name="description" content="欢迎来到我的网站！"></meta> </head>
选用合适的 URL 路径
搜索引擎针对 URL 的结构也有自己的检索策略。一个合适的 URL 路径可以让你的页面更容易被搜索引擎识别和收录。在 Next.js 中，你可以使用 getStaticPaths 方法与 getStaticProps 方法一起使用来生成静态路径：
-- -------------------- ---- -------
------ ----- -------- ---------------- -
------ -
------ -
- ------- - --- --- - --
- ------- - --- --- - --
- ------- - --- --- - --
--
--------- ------
-
-
------ ----- -------- ---------------- ------ -- -
----- -- - ---------
----- --- - ----- --------------------------------------------
----- ---- - ----- ----------
------ -
------ -
-----
--
-
-在上面的代码中，getStaticPaths 方法返回的 paths 数组包含了所有可能的 URL 路径。由于 fallback 参数被设置成了 false，任何其他的 URL 路径将会被 404。
确保 HTML 结构合法且语义正确
虽然搜索引擎对于 HTML 结构的要求并不如以前那样苛刻，但是它们仍然会优先选择那些 HTML 结构合法且语义正确的页面。在 Next.js 中，你可以使用 React 的 semantic HTML 来保证 HTML 结构具有语义性。例如：
-- -------------------- ---- -------
-------- ---------- ---- -- -
------ -
---------
---------------------
---- ---------------- ---------------- --
---------------------------------
----------
-
-
------ ------- --------在上面的代码中，我们使用了 semantic HTML 来区分了页面中的头部、主体和页脚。这个语义性，使得我们的页面更容易被搜索引擎理解。
为页面设置合适的标题和描述
在上面的代码中，我们已经为我们的页面设置了标题和描述。但是，如果我们的页面是动态生成的，那么我们就需要动态地设置标题和描述。在 Next.js 中，我们可以动态设置标题和描述，例如：
-- -------------------- ---- -------
------ - --------- - ---- -------------
------ ---- ---- -----------
-------- ---------- ---- -- -
----- ------ - -----------
------ -
-----
------
---------------------------
----- ------------------ ----------------------------------
-------
---------------------
---- ---------------- ---------------- --
---------------------------------
------
-
-
------ ----- -------- ---------------- ------ -- -
----- -- - ---------
----- --- - ----- --------------------------------------------
----- ---- - ----- ----------
------ -
------ -
-----
--
-
-
------ ----- -------- ---------------- -
----- --- - ----- --------------------------------------
----- ----- - ----- ----------
----- ----- - -------------- -- -
------ -
------- - --- ------- --
-
--
------ -
------
--------- ------
-
-
------ ------- --------在上面的代码中，我们从 API 获取了文章 post，并在 Head 中动态设置了文章 title 和 meta 标签。
总结
在本文中，我们学习了如何使用 Next.js 制作 SEO 友好的动态页面。我们了解到了静态化页面、手动提供元数据、选用合适的 URL 路径、确保 HTML 结构合法且语义正确，以及为页面设置合适的标题和描述，这些操作可以使得我们的页面更容易被搜索引擎识别和收录。希望本文能够帮助你更好地了解如何使用 Next.js 制作 SEO 友好的动态页面。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485b3ff48841e9894471634