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

資訊專欄INFORMATION COLUMN

SPA之SEO

tomener / 3177人閱讀

摘要：認(rèn)識(shí)中的舉個(gè)栗子，代號(hào)為。對(duì)應(yīng)下的組成沒(méi)錯(cuò)，后面的部分也叫做，帶有的也叫。這里等同于在左邊的代表這個(gè)資源在服務(wù)器的位置，右邊的則是指明資源內(nèi)的位置，可以理解成就是錨點(diǎn)。這樣子我們只要為這個(gè)鏈接返回相應(yīng)的頁(yè)面或者數(shù)據(jù)即可。

參考鏈接：6 Things You Should Know About Fragment URLs

在項(xiàng)目開(kāi)發(fā)中，因?yàn)槭褂昧薞ue.js來(lái)開(kāi)發(fā)一個(gè)SPA（單頁(yè)面應(yīng)用），所以在這個(gè)項(xiàng)目開(kāi)始變大的時(shí)候，很自然的就想到用vue-router來(lái)建立多個(gè)模塊入口。vue-router默認(rèn)的是使用hash模式，就是會(huì)在#后面跟著路徑用來(lái)區(qū)分并渲染相應(yīng)的組件，還有一種是history模式，這種模式能在不刷新當(dāng)前頁(yè)面的情況下改變URL，并且形式非常干凈清爽的，比如：https://segmentfault.com/u/zh...，帶上了hash就可能是 https://segmentfault.com#!/u/zhoushx3。

開(kāi)發(fā)過(guò)SPA網(wǎng)站的朋友應(yīng)該知道，SPA是SEO不友好的（后面會(huì)解釋）。我們一般是會(huì)根據(jù)URL的路徑或者h(yuǎn)ash來(lái)渲染對(duì)應(yīng)的組件或頁(yè)面。打個(gè)比方：

網(wǎng)站首頁(yè)：aa.bb.com/index

點(diǎn)擊頁(yè)面某一按鈕，修改window.location.hash="#how"，URL變成aa.bb.com/index#how，同時(shí)通過(guò)ajax或者其他方式獲得數(shù)據(jù)并渲染。

點(diǎn)擊另一按鈕，修改window.location.hash="#what"，URL變成aa.bb.com/index#what，同時(shí)頁(yè)面更新渲染。

上面我舉的栗子是使用hash。當(dāng)然也可以使用如下的history模式，比如：

網(wǎng)站首頁(yè)：aa.bb.com/index

點(diǎn)擊頁(yè)面某一按鈕，執(zhí)行history.pushState({}, "", "/how")，URL會(huì)變成aa.bb.com/how

點(diǎn)擊頁(yè)面某一按鈕，執(zhí)行history.pushState({}, "", "/what")，URL會(huì)變成aa.bb.com/what

使用這種方式URL就會(huì)更好看點(diǎn)。

好像有點(diǎn)扯遠(yuǎn)了，其實(shí)我只是想找個(gè)引子帶出hash這貨而已，開(kāi)始。

認(rèn)識(shí)URL中的Hash

舉個(gè)栗子：http://www.zuodanye.com/pcent...，代號(hào)為W。
對(duì)應(yīng)下URL的組成：protocol :// hostname[:port] / path / ;parameters#fragment
沒(méi)錯(cuò)，#后面的部分也叫做fragment，帶有#的URL也叫Fragment URL。
這里fragment等同于hash.
在#左邊的代表這個(gè)資源在服務(wù)器的位置，右邊的則是指明資源內(nèi)的位置，可以理解成就是錨點(diǎn)。比如標(biāo)簽的用法，，當(dāng)點(diǎn)擊它的時(shí)候屏幕會(huì)滾到它的位置。

Fragment部分沒(méi)有包含在請(qǐng)求頭中

check it out:

據(jù)說(shuō)是因?yàn)镕ragment部分只對(duì)瀏覽器有用，也就是前端，并且它不會(huì)對(duì)服務(wù)器返回什么資源有所影響，所以這個(gè)部分就在Request URL中被忽略掉了。
所以如果把?key=value這部分放在了#后面，那么服務(wù)器在拿GET參數(shù)的時(shí)候就拿不到這塊了的哦。

Fragment的特點(diǎn)

修改window.location.hash也就是#后面并不會(huì)導(dǎo)致頁(yè)面刷新，這一點(diǎn)在優(yōu)化用戶體驗(yàn)上是大大的好。
雖然頁(yè)面不會(huì)刷新，不過(guò)會(huì)在瀏覽器的history記錄中添加一條記錄，所以返回和前進(jìn)按鈕就可以利用了。

說(shuō)說(shuō)Google爬蟲(chóng)（不同爬蟲(chóng)其原理應(yīng)該是差不多的）

Google爬蟲(chóng)在爬網(wǎng)站的時(shí)候，HTML中的內(nèi)容和內(nèi)嵌的鏈接會(huì)成為搜索索引的一部分。由于它并不具有一個(gè)腳本引擎，所以它只會(huì)爬網(wǎng)站的源碼而不會(huì)執(zhí)行任何腳本，這樣子#后面的部分就完全失去了作用，畢竟#只有javascrip才會(huì)去使用到。
所以，如果使用AJAX和#來(lái)區(qū)分路徑的話，這樣的路徑是不會(huì)被收錄到索引的。為了解決這個(gè)問(wèn)題，Google支持了一種轉(zhuǎn)化，即爬蟲(chóng)會(huì)把hash部分識(shí)別成URL參數(shù)，方式：

