什么是 Headless CMS？

Headless CMS 是一种将内容管理与网站设计和开发分离的方式。它只负责管理和处理网站的内容，而不包括网站的显示和交互功能。这种分离方式使得前端开发人员可以更加专注于设计和开发，而不必为操纵复杂的 CMS 系统而分心。

Headless CMS 和传统的 CMS 最大的区别就是前者的数据输出是以纯粹的 API 形式呈现，你可以通过 API 来获取到需要的数据，自由地将这些数据应用于你所开发的多种渠道。例如网站、手机应用程序、大屏幕导览系统等。这种多样性和易用性使得 Headless CMS 在内容管理上成为了一个新的时代。

为什么使用 Headless CMS？

传统的 CMS 运作方式是将内容以面向展示的形式储存在数据库里。这样虽然可以方便前端工程师的展示数据，但也带来了大量的静态标签。引用静态标签，很难优化这些标签，使链接不易被搜索引擎爬虫识别。

headless CMS 可以根据页面的具体情况，输出完全符合页面标准的搜索引擎优化标签，从而在搜索引擎排名上得到良好的表现。

headless CMS 还可以方便机构在同一页面内管理多种多参数的内容，比传统 CMS 更加优秀。

如何使用 Headless CMS 来实现 SEO 友好的网站结构？

步骤1：选择合适的 Headless CMS

目前市面上 Headless CMS 很多，开源系统有 Strapi、Directus、Cockpit，付费系统有 Contentful、prismic、sanity 等系统。我们需要根据项目需求来选择适合的 Headless CMS。

例如，对于一个简单的博客网站，可以选择 Strapi 或 Directus。对于一个需要高级功能的大型网站，可以选择 Contentful。

步骤2：配置字段和数据类型

Headless CMS 最重要的功能是为前端开发人员处理好 API 数据源，因此需要考虑数据类型和字段配置的问题。

例如，对于一个简单的新闻网站，网站需要的数据包括新闻标题、新闻发布时间、新闻正文、新闻作者等。这些数据可以通过 Headless CMS 来管理和存储。并在数据项中定义数据类型、验证规则等。

步骤3：设计网站页面

在新闻列表中，每个新闻需要展示的内容包括新闻标题、新闻发布时间等。因此，需要在 Headless CMS 中设置合适的字段，利用 API 进行调用。

例如，在 Strapi 中创建一个名为 “news” 的数据类型，同时定义一些字段，例如 title、published_at、author、content 等字段。

步骤4：创建网站页面模板和内容模板

在 Headless CMS 中创建好 API 数据源后，需要定义网站的页面模板和内容模板。前端工程师利用模板工具将 API 数据呈现成一个友好的界面，同时定义网页标签和元标签，从而达到优化 SEO 的目的。

例如，可以利用 React 创建一个页面模板，将数据从 Strapi API 上获取并渲染成一个友好的新闻列表页面。并且根据网页需要将合适的优化标签渲染到页面中。

一般选用 Strapi 和 Directus 的组合操作。使用 Strapi 管理 API 数据源，在 Vitepress 中修改细节。

步骤5：测试和部署

在完成以上工作后，可以利用本地服务器测试网站的页面是否正常运行。之后，将网站发布到正式环境中，并配合 SEO 策略进行管理。

结论

Headless CMS 的出现，让我们不再拘束于传统的 CMS 系统中，在数据输出上更加具备自由和多样性。同时，还能实现 SEO 友好的网站结构。

当然，使用 Headless CMS 带来的好处不仅如此。它也可以提高博客的内容生产效率，也可以简化后台的开发和维护过程。在未来的网站设计中，Headless CMS 无疑将是一个有越来越大的助力。

示例代码

下面是 Strapi API 返回的数据示例。

-
  -
    -------- ----- -----------------------------
    --------------- -------------
    --------- -------
    ---------- -------- --------- -------------------------------- ------- --------
  --
  -
    -------- ----------------------
    --------------- -------------
    --------- -------
    ---------- ------------------ ---- - -- - -- ----------------------
  -
-

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6732d2100bc820c5823f0720

使用 Headless CMS 实现 SEO 友好的网站结构