Vue.js 单页应用 SEO 解决方案分析
在 Vue.js 开发单页应用时，我们经常会遇到一个问题：如何实现搜索引擎（例如百度、Google ）的爬取，使得我们的页面可以被搜索引擎收录及排名。在这篇文章中，我将为大家介绍 Vue.js 单页应用的 SEO 解决方案，并提供一些实用的代码示例供大家参考。
传统的 SPA 对 SEO 的限制
使用传统的 SPA（单页应用）框架时，由于页面不会发生整个刷新，所以在使用一般的搜索引擎时，无法被爬取。web crawlers 通常会按照 HTML 内容来构造一个文档对象模型（DOM），而浏览器在渲染页面时，会按照 DOM 来显示页面。由于单页应用不会引起页面的刷新，也就不会重建 DOM，所以 web crawlers 无法感知页面的变化，无法获取对应的信息。
这会导致单页应用面临 SEO 不利的情况。 如果我们使用的是传统的SPA开发方案，我们的优化空间不太灵活，可能会导致搜索引擎收录不到我们的 SPA 页面，甚至存在永久失去排名的风险，这显然不是我们想看到的结果。
解决方案：服务端渲染（SSR）和使用 Prerender.io（预渲染）
从传统的 SPA 到使用服务端渲染（SSR）是一个可行的方案，我们需要在服务端渲染之前，请求数据并将其注入到 HTML 中，以便得到最少的交互次数。另一方面，使用 Prerender.io（预渲染）是一个灵活又快速的解决方案，适用于小型到单用户的 SPA 页面。
- 服务端渲染（SSR）
服务端渲染可以将我们的单页应用渲染为完整的 HTML 页面，当 web crawlers 收到请求后，返回的内容就是重建后的 DOM 内容，这样，搜索引擎可以获取所有页面的内容，进行收录与排名。
在 Vue.js 中使用 SSR 并不困难，我们只需使用 Vue.createSSRApp 取代常规的应用实例，使用 createRenderer 替换常规的 renderer，并在用作参数的选项中设置必要的数据源。 使用这种方法可以最大限度地减少对原有代码的干扰。
在实际开发中，服务端渲染还有一些注意点。由于服务端渲染不同于客户端渲染，需要将我们的单页应用调整为 SSR 时，需要特别注意一些点，例如：
- 使用组件可重用性
- 确定页面结构
- 预先获取 API 数据
- 使用 Prerender.io（预渲染）
Prerender.io 会爬取您的 SPA 网站，并在服务器端使用 PhantomJS 渲染 HTML，从而可以生成完整的 HTML 页面，这些页面可以被搜索引擎爬取和收录。如果您的网站已经是一个SPA应用了，使用 Prerender.io 是一种很容易的加速 SEO 呈现的方法。
Prerender.io 的工作原理是非常简单的，它通过中间层服务器的方式进行页面的渲染，首先你需要在你的代码中加入预渲染的相关代码，然后在你的部署环境中安装 Prerender.io 的服务，并将空的搜索引擎爬取请求重定向到 Prerender.io 的预渲染服务器。经过预渲染服务器之间，全面的 SPA 就已经被成功的 prerender 了。
// javascriptcn.com 代码示例
// Prerender.io 预渲染示例
<!DOCTYPE html>
<html>
<head>
<title>My coolest page ever</title>
<meta name="description" content="A summary of my coolest web page">
</head>
<body>
<header>
<h1>Welcome to my website</h1>
<nav>
<ul>
<li><a href="/" title="Go Home">Home</a></li>
<li><a href="/contact" title="Contact Me">Contact</a></li>
</ul>
</nav>
</header>
<div id="app"></div>
<script src="/build/app.js"></script>
<script>
if(typeof window !== "undefined" && location.hostname !== "localhost") {
//如果当前环境是浏览器环境，就将渲染任务交由浏览器执行，并不使用 Prerender.io
new Vue({
el: "#app",
render: h => h(App) //使用组件 App 的渲染函数
});
} else if(typeof navigator === "undefined") {
//如果当前环境是服务器环境，则使用 Prerender.io 预渲染
const prerenderedHtml = "<h1>Welcome to my website</h1><h2>Content is rendered without JS</h2>";
document.getElementById("app").innerHTML = prerenderedHtml;
}
</script>
</body>
</html>总结
在现代 web 应用时代， Vue.js 已经成为一种非常流行的前端框架，而 SPA 也已经成为一种比较成熟的前端开发模式。但是在单页应用中使用 Vue.js 时，我们要注意 SEO 的问题。本文介绍了两种解决方案，希望能对您有所帮助。
无论你是通过 SSR 还是 Prerender.io 达到 SEO 的优化，都需要了解其具体的实现方法，选择一个合适的方案，才能在搜索引擎的排名中获得更好的结果。同时，也需要注意一些其他的 SEO 技巧，比如 URL 结构、页面结构、页面元数据等等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f7e437d4982a6eb90f563