国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Lyux / 1443人閱讀

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

背景

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

瀑布流式的文章列表

利用模態框直接顯示文章正文

點擊瀑布流的某個文塊后，直接在當前頁面彈出模態框來顯示正文以及文章相關內容，可依稀透過模態框背景看到底層的瀑布流。點擊模態框背景可關閉模態框，相當于回到瀑布流。

平常的開始

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

問題初現

官網上線了幾天，老板給我提出了一個非常“實際”的問題，他沒法把文章的網址分享出去呀，這是因為：官網本來就沒有獨立的文章頁面，更勿論文章的網址了！。當務之急是創建出可供分享的文章網址。

Hashbang登場

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

具體的方案是這樣的：

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

不一樣的地方在于，打開模態框的同時window.location.href="/#!/article/1"，這時地址欄的地址便變為http://aiispo.cn/#!/article/1，也能保持不跳轉。

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

在關閉模態框時，應把地址欄恢復回來。

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

問題再現

官網上線月余，百度僅收錄了首頁，我打開首頁的快照一看，可只有avalon的模板標簽，我一下子就醒悟過來了：百度根本就沒能爬到任何的文章，因為首頁根本沒有任何文章的鏈接！
這時候我才意識到在SEO方面出了大問題了，這對一個新媒體網站來說可是致命的呀，把問題報告老板后就趕緊開動腦筋想解決方案了。

小嘗試

把心一橫，把原本用avalon渲染的瀑布流，全部改回用PHP來渲染，同時給瀑布流的文塊加上標簽，例如。由于加上了標簽，地址欄就不需要手動去改了。

問題未解

又過了幾天，各個搜索引擎還是沒有動靜，我便又開始查資料：原來，國內的搜索引擎在抓取頁面的時候，是不執行js的。換句話說，搜索引擎從http://aiispo.cn/#!/article/1這樣的網址進去，只能看到瀑布流而看不到文章正文，因為文章正文是后面用js渲染的，不執行js就沒法渲染，而瀑布流是用PHP渲染成html的，搜索引擎能看得到。據說Google是會執行js的，不過作為一個國內的網站，還是得優先保證國內的搜索引擎。

上Html5 History Api

思量良久，問題還是出在文章沒有獨立的頁面上，另外Hashbang這種URL也不可靠，無法被后端識別。痛定思痛，這次一定要徹底解決問題。

改造如下：

仿照模態框的UI，我給做了文章的獨立頁面，URL形如http://aiispo.cn/article/1。

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

把瀑布流文塊里的改為。

改這href會導致用戶點擊后跳轉，因此需要用js攔截不讓其跳轉，并改為用window.history.pushState()來設置地址欄，此時用戶的地址欄應為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，并用模態框顯示文章正文。

如此一來，便兼顧了三方的需求：

SEO的需求，搜索引擎抓取瀑布流能抓到文章獨立頁面的URL（形如http://aiispo.cn/article/1），通過此URL進入文章獨立頁面能抓取到文章正文。

用戶體驗的需求，完美地保留了瀑布流+模態框的閱讀模式。

用戶分享文章網址的需求，用戶在瀑布流打開文章時，地址欄正是文章獨立頁面的URL。

兼容性修正

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

檢測當前瀏覽器是否支持Html5 History Api。

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

總結

我的這套方案，本質上跟Prerender沒有區別，都是讓后端模擬前端渲染的方式生成一個獨立的頁面供搜索引擎抓取，既兼顧用戶體驗，又不失SEO。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78286.html

相關文章

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

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

    reclay 評論0 收藏0

  • 前端：將網站打造成單頁面應用SPA（一）

    摘要：可以在各個頁面間傳遞數據，不依賴。可以選擇性的保留狀態，如音樂網站，切換頁面時不會停止播放歌曲。減少了請求體積，節省流量，加快頁面響應速度。將返回的替換到頁面中。不過這個參數目前并無作用，瀏覽器目前會選擇忽略它。 前言 不知你有沒有發現，像Github、百度、微博等這些大站，已經不再使用普通的a標簽做跳轉了。他們大多使用Ajax請求替代了a標簽的默認跳轉，然后使用HTML5的新API...

    youkede 評論0 收藏0

  • SPA那點事

    摘要：單頁面應用的出現依然存在著爭議性，我們該如何看待他的兩面性呢接下來小生給大家總結一下他的優缺點。單頁面應用的優勢無刷新體驗沒有了令人詬病的頁面頻繁刷新，同時節約瀏覽器資源，路由響應比較及時，提升了用戶的體驗。 前端猿一天不學習就沒飯吃了，后端猿三天不學習仍舊有白米飯擺于桌前。IT行業的快速發展一直在推動著前端技術棧在不斷地更新換代，前端的發展成了互聯網時代的一個縮影。而單頁面應用的發展...

    PumpkinDylan 評論0 收藏0

  • SPA那點事

    摘要：單頁面應用的出現依然存在著爭議性，我們該如何看待他的兩面性呢接下來小生給大家總結一下他的優缺點。單頁面應用的優勢無刷新體驗沒有了令人詬病的頁面頻繁刷新，同時節約瀏覽器資源，路由響應比較及時，提升了用戶的體驗。 前端猿一天不學習就沒飯吃了，后端猿三天不學習仍舊有白米飯擺于桌前。IT行業的快速發展一直在推動著前端技術棧在不斷地更新換代，前端的發展成了互聯網時代的一個縮影。而單頁面應用的發展...

    Lsnsh 評論0 收藏0

發表評論

0條評論

Lyux

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<