Vue.js SPA 应用 SEO 改善范例

阅读时长 10 分钟读完

Vue.js SPA 应用 SEO 改善范例

随着互联网的快速发展，网站变得越来越复杂和功能化，单页应用程序（Single Page Application, SPA）逐渐成为了一种流行的前端框架。Vue.js 是一款流行的 SPA 前端框架，具有高可维护性、高可扩展性和易用性等特点。然而，由于其使用 Ajax 技术进行页面渲染，导致搜索引擎对其的爬取效率较低，进而影响排名。本文基于 Vue.js 创建的 SPA 应用，介绍了如何进行 SEO 优化，目的是提高网站的搜索引擎收录率和排名。

一、SEO 问题分析

当单页应用程序采用 Vue.js 框架时，使用的是 Ajax 技术进行页面渲染。这种方式对搜索引擎而言并不友好，因为 Search Engine Spider 尚未完全支持 JavaScript 技术，它将仅仅看到第一次加载的内容，而未发现后续与 JavaScript 不同的内容。因此，需要制定相应的策略来帮助搜索引擎爬取内容。

二、SPA 应用 SEO 改善范例

2.1 服务器端渲染（SSR）

服务器端渲染（Server-side Rendering）是将 JavaScript 渲染为 HTML 的方法。这种方式可以帮助提高搜索引擎的爬取效率。对于 Vue.js 而言，可以使用 Vue SSR 或 Nuxt.js 来实现 SSR。

Vue SSR 方案

Vue SSR 是官方提供的服务器端渲染框架。首先需要新建一个 Express + Vue SSR 项目：

-- -------------------- ---- -------
- -- ------- --
- --- ------- -- -----------------

- ----
- ------- -------

- ----
- -- ------- -- --- -------

- -- --- --- --
- --- ------- --- ------------------- --

接着，需要在路由页面中加入服务器端渲染的控制器：

-- -------------------- ---- -------
----- --- - ---------------
----- -------- - -----------------------------------------------
  --------- ------------------------------------------------------- --------
---
----- --------- - -----------------------------

----- ------ - ----------

--------------- ----- ---- -- -
  ----- ------- - - ---- ------- --
  ----- --- - -------------------
  ---------------------------- ----- ----- -- -
    -- ----- -
      ----------------------------- ------ --------
      -------
    -
    --------------
  ---
---

--------------------

然后，在 Vue 组件中加入 template 代替 mounted：

-- -------------------- ---- -------
----------
  ---- --------------
    ------ --- -------
  ------
-----------

--------
------ ------- -
  ---- -- -
    ------ -
      ---- -------- -- ---- ------ ----
    -
  --
  ------------- -
    -- ------- ------ --- ------------ -
      -------- - ------ -------
    -
  -
-
---------

最后，在 index.template.html 模板中加入渲染组件的标识：

-- -------------------- ---- -------
--------- -----
------
  ------
    --------- ----- ----------
  -------
  ------
    ---------------------
  -------
-------

使用 npm run dev 命令启动项目，在浏览器中访问 http://localhost:8080/Hello 获取服务器端渲染的结果。

Nuxt.js 方案

Nuxt.js 是一个基于 Vue.js 的服务端渲染框架。它实现了自动生成应用程序的机制，而无需重复编写模板和样式。

首先，安装 Nuxt.js：

然后，新建项目并编写页面代码：

在 pages/index.vue 文件中编写页面组件：

-- -------------------- ---- -------
----------
  -----
    --- --------------------- ---------- --- -------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ---- -------- -- ---------
    -
  -
-
---------

然后编写 Nuxt.js 配置 /nuxt.config.js：

-- -------------------- ---- -------
-------------- - -
  ----- ------------
  ----- -
    ------ ------- --- --------
    ----- -
      - -------- ------- --
      - ----- ----------- -------- -------------------- ---------------- --
      - ----- ----------- -------- -------- ---- --
      - ---- -------------- ----- -------------- -------- ------- --- ------- -
    --
    ----- -- ---- ------- ----- --------------- ----- -------------- --
  --
  -------- - ------ ------ --
  ---- ---
  -------- ---
  ------------- ---
  -------- ---
  ------ -
    -------------- ---- --
  --
  ------- -
    ----- --------
  -
-

最后，开启项目：

浏览器中访问 http://localhost:3000/hello 查看服务器端渲染的页面效果。

2.2 数据预取

数据预取是为了避免在客户端 JS 中再次发送请求获取数据，而是在 Server 端接口先将数据请求出来，避免交互过程中的数据请求。

在 Vue.js 中，可以通过 created() 这个生命周期钩子进行数据预请求，将数据在组件的实例创建之前取回。参考下面的示例代码：

-- -------------------- ---- -------
----------
  -----
    ------ -----------------------
    ------ ----------- ---------------------
    ---- ---- ---
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ----- --
    -
  --
  --------- -
    -----------------
  --
  -------- -
    ----------- -
      ------ --------------------------------- -- -
        --------- - --------------
      ---
    -
  -
-
---------

2.3 使用 Vue.js 的 Meta Info

在 Vue.js 中，vue-meta 是一个非常流行的关键词，它可以帮助我们在使用 Vue.js 时轻松地对 meta 数据进行管理。使用该插件可以很更方便地设置 title, meta, og and twitter tags, and anything else。

安装 vue-meta 插件：

在组件内使用以下代码构建 Meta：

-- -------------------- ---- -------
------ ------- -
  --------- -
    ------ ------- --- --------
    ----- -
      - ---- -------------- ----- -------------- -------- ------- --- ------- --
      - ----- ----------- -------- -------- ---- -
    -
  --
  -- ----
-

2.4 路由配置

在 Vue.js 中，可以通过 Router 配置实现完善的页面渲染。路由配置能够让搜索引擎容易地找到页面和内容。在路由中，每个页面都有一个 URL。将每个页面的 URL 更改为有意义的、静态 URL 可以提高搜索引擎爬取效率。

路由使用示例代码：

-- -------------------- ---- -------
------ --- ---- ------
------ --------- ---- -------------

-------------------

----- ------ - --- -----------
  ----- ----------
  ------- -
    -
      ----- ----
      ---------- ----
    --
    -
      ----- ---------
      ---------- -----
    -
  -
---

2.5 合理的指令命名

为所有指令使用合适、有意义的名称，这能够帮助搜索引擎正确地处理和索引您的应用程序内容。

示例代码：

-- -------------------- ---- -------
----------
  -----
    --- ------------------- ----- -------
    -- ---------------------------- ------- ------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ---------- -----
      ----------------- ------
      ------ --------
      -------- -------- --------
    -
  -
-
---------

三、结论

Vue.js 作为一款流行的 SPA 前端框架，虽然 Ajax 技术进行页面渲染效率高，但会影响搜索引擎的爬取效率，进而影响排名。在本文中，我们通过服务器端渲染（SSR）、数据预取、使用 Vue.js 的 Meta Info、路由配置和合理的指令命名等方法，帮助您提高 SPA 应用的 SEO 收录率和排名，这些方法可以帮助您更好地推广您的网站并提高访问量。

参考资料：

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f8f288c5c563ced5c3da84

纠错
反馈
相关推荐
精选内容