Vue.js SPA 应用中如何优化 SEO

随着前端技术的不断发展，Vue.js 作为一款流行的前端框架，在开发 Single-Page Application (SPA) 应用上拥有广泛的应用。然而，SPA 应用的 SEO 优化一直是一个困扰前端开发者的难题。本文将详细讲解在 Vue.js SPA 应用中如何优化 SEO。

为什么需要 SEO 优化

SEO 是 Search Engine Optimization 的缩写，指优化网站，增加其在搜索引擎上的排名，提高网站流量、曝光度和转化率等。在 SPA 应用中，因为网站内容是通过 AJAX 加载的，搜索引擎爬虫会默认该页面无内容而进行快速跳过，导致 SPA 页面在搜索引擎中的排名不佳，无法得到优化的效果。因此需要通过一些优化措施来解决这个问题。

实现 SEO 优化的方案

1. 服务端渲染 (SSR)

服务端渲染即将 Vue 组件在服务器端渲染成 HTML，然后传递给前端展示。这种方法可以让搜索引擎爬虫直接解析出页面的 HTML，从而使页面可以被搜索引擎收录。但是，SSR 带来的问题是代码结构复杂、页面渲染速度变慢、服务器压力增大等等，需要权衡其优点和缺点后再选择。

示例代码:

// www.javascriptcn.com code example
// server.js
const Vue = require('vue')
const server = require('express')()

server.get('*', (req, res) => {
    const app = new Vue({
        data: {
            url: req.url
        },
        template: `<div>The visited URL is: {{ url }}</div>`
    })

    const renderToString = require('vue-server-renderer').createRenderer({
        template: require('fs').readFileSync('./index.template.html', 'utf-8')
    }).renderToString

    const context = {
        title: 'Vue SSR demo',
        meta: `
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
        `,
        url: req.url
    }

    renderToString(app, context, (err, html) => {
        if (err) {
            res.status(500).end('Internal Server Error')
            return
        }

        res.writeHead(200, { 'Content-Type': 'text/html' })
        res.end(html)
    })
})

server.listen(8000)

2. 预渲染 (Prerendering)

预渲染是将 SPA 应用中一些比较重要且需要 SEO 优化的页面在构建时预先渲染成 HTML 文件，然后放在服务器上，当访问该页面时直接返回 HTML，而不用在浏览器中进行渲染。这种方法比 SSR 简单易行，但只能针对部分页面进行预渲染，且页面的更新也需要手动进行操作，比较繁琐。

示例代码:

// www.javascriptcn.com code example
// vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: [ '/', '/about', '/contact' ],
        renderer: new Renderer({
          renderAfterDocumentEvent: 'render-event'
        })
      })
    ]
  }
}

3. Meta 信息

Meta 信息指 HTML 中的标记语言，在 SPA 中使用这种方法可以让搜索引擎支持单页应用，使其能够更容易被收录。使用 meta 标签可以在页面中添加搜索引擎会使用的元信息，如 Title、Description、Keywords 等关键信息，从而提高搜索引擎对该页面关键信息的认知度，增加页面被搜索引擎收录的机会。

示例代码:

<meta name="description" content="这是描述信息" />
<meta name="keywords" content="这是关键字信息" />

4. 友好的 URL

对于搜索引擎来说，友好的 URL 结构比较容易被收录。因此，在 Vue.js SPA 应用中，建议使用路由配置来实现友好的 URL。

示例代码:

// www.javascriptcn.com code example
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About
        },
        {
            path: '/contact',
            name: 'contact',
            component: Contact
        }
    ]
})

结束语

通过以上几种方式可以使 Vue.js SPA 应用做到 SEO 优化，提升在搜索引擎中的排名，同时能够增加网站访问量和转化率等，有利于提高网站的营销效果。但需要根据不同场景灵活使用这些方案，因为每个应用的情况都不一样，需要根据具体需求灵活的选择方案。

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