App下載

用VUE寫的頁面不利于SEO怎么辦？實現(xiàn)VUE單頁面應用SEO的另一種思路

猿友 2021-01-07 14:28:52 瀏覽數(shù) (6380)
反饋

（設置 vue 單頁面 meta info 信息，如果需要單頁面 SEO，可以和 prerender-spa-plugin 形成更優(yōu)的配合） 單頁面應用在前端正大放光彩。三大框架 Angular 、Vue 、React ，可謂婦孺皆知。隨著單頁面應用的普及，人們在感受其帶來的完美的用戶體驗，極強的開發(fā)效率的同時，也似乎不可避免的要去處理 SEO 的需求。 本文主要針對 vue 2.0 單頁面 Meta SEO 優(yōu)化展開介紹： 其實解決 SEO 問題不一定非得用服務端渲染來處理，服務端渲染對于剛接觸 vue 的新手來說，并不是那么友好，雖然已有官方 SSR 中文文檔 。但是對于一個已經(jīng)開發(fā)完畢的 vue 項目去接 SSR 無論是從工作量還是技術角度來說，都是一種挑戰(zhàn)。不過這些怎么能難得到偉大的前端程序員！

如果您調(diào)研服務器端渲染(SSR)只是用來改善少數(shù)營銷頁面（例如 /, /about, /contact 等）的 SEO，那么您可能需要預渲染。無需使用 web 服務器實時動態(tài)編譯 HTML，而是使用預渲染方式，在構建時 (build time) 簡單地生成針對特定路由的靜態(tài) HTML 文件。優(yōu)點是設置預渲染更簡單，并可以將您的前端作為一個完全靜態(tài)的站點。 如果您使用 webpack，您可以使用 prerender-spa-plugin 輕松地添加預渲染。它已經(jīng)被 Vue 應用程序廣泛測試。 預渲染為 SEO 提供了另一種可能，簡單的來說，預渲染就是當 vue-cli 構建的項目進行 npm run build 的時候，會按照路由的層級進行動態(tài)渲染出對應的 html 文件。

// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')


module.exports = {
  // ...
  plugins: [
    new PrerenderSpaPlugin(
      // 編譯后的html需要存放的路徑
      path.join(__dirname, '../dist'),
      // 列出哪些路由需要預渲染
      [ '/', '/about', '/contact' ]
    )
  ]
}

最終會生成類似于這樣的目錄結(jié)構

image

而里面的內(nèi)容都會被渲染成了靜態(tài)的 html 文件

image

相對于之前的可能只有

<html>
  <head>
    <meta charset="utf-8">
    <title>tangeche-pc</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

可以直觀的發(fā)現(xiàn)，預渲染的作用。 有了預渲染，我們可以解決很多方面的 SEO 的問題，但是有時候我們也會需要 Meta 信息的變化，比如title 比如 Meta keyWords 或者是link… 這里安利一下 vue-meta-info 一個可以動態(tài)設置 meta 信息的 vue 插件如果需要單頁面 SEO，可以和 prerender-spa-plugin形成更優(yōu)的配合。 vue-meta-info 是一個基于 vue 2.0 的插件，它會讓你更好的管理你的 app 里面的 meta 信息。你可以直接 在組件內(nèi)設置 metaInfo 便可以自動掛載到你的頁面中。如果你需要隨著數(shù)據(jù)的變化，自動更新你的 title、meta 等信息，那么用此 插件也是再合適不過了。 當然，有時候我們也可能會遇到讓人頭疼的 SEO 問題，那么使用此插件配合 prerender-spa-plugin 也是再合適不過了

1.安裝

yarn:

    yarn add vue-meta-info

npm:

    npm install vue-meta-info --save

2.全局引入 vue-meta-info

    import Vue from 'vue'
    import MetaInfo from 'vue-meta-info'


    Vue.use(MetaInfo)

3.組件內(nèi)靜態(tài)使用 metaInfo

    <template>
      ...
    </template>


    <script>
      export default {
        metaInfo: {
          title: 'My Example App', // set a title
          meta: [{                 // set meta
            name: 'keyWords',
            content: 'My Example App'
          }]
          link: [{                 // set link
            rel: 'asstes',
            href: 'https://assets-cdn.github.com/'
          }]
        }
      }
    </script>

4.如果你的 title 或者 meta 是異步加載的，那么你可能需要這樣使用

    <template>
      ...
    </template>


    <script>
      export default {
        name: 'async',
        metaInfo () {
          return {
            title: this.pageName
          }
        },
        data () {
          return {
            pageName: 'loading'
          }
        },
        mounted () {
          setTimeout(() => {
            this.pageName = 'async'
          }, 2000)
        }
      }
    </script>

寫到這里，大家應該都明白了我所說的 SEO 的另一種思路是什么了，preRender + metaInfo 可以才一定層次上去解決 SEO 問題，這種方式優(yōu)點就是代碼侵入性最低，開發(fā)成本最少。但是也是有弊端的：

  • 不能很好地處理用戶獨特性路由: 比如有個路由是/my-profile, 預渲染可能不會很好用, 因為這個內(nèi)容頁是根據(jù)用戶信息變化的，所以頁面內(nèi)容也不是唯一確定的. 你可能會使用類似于這樣的路由路徑 /users/:username/profile,但是這樣也是不合適的.
  • 經(jīng)常變動的文件
  • 需要預渲染成千上萬的路由文件: 這個可能會導致你編譯時間…..額，可能你會編譯很長時間

作者：王偉

原文：https://muwoo.github.io/pager5/

Vue.js

0 人點贊