關於vue專案的seo問題

2021-09-17 18:20:23 字數 3403 閱讀 8905

不可否定的是,vue現在火。但是在實際專案中,特別是像一下互動**,我們不可避免會考慮到的是seo問題,這直接關係到我們**的排名,很多人說用vue搭建的**不能做優化,那我們真的要放棄vue,放棄前後端分離開發麼?

首先,可以肯定的是前後端分離不利於seo,為什麼呢?

1.搜尋引擎的基礎爬蟲的原理就是抓取你的url,然後獲取你的html源**並解析。 而你的頁面通常用了vue等js的資料繫結機制來展示頁面資料,爬蟲獲取到的html是你的模型頁面而不是最終資料的渲染頁面,所以說用js來渲染資料對seo並不友好。

2.seo 本質是乙個伺服器向另乙個伺服器發起請求,解析請求內容。但一般來說搜尋引擎是不回去執行請求到的js的。也就是說,如果乙個單頁應用,html在伺服器端還沒有渲染部分資料資料,在瀏覽器才渲染出資料,而搜尋引擎請求到的html是沒有渲染資料的。 這樣就很不利於內容被搜尋引擎搜尋到。 所以服務端渲染就是盡量在伺服器傳送到瀏覽器前 頁面上就是有資料的。

3.一般的資料邏輯操作是放在後端的。排序這個如果僅僅是幾條資料,前後端排序開起來是一樣的,如果是有1000條資料,前端要排序就要都請求過來。這樣顯然是不合理的。

這就代表互動**不用vue做麼?當然不是。

無意間在知乎看見vue的作者是這麼說的:

1. 頁面預渲染

2. 服務端渲染

3. 路由採用h5 history模式

而應用到的技術也是有很多,大體上我總結了四個,也是比較常用的:

第一,ssr,vue官方文件給出的伺服器渲染方案,這是一套完整的構建vue服務端渲染應用的指南,具體參考

第二,vue-meta-info,這個是針對單頁面的meta seo的另一種思路,參考**

第三,nuxt 簡單易用,參考**

第四,phantomjs 頁面預渲染,具體參考 phantomjs.org

而市場上依靠vue做出來的唱功案例還是很多的:

那麼他們是如何做優化的呢?我們通過分析,總結以下幾點

1) bilibili做了基本的seo優化,比如

2) 掘金**使用了vue-meta-info 管理**的meta,應該配合使用了prerender-spa-plugin 對seo進行了優化

3) element在logo上加了首頁的位址,並且只有logo是放在h1標籤中。

4) 有一些流量不太高的**比如 (marshall university)做了seo社會化分享優化,在meta資訊**現了property=」og:title」這種新東西; (大疆招聘)使用了nuxt

1) 麵包屑導航

2) icon

3) 搜尋框

4) button元件

關於收錄問題:

一是主動出擊發現抓取

這只是我片面的分析,具體情況我們還要根據**定位,開發成本,後期的維護成本等綜合考慮,但是我覺得掘金真的是乙個非常成功的案例,既然有人給我們邁出了這一步,我們也要緊跟潮流,畢竟網際網路是乙個與時俱進的行業。如果我們永遠停留在傳統的混合開發,也會給我們的公司,給我們個人帶來一些影響。

不可否定的是,vue現在火。但是在實際專案中,特別是像一下互動**,我們不可避免會考慮到的是seo問題,這直接關係到我們**的排名,很多人說用vue搭建的**不能做優化,那我們真的要放棄vue,放棄前後端分離開發麼?

首先,可以肯定的是前後端分離不利於seo,為什麼呢?

1.搜尋引擎的基礎爬蟲的原理就是抓取你的url,然後獲取你的html源**並解析。 而你的頁面通常用了vue等js的資料繫結機制來展示頁面資料,爬蟲獲取到的html是你的模型頁面而不是最終資料的渲染頁面,所以說用js來渲染資料對seo並不友好。

2.seo 本質是乙個伺服器向另乙個伺服器發起請求,解析請求內容。但一般來說搜尋引擎是不回去執行請求到的js的。也就是說,如果乙個單頁應用,html在伺服器端還沒有渲染部分資料資料,在瀏覽器才渲染出資料,而搜尋引擎請求到的html是沒有渲染資料的。 這樣就很不利於內容被搜尋引擎搜尋到。 所以服務端渲染就是盡量在伺服器傳送到瀏覽器前 頁面上就是有資料的。

3.一般的資料邏輯操作是放在後端的。排序這個如果僅僅是幾條資料,前後端排序開起來是一樣的,如果是有1000條資料,前端要排序就要都請求過來。這樣顯然是不合理的。

這就代表互動**不用vue做麼?當然不是。

無意間在知乎看見vue的作者是這麼說的:

1. 頁面預渲染

2. 服務端渲染

3. 路由採用h5 history模式

而應用到的技術也是有很多,大體上我總結了四個,也是比較常用的:

第一,ssr,vue官方文件給出的伺服器渲染方案,這是一套完整的構建vue服務端渲染應用的指南,具體參考

第二,vue-meta-info,這個是針對單頁面的meta seo的另一種思路,參考**

第三,nuxt 簡單易用,參考**

第四,phantomjs 頁面預渲染,具體參考 phantomjs.org

而市場上依靠vue做出來的唱功案例還是很多的:

那麼他們是如何做優化的呢?我們通過分析,總結以下幾點

1) bilibili做了基本的seo優化,比如

2) 掘金**使用了vue-meta-info 管理**的meta,應該配合使用了prerender-spa-plugin 對seo進行了優化

3) element在logo上加了首頁的位址,並且只有logo是放在h1標籤中。

4) 有一些流量不太高的**比如 (marshall university)做了seo社會化分享優化,在meta資訊**現了property=」og:title」這種新東西; (大疆招聘)使用了nuxt

1) 麵包屑導航

2) icon

3) 搜尋框

4) button元件

關於收錄問題:

一是主動出擊發現抓取

這只是我片面的分析,具體情況我們還要根據**定位,開發成本,後期的維護成本等綜合考慮,但是我覺得掘金真的是乙個非常成功的案例,既然有人給我們邁出了這一步,我們也要緊跟潮流,畢竟網際網路是乙個與時俱進的行業。如果我們永遠停留在傳統的混合開發,也會給我們的公司,給我們個人帶來一些影響。

關於vue專案的seo問題

不可否定的是,vue現在火。但是在實際專案中,特別是像一下互動 我們不可避免會考慮到的是seo問題,這直接關係到我們 的排名,很多人說用vue搭建的 不能做優化,那我們真的要放棄vue,放棄前後端分離開發麼?首先,可以肯定的是前後端分離不利於seo,為什麼呢?1.搜尋引擎的基礎爬蟲的原理就是抓取你的...

關於vue專案的建立

1 對於新手來說,直接去官網看vue官方文件和ivew官方文件,想要練習的話,首先知道要去搭建vue環境,網上關於環境搭建很多,一般來說安裝node好node環境和 映象以後就好了,不需要按照一般的說法去初始化乙個工程,這樣你會發現裡面的專案目錄對於新手來說,會看的特別不清楚 3 首先建立乙個目錄,...

關於Vue專案的router分檔案

在寫乙個前端檔案的時候採用了vue elementui的框架。知道利用component將元件分開,那麼router裡面的index.js按理說應該也可以分開。第一步 建立乙個單獨的路由檔案。在router檔案下建立乙個test.js檔案。新增需要的元件 import test from compo...