處理 Vue 單頁面 SEO 的另一種思路

yangrd 發布于2019-08-21 16:21 / 2020人閱讀

摘要：官方地址設置單頁面信息，如果需要單頁面，可以和形成更優的配合單頁面應用在前端正大放光彩。隨著單頁面應用的普及，人們在感受其帶來的完美的用戶體驗，極強的開發效率的同時，也似乎不可避免的要去處理的需求。

vue-meta-info 官方地址： https://github.com/monkeyWang...

（設置vue 單頁面meta info信息，如果需要單頁面SEO，可以和 prerender-spa-plugin形成更優的配合）

單頁面應用在前端正大放光彩。三大框架 Angular、Vue、React，可謂婦孺皆知。隨著單頁面應用的普及，人們在感受其帶來的完美的用戶體驗，極強的開發效率的同時，也似乎不可避免的要去處理 SEO 的需求。

本文主要針對 vue 2.0 單頁面 Meta SEO 優化展開介紹：

其實解決SEO問題不一定非得用服務端渲染來處理，服務端渲染對于剛接觸 vue 的新手來說，并不是那么友好，雖然已有官方 SSR 中文文檔。但是對于一個已經開發完畢的 vue 項目去接 SSR 無論是從工作量還是技術角度來說，都是一種挑戰。不過這些怎么能難得到偉大的前端程序員！

如果您調研服務器端渲染(SSR)只是用來改善少數營銷頁面（例如 /, /about, /contact 等）的 SEO，那么您可能需要預渲染。無需使用 web 服務器實時動態編譯 HTML，而是使用預渲染方式，在構建時 (build time) 簡單地生成針對特定路由的靜態 HTML 文件。優點是設置預渲染更簡單，并可以將您的前端作為一個完全靜態的站點。
如果您使用 webpack，您可以使用 prerender-spa-plugin 輕松地添加預渲染。它已經被 Vue 應用程序廣泛測試。

預渲染為SEO提供了另一種可能，簡單的來說，預渲染就是當vue-cli構建的項目進行npm run build 的時候，會按照路由的層級進行動態渲染出對應的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" ]
    )
  ]
}

最終會生成類似于這樣的目錄結構

而里面的內容都會被渲染成了靜態的 html 文件


  
    
    tangeche-pc

可以直觀的發現，預渲染的作用。

有了預渲染，我們可以解決很多方面的SEO的問題，但是有時候我們也會需要Meta信息的變化，比如 title 比如 Meta keyWords 或者是 link...

這里安利一下 vue-meta-info 一個可以動態設置meta 信息的vue插件如果需要單頁面SEO，可以和 prerender-spa-plugin形成更優的配合。

vue-meta-info 是一個基于 vue 2.0 的插件，它會讓你更好的管理你的 app 里面的 meta 信息。你可以直接在組件內設置 metaInfo 便可以自動掛載到你的頁面中。如果你需要隨著數據的變化，自動更新你的 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.組件內靜態使用 metaInfo

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

寫到這里，大家應該都明白了我所說的 SEO 的另一種思路是什么了，preRender + metaInfo

可以才一定層次上去解決 SEO 問題，這種方式優點就是代碼侵入性最低，開發成本最少。但是也是有弊端的：

不能很好地處理用戶獨特性路由: 比如有個路由是 /my-profile, 預渲染可能不會很好用,
因為這個內容頁是根據用戶信息變化的，所以頁面內容也不是唯一確定的. 你可能會使用類似于這樣的路由路徑

/users/:username/profile,但是這樣也是不合適的.

經常變動的文件

需要預渲染成千上萬的路由文件: 這個可能會導致你編譯時間.....額，可能你會編譯很長時間

GPU云服務器云服務器另一頁面大數據處理思路 SEO優化接單渠道 SEO優化接單項目如何

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88445.html

處理 Vue 單頁面 SEO 的另一種思路

摘要：官方地址設置單頁面信息，如果需要單頁面，可以和形成更優的配合單頁面應用在前端正大放光彩。隨著單頁面應用的普及，人們在感受其帶來的完美的用戶體驗，極強的開發效率的同時，也似乎不可避免的要去處理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （設置vue 單頁面meta info信息，如果需要單頁面SEO，可以和 prer...

shiweifu 2019-08-01 17:35 評論0 收藏0
淺談前后端分離與實踐之 nodejs 中間層服務（二）

摘要：服務端任需要進行校驗來達到數據的可靠性前端的路由可能在服務端并不存在等等這一系列重用性的問題。串行并行，大幅縮短請求時間。關于作者本人主頁本文部分圖片段落參考文章淘寶前后端分離實踐微信公眾號會不定期推送前端技術文章，歡迎關注一、背景書接上文，淺談前后端分離與實踐(一) 我們用mock服務器搭建起來了自己的前端數據模擬服務，前后端開發過程中只需定義好接口規范，便可以相互進行各自的開發...

ddongjian0000 2019-08-21 17:13 評論0 收藏0
淺談前后端分離與實踐之 nodejs 中間層服務（二）

摘要：服務端任需要進行校驗來達到數據的可靠性前端的路由可能在服務端并不存在等等這一系列重用性的問題。串行并行，大幅縮短請求時間。關于作者本人主頁本文部分圖片段落參考文章淘寶前后端分離實踐微信公眾號會不定期推送前端技術文章，歡迎關注一、背景書接上文，淺談前后端分離與實踐(一) 我們用mock服務器搭建起來了自己的前端數據模擬服務，前后端開發過程中只需定義好接口規范，便可以相互進行各自的開發...

mochixuan 2019-08-01 17:51 評論0 收藏0
Vue現有項目改造為Nuxt項目

摘要：好了，項目啟動了，目錄結構也清楚了，接下來就是整個現有項目的遷移了目前正在改造項目，文章尚未寫完，會抽時間不定期的繼續更新項目的改造過程及分享改造過程中遇到的問題公司項目，最初只為了實現前后端分離式開發，直接選擇了vue框架進行開發，然而現在項目基本完成了，發現蜘蛛根本就抓取不到網站數據，搜索引擎搜出來，都是一片空白沒有數據，需要對項目做SEO優化。本人第一次接觸SEO的優化，完全...

Invoker 2019-08-26 10:25 評論0 收藏0
Vue單頁面骨架屏實踐

github 地址： VV-UI/VV-UI 演示地址: vv-ui 文檔地址：skeleton 關于骨架屏介紹骨架屏的作用主要是在網絡請求較慢時，提供基礎占位，當數據加載完成，恢復數據展示。這樣給用戶一種很自然的過渡，不會造成頁面長時間白屏或者閃爍等情況。常見的骨架屏實現方案有ssr服務端渲染和prerender兩種解決方案。這里主要通過代碼為大家展示如何一步步做出這樣一個骨架屏： show...

DevTTL 2019-08-02 16:00 評論0 收藏0