在目前互联网环境下，网站的搜索引擎优化（SEO）成为了一个不容忽视的因素。如何让搜索引擎更好地了解你的网站，让你的网站更容易地被搜索引擎收录是每个网站开发者必须面对的问题。在这篇文章中，我们将介绍如何使用 Headless CMS（无头 CMS）和 Nuxt.js 构建 SEO 友好的网站。
Headless CMS 简介
Headless CMS 是相对于传统的 CMS（内容管理系统）而言，是一种更灵活、更开放的 CMS，它专注于内容的管理和提供 API 接口，不负责渲染页面，这样就可以将前端和后端分离开来。通过 Headless CMS，我们可以在不失去数据管理方便性的情况下，更好地与前端开发对接，实现灵活、高效的开发。
Nuxt.js 简介
Nuxt.js 是基于 Vue.js 的一个服务端渲染框架，可以生成静态的页面，支持自动化路由、代码拆分、Webpack 打包等特性，让我们更加容易开发出高质量、稳定的网站。可以说，Nuxt.js 已经是构建网站所必不可少的工具之一。
如何使用 Headless CMS 和 Nuxt.js 开发 SEO 友好的网站
接下来，我们将详细介绍如何使用 Headless CMS 和 Nuxt.js 开发 SEO 友好的网站。
步骤一：选择 Headless CMS
要使用 Headless CMS，首先需要选择适合自己的 Headless CMS。目前市场上有很多的 Headless CMS 可供选择，包括 Strapi、Contentful、Directus、Prismic、GraphCMS 等。这里我们以 Strapi 为例。
1.1 安装 Strapi
首先，我们需要安装 Strapi。可以使用 npm 命令安装：
npm install strapi@beta -g
1.2 创建 Strapi 项目
安装完成后，我们需要创建一个 Strapi 项目。可以使用 strapi 命令进行创建：
strapi new my-project
1.3 数据模型的设计
在创建好 Strapi 项目后，我们需要设计数据模型。在这里，我们以一个博客网站为例，假设我们需要设计文章、分类、标签三个数据模型。
首先，我们需要创建分类模型，执行下面命令：
strapi generate:api category name:string
接着，我们需要创建标签模型，执行下面命令：
strapi generate:api tag name:string
最后，我们需要创建文章模型，执行下面命令：
strapi generate:api article title:string content:text category:relation:nature tag:relation:nature
步骤二：将 Strapi 连接到 Nuxt.js
在完成了 Headless CMS 的搭建后，我们还需要将 Strapi 与 Nuxt.js 连接起来。
2.1 安装 '@nuxtjs/strapi' 模块
在 Nuxt.js 项目中，我们需要安装 '@nuxtjs/strapi' 模块：
npm install @nuxtjs/strapi --save
2.2 配置 '@nuxtjs/strapi' 模块
安装完成后，在 nuxt.config.js 的模块中添加如下配置：
modules: [
'@nuxtjs/strapi'
],
strapi: {
entities: ['articles', 'categories', 'tags'],
url: 'http://localhost:1337'
}其中，entities 指定了所需要的实体（也就是数据模型），url 指定了 Strapi 的地址。
步骤三：在 Nuxt.js 中使用 Strapi 的数据
在将 Strapi 与 Nuxt.js 连接后，我们需要在 Nuxt.js 中使用 Strapi 的数据。
3.1 获取数据
我们可以通过以下方式获取 Strapi 中的数据：
export default {
asyncData({ $strapi }) {
return $strapi.find('articles');
}
}上述代码将会返回所有的文章数据。
3.2 获取指定的数据
如果需要获取指定的数据，可以使用以下方式：
export default {
asyncData({ $strapi, params }) {
return $strapi.findOne('articles', params.id);
}
}上述代码将会返回 id 参数对应的文章数据。
步骤四：SEO 优化
在完成了数据的获取后，我们需要对网站进行 SEO 优化。
4.1 Meta 标签
我们可以使用 Nuxt.js 的 Head 组件来添加 Meta 标签：
head: {
title: 'Title',
meta: [
{ hid: 'description', name: 'description', content: 'Description' }
]
}上述代码将会添加一个 description 的 Meta 标签。
4.2 生成静态站点
在将 Meta 标签添加进网站中后，我们还需要将 Nuxt.js 生成的动态站点生成为静态网站才可以被搜索引擎收录。可以使用以下方式生成静态网站：
npm run generate
生成的静态网站可以直接上传至服务器，并被搜索引擎收录。
示例代码
下面是使用 Strapi 和 Nuxt.js 开发的一个简单的博客网站，包括文章列表页、文章详情页以及分类和标签列表页。网站使用了 Headless CMS 和 Nuxt.js 的优秀特性，包括数据分离、自动化路由、服务端渲染和静态页面生成等，旨在为开发者提供一个参考和学习的示例。
Strapi 配置
在 Strapi 中创建三个数据模型：Category、Tag 和 Article。
Category
- name：string
Tag
- name：string
Article
- title：string
- content：text
- category：关联至 Category
- tag：关联至 Tag
Nuxt.js 配置
在 Nuxt.js 中安装 '@nuxtjs/strapi' 模块并配置。
npm install @nuxtjs/strapi --save
// nuxt.config.js
modules: [
'@nuxtjs/strapi'
],
strapi: {
entities: ['articles', 'categories', 'tags'],
url: 'http://localhost:1337'
},
generate: {
routes: function() {
const categories = strapi.query('category').find();
const tags = strapi.query('tag').find();
const articles = strapi.query('article').find();
return Promise.all([categories, tags, articles]).then(values => {
const routes = [];
const categoryRoutes = values[0].map(category => `/category/${category.id}`);
const tagRoutes = values[1].map(tag => `/tag/${tag.id}`);
const articleRoutes = values[2].map(article => `/article/${article.id}`);
routes.push(...categoryRoutes, ...tagRoutes, ...articleRoutes);
return routes;
});
}
},页面模板
ArticleList.vue
文章列表页。
<template>
<div>
<h3>文章列表</h3>
<ul>
<li v-for="article in articles" :key="article.id">
<nuxt-link :to="'/article/' + article.id">{{article.title}}</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
export default {
async asyncData({ $strapi }) {
const articles = await $strapi.find('articles');
return { articles };
}
};
</script>Article.vue
文章详情页。
<template>
<div>
<h3>{{article.title}}</h3>
<div v-html="article.content"></div>
</div>
</template>
<script>
export default {
async asyncData({ $strapi, params }) {
const article = await $strapi.findOne('articles', params.id, ['category', 'tag']);
return { article };
}
};
</script>CategoryList.vue
分类列表页。
<template>
<div>
<h3>分类列表</h3>
<ul>
<li v-for="category in categories" :key="category.id">
<nuxt-link :to="'/category/' + category.id">{{category.name}}</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
export default {
async asyncData({ $strapi }) {
const categories = await $strapi.find('categories');
return { categories };
}
};
</script>Category.vue
分类详情页。
<template>
<div>
<h3>{{category.name}}</h3>
<ul>
<li v-for="article in category.articles" :key="article.id">
<nuxt-link :to="'/article/' + article.id">{{article.title}}</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
export default {
async asyncData({ $strapi, params }) {
const category = await $strapi.findOne('categories', params.id, ['articles']);
return { category };
}
};
</script>TagList.vue
标签列表页。
<template>
<div>
<h3>标签列表</h3>
<ul>
<li v-for="tag in tags" :key="tag.id">
<nuxt-link :to="'/tag/' + tag.id">{{tag.name}}</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
export default {
async asyncData({ $strapi }) {
const tags = await $strapi.find('tags');
return { tags };
}
};
</script>Tag.vue
标签详情页。
<template>
<div>
<h3>{{tag.name}}</h3>
<ul>
<li v-for="article in tag.articles" :key="article.id">
<nuxt-link :to="'/article/' + article.id">{{article.title}}</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
export default {
async asyncData({ $strapi, params }) {
const tag = await $strapi.findOne('tags', params.id, ['articles']);
return { tag };
}
};
</script>总结
在这篇文章中，我们介绍了如何用 Headless CMS 和 Nuxt.js 构建 SEO 友好的网站，并且提供了一个示例网站。使用 Headless CMS 和 Nuxt.js 可以使得网站的开发更灵活、更高效，而且可以让搜索引擎更好地理解和收录网站，帮助我们最大程度地提升网站的流量和排名。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ac7068add4f0e0ff6057af