随着 Vue.js 的流行，越来越多的网站采用了 Vue.js 单页应用（Single Page Application，SPA）架构。在 SPA 架构中，所有页面都由前端框架动态生成，而不是传统的多个静态页面。尽管 SPA 确定了网站的速度和响应能力，却对搜索引擎优化（Search Engine Optimization，SEO）带来了挑战。因为搜索引擎爬虫无法感知 Vue.js 生成的页面内容，导致无法正确抓取和索引内容。这篇文章将介绍如何优化 Vue.js 单页应用以便更好地被搜索引擎优化，并提供实践建议。
使用预渲染技术
为了让搜索引擎能够正确索引和抓取 SPA 的内容，我们需要向搜索引擎提供与传统多页应用类似的内容。Vue.js 支持预渲染（Prerendering）技术，它可以将 SPA 的内容在构建时预先生成，以静态文件的方式交给搜索引擎抓取和索引。使用预渲染技术，我们不仅可以提高 SEO 等级，而且可以加速用户在浏览器上的体验。
Vue-prerender
Vue-prerender 是 Vue.js 的一个官方插件，它使用 Puppeteer 在构建期间渲染单页应用。Puppeteer 是一个 Node.js 库，通过 Chrome DevTools 协议进行远程页面操作。Vue-prerender 为我们提供了一种非常方便的方式来预渲染单页应用。
-- -------------------- ---- -------
-- --
--- ------- -- -------
--- ------- -- -------------
-- -- --- --
--- ---- ------- ----------
-- ----- -------------
--- ------- -------------------- ----------
-- -------------
----- ------------------ - -------------------------------
-------------- - -
----------------- -- -- -
-- --------------------- --- ------------- ------
------ -
-------- -
--- --------------------
---------- -------------------- --------
------- - --- --
--------- --- --------------------------------------
------------------------- --------------
--
--
-
-
-
-这里的配置实现了：在构建时，通过 Puppeteer 渲染 / 路由，并将渲染结果输出到 dist/index.html 文件中。后续搜索引擎访问站点时，就可以访问 dist/index.html，并获取预渲染的静态文件，以此来更好地索引和抓取网站内容。
使用滚动行为
在多页应用中，页面会随着浏览器滚动加载和显示。然而，在 SPA 中，这种滚动行为可能不会触发，让搜索引擎无法获得原始内容。为了更好地支持文档抓取，我们可以添加滚动行为以确保搜索引擎获取到所有内容。
vue-server-renderer
Vue.js 2.3.0 引入的 vue-server-renderer 库为我们提供了一个支持滚动行为的解决方案。我们可以使用 createBundleRenderer 对象来将 Vue 组件打包成一个可渲染的 JavaScript 包，并提供一个非常方便的钩子来定义滚动行为。
-- -------------------- ---- -------
----- -------- - ----------------------------------------------------------- -
--------- ---------
--------------- ---------------
---------------- -----
--
-- ------
----- --------- - -------------- --------- -- -
----- ------ - --- -----------
----- ----------
------- ------
--
----- --- - --- -----
------- -------
------- - -- ------
--
----- ------- - -
---- ------------
------ --- ---- ------
-
----- ---- - ----- --------------------------------
-- ------
---------------
--------- -----
------
------
--------------------------------
-------------------------
-------------------------------
-------
----- -------------------------
-------
------------------------
--------------------------
--------
-- ------
----- --------------- - --- -----
------------------------ - ---------------
---------------------- ----- ----- -- -
-- --------- -
---------------------------------- -
---------- ------------------------
----------- ------------------------
--
-
------
--
--------------------- ----- -- -
-- -------- -- --------------------------------- -
----- --------- - ------------------------------------------ -- -
----- ---------- - ------------------------------------------- -- -
------------- -- -
--------------------------- ----------
-- --
- ---- -
------------------ --
-
--
---------
-------
-------
--
-vue-scrollit
如果你不想写这么多代码来处理滚动行为，Vue.js 社区还提供了一个插件 vue-scrollit，它提供了一个非常简单的 v-scrollit 指令来处理滚动位置。
-- -------------------- ---- -------
--- ------- ------ ------------
-- ----- ------------
------ --- ---- -----
------ ----------- ---- --------------
--------------------
-- -----
----------
---- ------------- ------ -------- ------- -------- ---------
-----------
-- ------
----- --------- - -------------- --------- -- -
----- ------ - --- -----------
----- ----------
------- ------
--
----- --- - --- -----
------- -------
------- - -- ------
--
----- ------- - -
---- ------------
------ --- ---- -------
----- -
----- ------------------- ----------- ---- ------ --
----- ----------------- ----------------------------- --
----- ------------------- ------------------------------------------ --
----- ------------------ ----------- ---- ------------ --
-
-
----- ---- - ----- --------------------------------
---------------
--------- -----
----- ----------
------
--------------------------------
-------------------------
-----------------------
------------------------
-------
----- -------------------------
-------
------------------------
--------------------------
--------
-- ------
------ --------------
--------------------
---------------------- ----- ----- -- -
-- --------- -
-----------------------------
- ---- -
---------------------- -- -- -- - --
-
------
--
---------
-------
-------
--
-优化站点结构
最后，我们需要优化站点结构以更好地适应搜索引擎检索。通过合理的站点结构设计，我们可以让搜索引擎更好地理解和索引网站内容。
一次性加载
在 SPA 中，由于页面都是由前端动态生成的，会使页面加载时间变长。为了增强用户体验体验和 SEO 效果，我们需要考虑优化首屏渲染时间。我们可以将一些公共资源（如第三方库、CSS 等）抽离出来，将其放在单独页面中完成加载，不再每次都加载入页面组件。
设计良好的 URL 结构
如果你的站点设计一个良好的 URL 结构，那么搜索引擎会更容易理解和索引你的页面。确保 URL 易于阅读，并使用有效的标题和标题标签，有利于提高 SEO 等级。
使用语义化 HTML
在创建 SPA 页面的过程中，我们应该合理运用语义化 HTML 标签，这有助于增强 SEO 效果，提供更可读的代码以及更好的可访问性。
例如，如果我们运用了 Vue.js 中的 router-link，我们可以这样设置它的 tag 属性。
<router-link tag="li" to="/foo">foo</router-link>
这里的 tag 属性将 router-link 渲染为 li 标签，使其更加语义化。
总结
本文介绍了如何优化你的 Vue.js 单页应用，以便更好地被搜索引擎抓取和索引。我们学习了预渲染技术，滚动行为，站点结构优化以及运用语义化 HTML 等优化方法。使用这些技巧，我们可以提高网站的可见性和 SEO 等级。
在开发单页应用时，考虑到 SEO 需求是可以预见的而且常见的。因此，我们应该在项目设计和开发阶段就着手搞定 SEO 优化问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465ef06968c7c53b06993bf