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

資訊專欄INFORMATION COLUMN

記一段SPA的SEO歷程：Html5 History Api 大顯神通！

reclay / 2569人閱讀

摘要：用戶體驗(yàn)的需求，完美地保留了瀑布流模態(tài)框的閱讀模式。不支持的話，就不攔截瀑布流文塊的，也就是直接讓其跳轉(zhuǎn)。

背景

想當(dāng)年，我做了一個(gè)新媒體網(wǎng)站項(xiàng)目（AIISPO，已下線）。跟普通資訊網(wǎng)站不一樣的是，老板要求PC端前臺(tái)的文章閱讀模式一定得是瀑布流+模態(tài)框。瀑布流指的是以瀑布流的形式將文章羅列出來(lái)，而模態(tài)框則指的是點(diǎn)擊瀑布流中代表文章的某個(gè)文塊時(shí)，直接在當(dāng)前頁(yè)面彈出模態(tài)框來(lái)顯示文章正文。

瀑布流式的文章列表

利用模態(tài)框直接顯示文章正文

點(diǎn)擊瀑布流的某個(gè)文塊后，直接在當(dāng)前頁(yè)面彈出模態(tài)框來(lái)顯示正文以及文章相關(guān)內(nèi)容，可依稀透過(guò)模態(tài)框背景看到底層的瀑布流。點(diǎn)擊模態(tài)框背景可關(guān)閉模態(tài)框，相當(dāng)于回到瀑布流。

平常的開(kāi)始

其時(shí)，我正癡迷于MVVM框架avalon，于是，理所當(dāng)然地用avalon來(lái)渲染瀑布流的DOM樹(shù)。至于文章正文嘛，就用avalon給瀑布流中的各文塊綁定個(gè)click事件，順便把文章id給傳到click事件的callback里，執(zhí)行callback時(shí)就ajax讀一下文章正文，最后放到模態(tài)框里顯示就是了。
至此，老板要的“用戶體驗(yàn)”就達(dá)成了，老板夸我厲害還給我漲工資，我心里美美噠 n(≧▽≦)n

問(wèn)題初現(xiàn)

官網(wǎng)上線了幾天，老板給我提出了一個(gè)非?！皩?shí)際”的問(wèn)題，他沒(méi)法把文章的網(wǎng)址分享出去呀，這是因?yàn)椋?strong>官網(wǎng)本來(lái)就沒(méi)有獨(dú)立的文章頁(yè)面，更勿論文章的網(wǎng)址了！。當(dāng)務(wù)之急是創(chuàng)建出可供分享的文章網(wǎng)址。

Hashbang登場(chǎng)

老板不接受“跳轉(zhuǎn)新頁(yè)面”打開(kāi)文章正文的方案，堅(jiān)持一定要瀑布流+模態(tài)框，我只好琢磨別的思路了。首先我試用window.location.href="/article/1"，這是一定會(huì)使瀏覽器跳轉(zhuǎn)而無(wú)法保持在當(dāng)前頁(yè)面的，pass。接下來(lái)我查資料就搜到這Hashbang的方案：利用改變錨點(diǎn)#不會(huì)導(dǎo)致頁(yè)面跳轉(zhuǎn)這一特點(diǎn)，并加上!這一獨(dú)特的標(biāo)識(shí)，形成形如http://aiispo.cn/#!/article/1的網(wǎng)址。

具體的方案是這樣的：

大體上跟最初的方案一致。

不一樣的地方在于，打開(kāi)模態(tài)框的同時(shí)window.location.href="/#!/article/1"，這時(shí)地址欄的地址便變?yōu)?b>http://aiispo.cn/#!/article/1，也能保持不跳轉(zhuǎn)。

另外，給document.load綁上callback，也就是在頁(yè)面加載好后取當(dāng)前的hash（window.location.hash），會(huì)得到形如#!/article/1的字符串。正則匹配該字符串把文章ID取出，就可以直接顯示文章正文了。

在關(guān)閉模態(tài)框時(shí)，應(yīng)把地址欄恢復(fù)回來(lái)。

如此一來(lái)，用戶在閱讀文章時(shí)地址欄里的正是文章的“網(wǎng)址”，而當(dāng)用戶把網(wǎng)址分享給別人，別人復(fù)制到瀏覽器一打開(kāi)，就能看到那篇文章了。老板又夸我了，我心里又美美噠 n(≧▽≦)n

