成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

shiweifu / 457人閱讀

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

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

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

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

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

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

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

預(yù)渲染為SEO提供了另一種可能，簡單的來說，預(yù)渲染就是當(dāng)vue-cli構(gòu)建的項(xiàng)目進(jìn)行npm run build 的時(shí)候，會(huì)按照路由的層級進(jìn)行動(dòng)態(tài)渲染出對應(yīng)的html文件。

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

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

最終會(huì)生成類似于這樣的目錄結(jié)構(gòu)

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


  
    
    tangeche-pc

可以直觀的發(fā)現(xiàn)，預(yù)渲染的作用。

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

這里安利一下 vue-meta-info 一個(gè)可以動(dòng)態(tài)設(shè)置meta 信息的vue插件如果需要單頁面SEO，可以和 prerender-spa-plugin形成更優(yōu)的配合。

vue-meta-info 是一個(gè)基于 vue 2.0 的插件，它會(huì)讓你更好的管理你的 app 里面的 meta 信息。你可以直接 在組件內(nèi)設(shè)置 metaInfo 便可以自動(dòng)掛載到你的頁面中。如果你需要隨著數(shù)據(jù)的變化，自動(dòng)更新你的 title、meta 等信息，那么用此 插件也是再合適不過了。 當(dāng)然，有時(shí)候我們也可能會(huì)遇到讓人頭疼的 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
4.如果你的 title 或者 meta 是異步加載的，那么你可能需要這樣使用

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

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

不能很好地處理用戶獨(dú)特性路由: 比如有個(gè)路由是 /my-profile, 預(yù)渲染可能不會(huì)很好用,
因?yàn)檫@個(gè)內(nèi)容頁是根據(jù)用戶信息變化的，所以頁面內(nèi)容也不是唯一確定的. 你可能會(huì)使用類似于這樣的路由路徑

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

經(jīng)常變動(dòng)的文件

需要預(yù)渲染成千上萬的路由文件: 這個(gè)可能會(huì)導(dǎo)致你編譯時(shí)間.....額，可能你會(huì)編譯很長時(shí)間

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51245.html

相關(guān)文章

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

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

    yangrd 評論0 收藏0

  • 淺談前后端分離與實(shí)踐 之 nodejs 中間層服務(wù)（二）

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

    ddongjian0000 評論0 收藏0

  • 淺談前后端分離與實(shí)踐 之 nodejs 中間層服務(wù)（二）

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

    mochixuan 評論0 收藏0

  • Vue現(xiàn)有項(xiàng)目改造為Nuxt項(xiàng)目

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

    Invoker 評論0 收藏0

  • Vue單頁面骨架屏實(shí)踐

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

    DevTTL 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<