Nuxt.js SEO最好的实践
这篇文章中，我们将学习最好的方法来确保你的Nuxt应用正确地配置搜索引擎排名。
**免责声明**：这篇文章不是一份SEO的指南或者关于如果在Google获得良好排名的指南。这是一篇技术类文章，关于如果最好地设置你的Nuxt应用中的元素标签和重定向，这会改善SEO。
Nuxt.js怎么帮助你改善SEO
在我们开始之前，让我们快速的看下Nuxt是什么以及它能怎么帮助你将SEO的用途融入进去。
单页面应用不能设置SEO
通常使用Vue.js，你会常见一个单页面应用。那是纯的JavaScript生成的应用，只有一份文件和空白的index.html。内容在JavaScript已经初始化加载后被加载到index.html中，并且JavaScript也需要关注路由的切换。
SPAs对于创建简洁优雅的UI比较好，但是需要使用SEO时，单页面应用不是一个好主意，因为他们不会初始化内容。对于Google和其他爬虫（包含社交媒体爬虫，比如Facebook），这让他们安排去你的网站和正确地在搜索结果中展示变得困难。
Nuxt.js提供了简单的方式创建一个通用应用
一个通用应用会在web服务器上进行预加载，并且为每个你应用中的路由传送渲染好的HRML作为响应给浏览器，以此来改进SEO，让加载更快，随之而来的有很多其他好处。
对于一个通用的应用，在页面上有类似<title>标签和<meta>标签在<head>中，有<h1>标签在<body>中，在任何JavaScript加载之前。那些标签帮助爬虫确定了页面上有什么。
Nuxt.js为你的页面如何处理head部分
Nuxt使用了一个叫vue-meta的库来处理每个页面中的<head>元素。页面只是Nuxt对路由的术语，都存放在页面文件夹中。
在你的应用页面中，Nuxt给我们三种方式来配置<head>元素。让我们看下。
给所有页面设置默认的元素标签
整个应用中的不同页面共享一些想呕吐那个的元标签并不罕见。Nuxt通过在nuxt.config.js文件中设置head属性让你给每个页面设置默认的值。
module.exprots = {
head: {
titleTemplates: '%s - Nuxt.js',
meta: [ // Each object in this array is its own meta tag
{ charset: 'utf-8'},
{ name: 'viewport', content: 'width=device-width, initialscale=1'},
{ hid: 'description', name: 'description', content: 'Meta description'}
]
}
};
点击这里来查看所有你可以再head属性中定义的所有属性。
注意： Nuxt.js使用head作为属性的名字。vue-meta使用metaInfo。这是相同的属性
给你的页面单独地设置元标签
在你的每个Nuxt页面中，你可以定义一个head方法。你可以给单独的页面手动自定义head标签。Nuxt将会覆盖你在nuxt.config.js中设置的默认值。
这里有一个About.vue文件的例子。在head方法中有它自己的元标签。
<template>
<h1>About Page</h1>
</template>
<script>
export default {
head () {
return {
title: 'About Us - Nuxt.js',
meta: [
{ hid: 'description', name: 'description', content: 'About our company Nuxt.js ' }
]
}
}
}
</script>
给你动态页面设置元标签
在动态页面中，你可以更自由地定义你的元标签。那些一个路由可以被渲染成不同的页面。用户的介绍页面可能是一个例子。
动态路由被在用一个下划线修饰的.vue的组件或者目录下被定义。
pages/
--| users/
-----| _username.vue
这会生成如下的Vue.js路由代码：
router: {
routes: [{
name: 'users-id',
path: '/users/:username?',
component: 'pages/users/_username.vue'
}]
}
在head方法中，你可以用this来访问组件数据。你可以使用你可以访问this属性中的数据来自定义用你组件中的数据来渲染元标签。
这里有个例子，关于说明用户介绍页面怎么渲染元标签：
<script>
head () {
let user = this.user;
return {
title: `${user.fullName} @(${user.userName}) - Nuxt.js`,
meta: [{
hid: `iOSUrl`,
property: 'al:ios:url',
content: `myapp://user?screen_name=${user.userName}`
},
{
hid: `description`,
name: 'description',
content: `${user.fullName}'s public profile at Nuxt.js`
}]
}
}
</script>
hid是什么，它怎么帮助SEO的？
你可能已经注意到上面在元标签例子中的hid属性。那是用来帮助缓和默认vue-meta的行为的属性。
通常默认，当你使用vue-meta，它会创建重复的标签而不是替代原有的标签。但是Google在爬取你的网站时会对你有多个重复标签进行处罚，所以最好的方式通常会在每个元标签上使用独特的hid属性来辨认它们是唯一的。有了hid属性会给vue-meta一个信号来替换标签而不是重新创建一个。
点击这里来学习更多关于重复的元标签，以及hid是怎么帮助你避免它们的。
Nuxt.js处理重定向
根据HubSpot，一个301的重定向是从一个URL到另一个的永久性的重定向。301重定向发送给网站访问者和搜索引擎不同的URL，而不是它们原来手动输入到浏览器或者在搜索引擎结果页面选择的那个URL。
当你的网站结构发生变化并且你希望保持原始链接的排名能力时，通常会使用301重定向。
Nuxt通过设置在你的nuxt.config.js中设置serverMiddleware属性来帮助你处理这个案例。serverMiddleware属性帮助你设置中间层，它将在页面在服务端被渲染时运行。
这里有使用这个属性设置了一个方法来为你的应用处理301重定向的例子。
module.exprts = {
serverMiddleware: [
'~/servermiddleware/seo.js'
]
};
你可以再名为'/310.json'的文件中定义需要重定向的路由，并将其导入seo.js中间件中。
[
{ "from": "/old", "to": "/new" },
{ "from": "/veryold", "to": "/verynew" },
{ "from": "/too-old", "to": "/new" }
]
然后，你就有了通过运行你在301.json中定义的路由的文件，并且它会为每一个返回301响应以及相应的HTTP标签头。
const redirects = require('../301.json');
module.exports = function (req, res, next) {
const redirect = redirects.find(r => r.from === req.url);
if (redirect) {
console.log(`redirect: ${redirect.from} => ${redirect.to}`);
res.writeHead(301, { Location: redirect.to });
res.end();
} else {
next();
}
}
点击这里学习更多关于Nuxt.js中间件以及它如何帮助你不仅仅是重定向。
当在SPA模式下渲染你应用的SEO效果
在Nuxt应用中有多个构建模式。你可以选择用universal或spa渲染你的应用。
如果你选择了用spa模式渲染你的应用时，在<head>中全部标签的管理效果是怎么样的？
由于服务端渲染没有发生，在页面上即将不会获得任何有内容初始化的好处。vue-meta仍然处理这<head>，但是如果你用单页面应用模式渲染你的应用，页面上没有内容，因为所有的标签将在JavaScript被加载后执行。唯一的影响纯粹是前端。例如在用户更新了页面后更新标题标签。
结论
Nuxt让你可以控制在通用应用程序中如何呈现
元素，这有助于SEO。你在nuxt.config.js中有很多选项来设置全局的默认值。并且你在每个需要更灵活自定义的独立页面中也有访问head方法的权限。最后，你可以设置一个serverMiddleware来处理如同301重定向到事件，来保持原始链接的排名能力。