問(wèn)題再現(xiàn)

官網(wǎng)上線月余，百度僅收錄了首頁(yè)，我打開(kāi)首頁(yè)的快照一看，可只有avalon的模板標(biāo)簽，我一下子就醒悟過(guò)來(lái)了：百度根本就沒(méi)能爬到任何的文章，因?yàn)槭醉?yè)根本沒(méi)有任何文章的鏈接！
這時(shí)候我才意識(shí)到在SEO方面出了大問(wèn)題了，這對(duì)一個(gè)新媒體網(wǎng)站來(lái)說(shuō)可是致命的呀，把問(wèn)題報(bào)告老板后就趕緊開(kāi)動(dòng)腦筋想解決方案了。

小嘗試

把心一橫，把原本用avalon渲染的瀑布流，全部改回用PHP來(lái)渲染，同時(shí)給瀑布流的文塊加上標(biāo)簽，例如。由于加上了標(biāo)簽，地址欄就不需要手動(dòng)去改了。

問(wèn)題未解

又過(guò)了幾天，各個(gè)搜索引擎還是沒(méi)有動(dòng)靜，我便又開(kāi)始查資料：原來(lái)，國(guó)內(nèi)的搜索引擎在抓取頁(yè)面的時(shí)候，是不執(zhí)行js的。換句話說(shuō)，搜索引擎從http://aiispo.cn/#!/article/1這樣的網(wǎng)址進(jìn)去，只能看到瀑布流而看不到文章正文，因?yàn)槲恼抡氖呛竺嬗胘s渲染的，不執(zhí)行js就沒(méi)法渲染，而瀑布流是用PHP渲染成html的，搜索引擎能看得到。據(jù)說(shuō)Google是會(huì)執(zhí)行js的，不過(guò)作為一個(gè)國(guó)內(nèi)的網(wǎng)站，還是得優(yōu)先保證國(guó)內(nèi)的搜索引擎。

上Html5 History Api

思量良久，問(wèn)題還是出在文章沒(méi)有獨(dú)立的頁(yè)面上，另外Hashbang這種URL也不可靠，無(wú)法被后端識(shí)別。痛定思痛，這次一定要徹底解決問(wèn)題。

改造如下：

仿照模態(tài)框的UI，我給做了文章的獨(dú)立頁(yè)面，URL形如http://aiispo.cn/article/1。

Hashbang不成，我就找其它能修改地址欄但不跳轉(zhuǎn)的方案，結(jié)果就找到了Html5 History Api：

把瀑布流文塊里的改為。

改這href會(huì)導(dǎo)致用戶點(diǎn)擊后跳轉(zhuǎn)，因此需要用js攔截不讓其跳轉(zhuǎn)，并改為用window.history.pushState()來(lái)設(shè)置地址欄，此時(shí)用戶的地址欄應(yīng)為http://aiispo.cn/article/1。

$("#article-list a").on("click", function() {
  var url = $(this).attr("href");
  window.history.pushState(null, null, url);
  return false;
});

照樣用正則匹配出文章ID，并用模態(tài)框顯示文章正文。

如此一來(lái)，便兼顧了三方的需求：

SEO的需求，搜索引擎抓取瀑布流能抓到文章獨(dú)立頁(yè)面的URL（形如http://aiispo.cn/article/1），通過(guò)此URL進(jìn)入文章獨(dú)立頁(yè)面能抓取到文章正文。

用戶體驗(yàn)的需求，完美地保留了瀑布流+模態(tài)框的閱讀模式。

用戶分享文章網(wǎng)址的需求，用戶在瀑布流打開(kāi)文章時(shí)，地址欄正是文章獨(dú)立頁(yè)面的URL。

兼容性修正

上述方案依賴于Html5 History Api，而IE9及以下版本都是不支持Html5 History Api的，需要進(jìn)行兼容性修正。
在權(quán)衡利弊后，最終決定放棄IE9-用戶的用戶體驗(yàn)：

檢測(cè)當(dāng)前瀏覽器是否支持Html5 History Api。

不支持的話，就不攔截瀑布流文塊的，也就是直接讓其跳轉(zhuǎn)。

總結(jié)

我的這套方案，本質(zhì)上跟Prerender沒(méi)有區(qū)別，都是讓后端模擬前端渲染的方式生成一個(gè)獨(dú)立的頁(yè)面供搜索引擎抓取，既兼顧用戶體驗(yàn)，又不失SEO。

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

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

