Vue 单页应用中的 SEO 配置 – Vue Router、Meta 和 Prerender-JavaScript中文网-JavaScript教程资源分享门户

在 Vue 单页应用中实现 SEO 配置是一个重要的话题。由于许多搜索引擎无法像传统的网站一样读取 Vue 单页应用内容，我们需要采取额外的措施，以便搜索引擎能够正确索引我们的网站内容。在本文中，我们将介绍如何为 Vue 单页应用做 SEO 配置，包括 Vue Router、Meta 和 Prerender。

Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它能够管理用户在应用程序中的导航，同时还提供了丰富的高级功能，比如异步路由、路由切换动画等。对于 SEO 的影响，Vue Router 可以帮助我们根据不同的路由展示不同的内容。具体来说，可以通过以下方式实现：

确保你的路由和每个页面都有对应的唯一 URL。
使用 router.beforeEach() 钩子函数为每个路由规则添加 meta 信息。例如，你可以在路由中添加 meta 标签，用于每个页面的标题、关键字和描述等元数据。可以在路由对象上设置，如下所示：

// javascriptcn.com 代码示例
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      meta: {
        title: 'Home Page',
        metaTags: [
          {
            name: 'description',
            content: 'This is my home page'
          },
          {
            property: 'og:description',
            content: 'This is my home page'
          }
        ]
      }
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: 'About Page',
        metaTags: [
          {
            name: 'description',
            content: 'This is my about page'
          },
          {
            property: 'og:description',
            content: 'This is my about page'
          }
        ]
      }
    }
  ]
})

调用 router.afterEach() 钩子函数，动态更新文档头信息。

// javascriptcn.com 代码示例
router.afterEach((to) => {
  Vue.nextTick(() => {
    document.title = to.meta.title || 'My App'
    const tags = to.meta.metaTags || []
    tags.forEach(tag => {
      const {name, content, property} = tag
      const el = document.querySelector(`meta[${name ? `name=${name}` : `property=${property}`}]`)
      if (el) {
        el.setAttribute('content', content)
      } else {
        const newEl = document.createElement('meta')
        if (name) newEl.setAttribute('name', name)
        if (property) newEl.setAttribute('property', property)
        newEl.setAttribute('content', content)
        document.head.appendChild(newEl)
      }
    })
  })
})

这样，我们就可以实现页面级别的 SEO 优化。

Meta 标签

Meta 标签也是一个重要的 SEO 策略。在 Vue 单页应用中，通过添加一些 Meta 标记来调整搜索引擎展示的内容，例如描述、关键字、作者、应用名等等。这些标签能够让搜索引擎更好地了解你的网站，具体来说，可以在 HTML 中添加如下代码：

// javascriptcn.com 代码示例
<head>
  <meta name="description" content="My SEO optimized Vue.js SPA description">
  <meta name="keywords" content="Vue, SPA, Single Page Application, SEO">
  <meta name="author" content="Your Name">
  <meta name="application-name" content="Your Application Name">
  <meta name="theme-color" content="#0f0f0f">
  <meta property="og:title" content="My Vue.js SPA">
  <meta property="og:description" content="My SEO optimized Vue.js SPA description">
  <meta property="og:image" content="/path/to/image.jpg">
  <meta property="og:url" content="http://www.example.com">
  <meta property="og:type" content="website">
</head>

Prerender

Prerender 是一种提高 SEO 效果的技术，它能够让搜索引擎爬虫看到渲染后的 HTML 内容。Vue.js 可以通过 Prerender 发布一个静态版本的应用程序，以使搜索引擎能够正确索引您的 Web 应用程序。使用 Prerender 有助于展现更多的搜索结果，提高应用程序的搜索排名，也更有可能被用户访问到。你可以使用 prerender-spa-plugin 插件来实现这个目的，以下是该插件的示例代码：

// javascriptcn.com 代码示例
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

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

需要注意的是，Prerender 需要做一些额外的配置和准备工作，包括设置路由模式、钩子函数和服务器端渲染 (SSR) 等，具体信息可以参考 prerender-spa-plugin 描述。

总结

SEO 对于网站的曝光和搜索排名是至关重要的，尤其对于单页应用程序来说。在 Vue 单页应用程序中实现 SEO 配置需要采用一些额外的步骤，包括利用 Vue Router 控制路由、添加 Meta 标记和使用 Prerender 技术，使搜索引擎能够正确索引您的网站，从而提高您的应用程序的搜索排名，增加曝光率和访问量。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65406ea67d4982a6eb9ee73b