您好,登錄后才能下訂單哦!
這篇文章主要介紹了VUE單頁面應(yīng)用SEO的方法是什么的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇VUE單頁面應(yīng)用SEO的方法是什么文章都會有所收獲,下面我們一起來看看吧。
vue-meta-info
(設(shè)置 vue 單頁面 meta info 信息,如果需要單頁面 SEO,可以和 prerender-spa-plugin 形成更優(yōu)的配合) 單頁面應(yīng)用在前端正大放光彩。三大框架 Angular 、Vue 、React ,可謂婦孺皆知。隨著單頁面應(yīng)用的普及,人們在感受其帶來的完美的用戶體驗,極強的開發(fā)效率的同時,也似乎不可避免的要去處理 SEO 的需求。 本文主要針對 vue 2.0 單頁面 Meta SEO 優(yōu)化展開介紹: 其實解決 SEO 問題不一定非得用服務(wù)端渲染來處理,服務(wù)端渲染對于剛接觸 vue 的新手來說,并不是那么友好,雖然已有官方 SSR 中文文檔 。但是對于一個已經(jīng)開發(fā)完畢的 vue 項目去接 SSR 無論是從工作量還是技術(shù)角度來說,都是一種挑戰(zhàn)。不過這些怎么能難得到偉大的前端程序員!
如果您調(diào)研服務(wù)器端渲染(SSR)只是用來改善少數(shù)營銷頁面(例如 /, /about, /contact 等)的 SEO,那么您可能需要預(yù)渲染。無需使用 web 服務(wù)器實時動態(tài)編譯 HTML,而是使用預(yù)渲染方式,在構(gòu)建時 (build time) 簡單地生成針對特定路由的靜態(tài) HTML 文件。優(yōu)點是設(shè)置預(yù)渲染更簡單,并可以將您的前端作為一個完全靜態(tài)的站點。 如果您使用 webpack,您可以使用 prerender-spa-plugin 輕松地添加預(yù)渲染。它已經(jīng)被 Vue 應(yīng)用程序廣泛測試。 預(yù)渲染為 SEO 提供了另一種可能,簡單的來說,預(yù)渲染就是當(dāng) vue-cli 構(gòu)建的項目進(jìn)行
npm run build
的時候,會按照路由的層級進(jìn)行動態(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' ] ) ] }
最終會生成類似于這樣的目錄結(jié)構(gòu)
而里面的內(nèi)容都會被渲染成了靜態(tài)的 html 文件
相對于之前的可能只有
<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),預(yù)渲染的作用。 有了預(yù)渲染,我們可以解決很多方面的 SEO 的問題,但是有時候我們也會需要 Meta 信息的變化,比如title
比如 Meta keyWords
或者是link
… 這里安利一下 vue-meta-info 一個可以動態(tài)設(shè)置 meta 信息的 vue 插件如果需要單頁面 SEO,可以和 prerender-spa-plugin
形成更優(yōu)的配合。 vue-meta-info
是一個基于 vue 2.0 的插件,它會讓你更好的管理你的 app 里面的 meta
信息。你可以直接 在組件內(nèi)設(shè)置 metaInfo
便可以自動掛載到你的頁面中。如果你需要隨著數(shù)據(jù)的變化,自動更新你的 title
、meta
等信息,那么用此 插件也是再合適不過了。 當(dāng)然,有時候我們也可能會遇到讓人頭疼的 SEO 問題,那么使用此插件配合 prerender-spa-plugin
也是再合適不過了
yarn:
yarn add vue-meta-info
npm:
npm install vue-meta-info --save
import Vue from 'vue' import MetaInfo from 'vue-meta-info' Vue.use(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>
<template> ... </template> <script> export default { name: 'async', metaInfo () { return { title: this.pageName } }, data () { return { pageName: 'loading' } }, mounted () { setTimeout(() => { this.pageName = 'async' }, 2000) } } </script>
preRender
+ metaInfo
可以才一定層次上去解決 SEO 問題,這種方式優(yōu)點就是代碼侵入性最低,開發(fā)成本最少。但是也是有弊端的:
不能很好地處理用戶獨特性路由: 比如有個路由是/my-profile
, 預(yù)渲染可能不會很好用, 因為這個內(nèi)容頁是根據(jù)用戶信息變化的,所以頁面內(nèi)容也不是唯一確定的. 你可能會使用類似于這樣的路由路徑 /users/:username/profile
,但是這樣也是不合適的.
經(jīng)常變動的文件
需要預(yù)渲染成千上萬的路由文件: 這個可能會導(dǎo)致你編譯時間…..額,可能你會編譯很長時間
關(guān)于“VUE單頁面應(yīng)用SEO的方法是什么”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“VUE單頁面應(yīng)用SEO的方法是什么”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。