相關(guān)文章

  • 記一段SPA的SEO歷程：Html5 History Api 大顯神通！

    摘要：用戶體驗(yàn)的需求，完美地保留了瀑布流模態(tài)框的閱讀模式。不支持的話，就不攔截瀑布流文塊的，也就是直接讓其跳轉(zhuǎn)。 背景 想當(dāng)年，我做了一個(gè)新媒體網(wǎng)站項(xiàng)目（AIISPO，已下線）。跟普通資訊網(wǎng)站不一樣的是，老板要求PC端前臺(tái)的文章閱讀模式一定得是瀑布流+模態(tài)框。瀑布流指的是以瀑布流的形式將文章羅列出來(lái)，而模態(tài)框則指的是點(diǎn)擊瀑布流中代表文章的某個(gè)文塊時(shí)，直接在當(dāng)前頁(yè)面彈出模態(tài)框來(lái)顯示文章正文。 ...

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

  • 前端：將網(wǎng)站打造成單頁(yè)面應(yīng)用SPA（一）

    摘要：可以在各個(gè)頁(yè)面間傳遞數(shù)據(jù)，不依賴?？梢赃x擇性的保留狀態(tài)，如音樂(lè)網(wǎng)站，切換頁(yè)面時(shí)不會(huì)停止播放歌曲。減少了請(qǐng)求體積，節(jié)省流量，加快頁(yè)面響應(yīng)速度。將返回的替換到頁(yè)面中。不過(guò)這個(gè)參數(shù)目前并無(wú)作用，瀏覽器目前會(huì)選擇忽略它。 前言 不知你有沒(méi)有發(fā)現(xiàn)，像Github、百度、微博等這些大站，已經(jīng)不再使用普通的a標(biāo)簽做跳轉(zhuǎn)了。他們大多使用Ajax請(qǐng)求替代了a標(biāo)簽的默認(rèn)跳轉(zhuǎn)，然后使用HTML5的新API...

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

  • SPA那點(diǎn)事

    摘要：?jiǎn)雾?yè)面應(yīng)用的出現(xiàn)依然存在著爭(zhēng)議性，我們?cè)撊绾慰创膬擅嫘阅亟酉聛?lái)小生給大家總結(jié)一下他的優(yōu)缺點(diǎn)。單頁(yè)面應(yīng)用的優(yōu)勢(shì)無(wú)刷新體驗(yàn)沒(méi)有了令人詬病的頁(yè)面頻繁刷新，同時(shí)節(jié)約瀏覽器資源，路由響應(yīng)比較及時(shí)，提升了用戶的體驗(yàn)。 前端猿一天不學(xué)習(xí)就沒(méi)飯吃了，后端猿三天不學(xué)習(xí)仍舊有白米飯擺于桌前。IT行業(yè)的快速發(fā)展一直在推動(dòng)著前端技術(shù)棧在不斷地更新?lián)Q代，前端的發(fā)展成了互聯(lián)網(wǎng)時(shí)代的一個(gè)縮影。而單頁(yè)面應(yīng)用的發(fā)展...

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

  • SPA那點(diǎn)事

    摘要：?jiǎn)雾?yè)面應(yīng)用的出現(xiàn)依然存在著爭(zhēng)議性，我們?cè)撊绾慰创膬擅嫘阅亟酉聛?lái)小生給大家總結(jié)一下他的優(yōu)缺點(diǎn)。單頁(yè)面應(yīng)用的優(yōu)勢(shì)無(wú)刷新體驗(yàn)沒(méi)有了令人詬病的頁(yè)面頻繁刷新，同時(shí)節(jié)約瀏覽器資源，路由響應(yīng)比較及時(shí)，提升了用戶的體驗(yàn)。 前端猿一天不學(xué)習(xí)就沒(méi)飯吃了，后端猿三天不學(xué)習(xí)仍舊有白米飯擺于桌前。IT行業(yè)的快速發(fā)展一直在推動(dòng)著前端技術(shù)棧在不斷地更新?lián)Q代，前端的發(fā)展成了互聯(lián)網(wǎng)時(shí)代的一個(gè)縮影。而單頁(yè)面應(yīng)用的發(fā)展...

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

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

0條評(píng)論

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