Vue.js SPA 应用 SEO 改善范例

面试官：小伙子，你的数组去重方式惊艳到我了

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

阅读全文

猜你喜欢

  • ES10：flat()、flatMap() 和 array.at()

    ES10 为 JavaScript 数组新增了三个方法，分别是 Array.prototype.flat()、Array.prototype.flatMap() 和 Array.prototype.a...

    22 天前
  • React Native 如何实现导航栏

    React Native 是一种流行的开源框架，它让开发人员能够使用 JavaScript 和 React 语言来构建本地移动应用程序。在开发 React Native 应用程序时，有时需要在不同的页...

    22 天前
  • 使用 Express.js 进行跨站点脚本攻击 (XSS) 预防的技巧

    2021 年的今天，Web 应用程序的安全性已经成为我们非常关注的一个问题。其中一种常见的安全问题就是跨站点脚本攻击（XSS）。在前端类应用程序中，我们经常使用 JavaScript 来实现一些交互功...

    22 天前
  • 优化 Headless CMS 在数据处理上的性能

    Headless CMS 是一种新型的 CMS 构架，它以无头的方式为开发人员提供数据，由开发人员自己编写前端界面。1990 年代，仍然有很多站点是静态站点，而当 CMS 出现以后，无疑是很大的进步。

    22 天前
  • 常见 MongoDB 错误解决方法大全

    MongoDB 是一个非关系型数据库，广受前端开发者的喜爱，但在实际开发中，可能会遇到各种各样的错误。本文将介绍几种常见的 MongoDB 错误，并提供详细的解决方法和示例代码。

    22 天前
  • CSS 布局调整了一下 – 使用 Flexbox

    CSS 布局调整了一下 – 使用 Flexbox 除非你是从古老的网站中浮出水面的一只恐龙，不然你应该都已经听说过 Flexbox。它是 CSS 世界中的一个相对新的部分，代表着我们对于网页布局的概念...

    22 天前
  • ES11 中 class 的 fields 初始化并处理函数中的 this 问题

    ES11 中的 Class 定义和初始化一个 Class 的实例都有了新的语法功能，即在类定义中允许直接初始化实例字段（fields），在构造函数中使用 this 变量引用当前实例，也支持简写语法。

    22 天前
  • 响应式设计中处理卡顿图片加载的方法

    响应式设计是一种让网站能够适应不同屏幕、不同设备和不同网络环境的设计方法。在响应式设计中，图片是一个重要的元素。但是，在一些情况下，图片加载可能会很慢，导致页面卡顿。

    22 天前
  • 用 Chai-HTTP 和 mock-http 测试 Node.js HTTP 服务器

    在开发 Node.js HTTP 服务器时，如何测试是非常重要的。传统的方法是手动在浏览器中访问服务器，并通过查看浏览器的控制台或服务器的日志来查看服务器是否正常工作。

    22 天前
  • 如何进行同构渲染无障碍 React 应用程序

    在前端开发中，渲染 React 应用通常是基于客户端的。这意味着客户端需要下载 JavaScript，解析它，并将 HTML 插入文档中。然而，这种方式对于一些用户来说可能不太友好，因为他们可能无法下...

    22 天前
  • 在 PWA 中使用 HTTPS

    为了使 Progressive Web App（PWA）更加安全和可靠，使用 HTTPS 是必不可少的。在本文中，我们将介绍如何在 PWA 中使用 HTTPS，以保证最高程度的数据保护和用户信任。

    22 天前
  • 使用 Custom Elements 和 LitElement 构建 Web 组件

    Web 组件是在现代 Web 开发中非常有用的工具。它们可以让我们更轻松地开发和维护 Web 应用程序，因为它们提供了更加模块化、可组合和可重用的代码，并且可以提高开发效率。

    22 天前
  • 使用新版 Next.js 亲手创建静态博客

    前言 近年来，随着 React 技术的普及，越来越多的网站开始使用 React 开发前端应用。其中，Next.js 是一个比较流行的 React 框架，可用于创建现代化的 Web 应用程序。

    22 天前
  • Cypress 和 Puppeteer 对比：使用与技术选型

    前言 在现代 Web 应用中，自动化测试是非常重要的一部分。随着前端技术的发展，前端自动化测试的需求也逐渐增长。其中，Cypress 和 Puppeteer 是目前最受欢迎的前端自动化测试框架之一。

    22 天前
  • Hapi 与 Authentication 插件：完整指南

    Hapi 是一个用于构建 Web 应用的 Node.js 框架，它有许多可扩展的插件，其中 Authentication 插件是那些需要鉴权或授权的应用场景下非常重要的一个。

    22 天前
  • Serverless 构建公共云私有化解决方案

    随着云计算的普及，越来越多的企业选择将应用部署在公共云上，以降低成本、提高灵活性和可扩展性。然而，对于一些对安全性和数据隐私要求较高的企业来说，将应用部署在公共云上可能会存在风险。

    22 天前
  • 无障碍选择列表：HTML/CSS 教程

    无障碍是指为面向全体人群的使用而设计，不论是否有残障，所有的用户均可以很好地使用该产品。在前端开发中，无障碍性已成为非常重要的一环。无障碍的选择列表也会提升用户体验，使您的网站更符合无障碍性要求。

    22 天前
  • Express.js 和 Redis 的结合使用方式

    前言 对于大多数使用了Node.js的前端开发者来说，Express.js是广受欢迎的Web框架。而Redis是另一个流行的开源内存数据库，其可以缓存、日志和消息方面发挥优秀的性能。

    22 天前
  • 深入探究 Redux 中间件的实现原理

    Redux 中间件是 Redux 核心中一个非常重要的概念，它可以让我们自定义一些功能，比如添加日志、异步操作等，它是实现可复用和可组合的 Redux 行为的关键。

    22 天前
  • Webpack 的概念及其持续集成解决方案

    #Webpack 的概念及其持续集成解决方案 Webpack 是一个前端实用工具，它主要用于打包和编译 JavaScript，CSS 和 HTML 等文件。这使得开发人员可以更好地管理项目中的代码，并...

    22 天前

相关推荐

    暂无文章