首先需要把#變成#!，即 http://www.zuodanye.com/pcent... ==> http://www.zuodanye.com/pcenter#!myProject

當(dāng)Google爬蟲(chóng)遇到這樣的URL，會(huì)將其識(shí)別成 http://www.zuodanye.com/pcent...。
這樣子我們只要為這個(gè)鏈接返回相應(yīng)的頁(yè)面或者數(shù)據(jù)即可。

不過(guò)這種方式還是顯得略不好看，所以如果瀏覽器支持history API的話，當(dāng)然還是用history的好。

總結(jié)

如果SPA網(wǎng)站要對(duì)SEO友好點(diǎn)的話，應(yīng)該至少有下面的部分：

利用history.pushState來(lái)修改URL，監(jiān)聽(tīng)onpopstate來(lái)相應(yīng)返回和前進(jìn)。
URL的變化可能如下：www.zuodanye.com -> www.zuodanye.com/pcenter -> www.zuodanye.com/home
這個(gè)過(guò)程中頁(yè)面不會(huì)刷新，用戶體驗(yàn)好。

server路由添加/pcenter和/home，以及對(duì)應(yīng)的Render頁(yè)面，這樣子就可以為不同路徑下的頁(yè)面編寫不同的TDK。

如果瀏覽器不支持histroyAPI，那就降級(jí)使用hash來(lái)切換不同的路徑，這樣子至少能夠不刷新跳轉(zhuǎn)，優(yōu)化體驗(yàn)。

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

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

相關(guān)文章

  • 前端學(xué)習(xí)之路之SPA(單頁(yè)應(yīng)用)設(shè)計(jì)原理

    摘要：設(shè)計(jì)設(shè)計(jì)意義前后端分離減輕服務(wù)器壓力增強(qiáng)用戶體驗(yàn)預(yù)渲染優(yōu)化前后端分離前端做業(yè)務(wù)邏輯，后端處理數(shù)據(jù)和接口，耦合度減少，開(kāi)發(fā)效率提高。響應(yīng)瀏覽器的前進(jìn)和后退。代碼實(shí)現(xiàn)演示圖結(jié)上就是設(shè)計(jì)原理愿你成為終身學(xué)習(xí)者 SPA設(shè)計(jì) 1、設(shè)計(jì)意義 前后端分離 減輕服務(wù)器壓力 增強(qiáng)用戶體驗(yàn) Prerender預(yù)渲染優(yōu)化SEO 前后端分離：前端做業(yè)務(wù)邏輯，后端處理數(shù)據(jù)和接口，耦合度減少，開(kāi)發(fā)效率提高。 ...

    Crazy_Coder 評(píng)論0 收藏0

  • 前端學(xué)習(xí)之路之SPA(單頁(yè)應(yīng)用)設(shè)計(jì)原理

    摘要：設(shè)計(jì)設(shè)計(jì)意義前后端分離減輕服務(wù)器壓力增強(qiáng)用戶體驗(yàn)預(yù)渲染優(yōu)化前后端分離前端做業(yè)務(wù)邏輯，后端處理數(shù)據(jù)和接口，耦合度減少，開(kāi)發(fā)效率提高。響應(yīng)瀏覽器的前進(jìn)和后退。代碼實(shí)現(xiàn)演示圖結(jié)上就是設(shè)計(jì)原理愿你成為終身學(xué)習(xí)者 SPA設(shè)計(jì) 1、設(shè)計(jì)意義 前后端分離 減輕服務(wù)器壓力 增強(qiáng)用戶體驗(yàn) Prerender預(yù)渲染優(yōu)化SEO 前后端分離：前端做業(yè)務(wù)邏輯，后端處理數(shù)據(jù)和接口，耦合度減少，開(kāi)發(fā)效率提高。 ...

    Barry_Ng 評(píng)論0 收藏0

  • 服務(wù)端預(yù)渲染之Nuxt（介紹篇）

    摘要：為了解決問(wèn)題，推出了服務(wù)端預(yù)渲染，以便提高對(duì)優(yōu)化。應(yīng)用，到了，單頁(yè)面應(yīng)用優(yōu)秀的用戶體驗(yàn)，逐漸成為了主流，頁(yè)面整體式渲染出來(lái)的，稱之為客戶端渲染?？蛻舳私邮諗?shù)據(jù)，然后完成最終渲染。通過(guò)對(duì)客戶端服務(wù)端基礎(chǔ)框架的抽象組織，主要關(guān)注的是應(yīng)用的渲染。 現(xiàn)在前端開(kāi)發(fā)一般都是前后端分離，mvvm和mvc的開(kāi)發(fā)框架，如Angular、React和Vue等，雖然寫框架能夠使我們快速的完成開(kāi)發(fā)，但是由于前...

    Shonim 評(píng)論0 收藏0

  • 處理 Vue 單頁(yè)面 SEO 的另一種思路

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

    shiweifu 評(píng)論0 收藏0

  • 處理 Vue 單頁(yè)面 SEO 的另一種思路

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

    yangrd 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

tomener

男|高級(jí)講師

TA的文章

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