Nuxt.js 最大的卖点之一是它可以帮助您的应用程序进行搜索引擎优化 (SEO) 并在 Google 上获得更好的排名。在本文中,我们将介绍最佳实践,以确保您的 Nuxt 应用程序设置正确以在搜索引擎上排名。
免责声明:本文不是 SEO 指南或如何在 Google 上获得良好排名的指南。这是一篇关于如何在 Nuxt 应用程序中最好地设置元标记和重定向的技术文章,它有助于 SEO。
Nuxt.js 如何帮助您进行 SEO
在我们深入探讨之前,让我们快速回顾一下 Nuxt 是什么以及它如何帮助您将应用程序组合在一起以实现 SEO 目的。
未为 SEO 设置单页应用程序
通常使用 Vue.js,您正在创建一个单页应用程序。这是一个纯 JavaScript 生成的应用程序,其中只有一个文件,一个空白的index.html
. 内容在 JavaScript 初始加载index.html
后填充,JavaScript 还负责切换路由。
SPA 非常适合创建活泼的 UI,但在 SEO 方面,单页应用程序并不理想,因为它们没有初始内容。这使得 Google 和其他爬虫(包括 Facebook 等社交媒体爬虫)难以抓取您的网站并在搜索结果中正确显示它。
Nuxt.js 使创建通用应用程序变得简单
通用应用程序是关于在 Web 服务器上预加载您的应用程序并将呈现的 HTML 作为对应用程序中每个路由的浏览器的响应发送,以改进 SEO,使加载速度更快,以及许多其他好处。
与普遍应用,会有像在页面上的内容<title>
标签,并<meta>
在标签上<head>
,并<h1>
在标签上<body>
任何JavaScript加载之前。这些标签帮助爬虫确定页面上的内容。
Nuxt.js 如何处理所有页面的头部
Nuxt 使用一个名为 vue-meta 的库来处理<head>
每个页面中的元素。页面只是 Nuxt 中路由的术语,每个页面都位于 pages 文件夹中。
Nuxt 为您提供了三种<head>
在应用程序页面中设置元素的方法。现在让我们回顾一下。
1) 为所有页面设置默认元标记
整个应用程序中的不同页面共享一些相同的元标记的情况并不少见。Nuxt 允许您通过head
在nuxt.config.js
文件中设置属性来为每个页面设置默认值。
module.exports = {
head: {
titleTemplate: '%s - Nuxt.js',
meta: [ // 这个数组中的每个对象都是它自己的元标记
{ charset: 'utf-8' },
{ name: 'viewport' , content: 'width=device-width, initial scale=1' },
{ hid: 'description', name: 'description', content: 'Meta description' }
]
}
};
单击此处查看您可以在 head 属性内定义的所有属性。
注意: Nuxt.jshead
用于属性的名称。vue-meta 使用metaInfo
. 这是相同的属性。
2) 分别为您的页面设置元标记
在你的每个 Nuxt 页面中,你可以定义一个head
method。您可以手动自定义单个页面的 head 标签,Nuxt 将覆盖您在nuxt.config.js
文件中设置为默认值的任何内容。
这是一个About.vue
在head
方法中带有自己的元标记的示例文件:
<template> <h1>关于页面</h1> </template><script> export default { head() { return { title: 'About Us - Nuxt.js', meta: [ { hid: 'description', name: 'description', content: '关于我们公司 Nuxt.js ' } ] } } } </script>
3) 为您的动态页面设置元标记
您可以使用动态页面进一步自定义您的元标记——其中有一个可以以不同方式呈现的路由的页面。用户个人资料页面可能是一个示例。
动态路由是通过在 pages 文件夹中的 .vue 组件或目录前面加上下划线来定义的。
页数/
--| 用户/
-----| _用户名.vue
这将生成如下所示的 Vue.js 路由代码:
路由器:{
路由:[{
名称:'users-id',
路径:'/users/:username?',
组件:'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} 在 Nuxt.js` 的公开个人资料`
}]
}
}
</脚本>
什么是隐藏的,它如何帮助 SEO?
您可能已经注意到hid
上面元标记示例中的属性。这是用于帮助减轻默认vue-meta
行为的属性。
默认情况下,当使用 vue-meta
,它将创建重复标签而不是替换原始标签。但是谷歌在抓取你的网站时会因为你有重复的标签而惩罚你,所以最好总是有一个唯一的hid
每个元标记上的属性以唯一标识它们。拥有hid
财产将发出信号 vue-meta
替换标签而不是复制它。
单击此处了解有关重复元标记的更多信息以及如何hid
帮助您避免它们。
使用 Nuxt.js 处理重定向
根据HubSpot 的说法,301 重定向是从一个 URL 到另一个 URL 的永久重定向。301 重定向将站点访问者和搜索引擎发送到与他们最初在浏览器中输入或从搜索引擎结果页面选择的 URL 不同的 URL。
当您的网站结构发生变化并且您仍然希望保持原始链接的排名能力时,通常会使用 301 重定向。
Nuxt 通过serverMiddleware
在你的nuxt.config.js
文件中设置一个属性来帮助你解决这个问题。该serverMiddleware
属性可帮助您设置在服务器端呈现页面时将运行的中间件。
下面是使用此属性设置处理应用程序 301 重定向的函数的示例。
module.exports = {
serverMiddleware: [
'~/servermiddleware/seo.js'
]
};
您可以在调用的文件中定义需要重定向的路由/301.json
并将其导入seo.js
中间件。
[
{ "from": "/old", "to": "/new" },
{ "from": "/veryold", "to": "/verynew" },
{ "from": "/too-旧”,“到”:“/新”}
]
然后,您可以让文件通过您定义的路由运行,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 }); 重发(); } else { 下一个(); }}
单击此处了解有关 Nuxt.js 中间件的更多信息,以及它如何帮助您处理的不仅仅是重定向。
在 spa 模式下渲染您的应用程序时的 SEO 效果
Nuxt 应用程序中有不止一种构建模式。您可以选择将应用程序呈现为universal
、 或spa
。
<head>
如果您选择在spa
模式下呈现应用程序,那么管理 中的所有标签会产生什么影响?
由于没有进行服务器端呈现,您将无法获得最初在页面上放置内容的任何好处。vue-meta
仍然完成处理 的工作<head>
,但是如果您将应用程序呈现为单页应用程序,则最初页面上没有内容,因为所有标记都将在 JavaScript 加载后创建。唯一的影响是纯粹的前端。例如,当用户更改视图时更新标题标签。
结论
Nuxt 使您可以对如何<head>
在通用应用程序中呈现元素进行大量控制,这有助于 SEO。您有许多选项可用于在nuxt.config.js
文件内设置全局默认值,并且您还可以访问head
每个单独页面中的方法,您可以在其中进一步自定义内容。最后,您可以设置一个serverMiddleware
可以处理 301 重定向之类的事情,以保持链接的排名能力