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

資訊專欄INFORMATION COLUMN

非服務(wù)端渲染頁面如何做SEO

Lin_YT / 522人閱讀

摘要：這個方案的主要思想是利用實現(xiàn)前端路由跳轉(zhuǎn)通過服務(wù)端配置，支持不帶號的這個可酌情考慮，是否有必要通過服務(wù)端將頁面主要內(nèi)容渲染近標簽，供搜索爬蟲抓取這種模式下，不僅使頁面更好的被搜索引擎收錄，同時使網(wǎng)站在禁用的時候，也能夠瀏覽基本的帖子內(nèi)容。

前段時間對公司的社區(qū)h5網(wǎng)站，進行改版（整站重寫）。老版本的網(wǎng)站是在一套古老的php框架下開發(fā)的，包含很多模板文件，大部分頁面都是后端模板渲染，前端開發(fā)時要與后端溝通模板邏輯的編寫，前后端耦合嚴重，非常不利于開發(fā)。為了實現(xiàn)前后端分離，減輕服務(wù)端的渲染壓力，我們決定使用目前流行Vue框架，進行前端頁面組件化開發(fā)，使用前端路由，后端只提供數(shù)據(jù)接口和必要的模板變量渲染。
但這樣一來，網(wǎng)站的SEO就成為不得不考慮的重要問題之一，本文就是對我們實際開發(fā)中SEO解決方案的一個總結(jié)，介紹為什么要做SEO，客戶端渲染應(yīng)用的SEO解決方案，以及我們采用的方案。

為什么要做SEO

對于一般的功能性h5單頁應(yīng)用，因為其入口或使用場景的原因，使其對SEO并不敏感，例如微信下的滴滴打車。但對于社區(qū)類應(yīng)用，通過搜索引擎搜索對應(yīng)的帖子是基本的需求。因此在進行前期的技術(shù)方案調(diào)研時，我們首先考慮的是如何做網(wǎng)頁的SEO。
對于服務(wù)端渲染的頁面，由于頁面的HTML結(jié)構(gòu)直接由后端吐出，天然對搜索引擎支持良好，考慮更多的是如何讓網(wǎng)站搜索排名更靠前。而對于頁面由前端渲染，HTML結(jié)構(gòu)是js動態(tài)生成的網(wǎng)站，由于搜索引擎目前并不支持js渲染內(nèi)容的抓取，所以如何給搜索引擎爬蟲提供收錄的內(nèi)容，成為要考慮的首要問題。

解決方案 客戶端渲染應(yīng)用的SEO

常見的單頁應(yīng)用中，頁面的切換是通過URL中的哈希(#)來實現(xiàn)的，hash值得變化并不會發(fā)起瀏覽器請求，通過監(jiān)聽hashChnage事件，來實現(xiàn)前端的路由切換。對于這種應(yīng)用中，搜索引擎很難抓取不同頁面的內(nèi)容，而且頁面的渲染大多也是ajax異步獲取數(shù)據(jù)后進行渲染，更加不利于SEO。為此，Google提供了一套針對這種類型的網(wǎng)站開發(fā)者的SEO解決方案。
方案規(guī)定：

網(wǎng)站提交sitemap給Google；


Google發(fā)現(xiàn)URL里有#!符號，例如example.com/#!/detail/1，于是Google開始抓取example.com/?_escaped_fragment_=/detail/1；

_escaped_fragment_這個參數(shù)是Google指定的命名，如果開發(fā)者希望把網(wǎng)站內(nèi)容提交給Google，就必須通過這個參數(shù)生成靜態(tài)頁面。
這種方案本質(zhì)上是為搜索引擎提供多帶帶頁面，以供爬蟲收錄。

目前流行的前端路由庫，大多是使用了HTML5 History API，通過這種方式，使得前端hash跳轉(zhuǎn)同樣能夠很好的記錄歷史，兼容瀏覽器的前進后退按鈕，提供良好的用戶體驗。同時也都提供history模式，例如vue-router：

const router = new VueRouter({
  mode: "history",
  routes: routes
});

這種模式下，加上服務(wù)端的配合，能夠使前端路由更加接近后端路由，提供更加友好的url，
例如： http://domain.com/user/tom 等價于 非history模式下的http://domain.com/#/user/tom

至于如何設(shè)置服務(wù)端，可以參看vue router教程history-mode;

因為網(wǎng)頁的的地址發(fā)生了變化，瀏覽器會發(fā)起請求，但由于服務(wù)端設(shè)置，其實訪問的還是同一個資源。這種模式下，其實SEO就可以使用我們下面介紹的方案。

首屏渲染主要內(nèi)容到noscript標簽

這個方案是阮一峰的一篇文章如何讓搜索引擎抓取AJAX內(nèi)容？里提到的，也是我們最終采用的方案。
這個方案的主要思想是：

利用History api 實現(xiàn)前端路由跳轉(zhuǎn)

通過服務(wù)端配置，支持不帶#號的URL（這個可酌情考慮，是否有必要）

通過服務(wù)端將頁面主要內(nèi)容渲染近

這種模式下，不僅使頁面更好的被搜索引擎收錄，同時使網(wǎng)站在禁用javascript的時候，也能夠瀏覽基本的帖子內(nèi)容。

項目實際操作

我們使用了第二種方案，來做網(wǎng)站的SEO。
后端提供了一套機制來將頁面的主要內(nèi)容渲染進模板，供搜索引擎收錄。首次渲染之后，如果是用戶正常訪問頁面，后續(xù)的翻頁其實是ajax請求接口，獲取數(shù)據(jù)后渲染進頁面。如果是爬蟲或者禁用js的情況下，頁面通過noscript提供收錄內(nèi)容和渲染頁面。
先來看我們列表頁的結(jié)構(gòu)：

在禁用js（爬蟲訪問時）,得到的dom結(jié)構(gòu)如下圖

這樣瀏覽器即使禁用了js，依然能夠顯示出網(wǎng)站的關(guān)鍵內(nèi)容，而頁面上的網(wǎng)址也是爬蟲繼續(xù)收錄的入口。

優(yōu)化

其實，上面的方案在首屏渲染的時候，已經(jīng)包含了頁面所需的數(shù)據(jù)，而這些數(shù)據(jù)是可以被js渲染頁面時所利用的，將首屏數(shù)據(jù)渲染進js變量，就可以減少首屏渲染的http請求。

例如，我們將首屏的列表數(shù)據(jù)，渲染進全局變量，對應(yīng)的地址： https://domain/forum-22-1.htm...

然后在vuex獲取列表數(shù)據(jù)時，我們就可以判斷，如果當前頁面前端路由的頁面和后端的當前頁面是同一個，就直接在data_thread_list 取數(shù)據(jù)：

[actions.FETCH_FORUM_LIST]({commit, state}, params) {

      commit(actions.FETCH_FORUM_LIST_PENDING);

      if (window.data_current_page === params.page) { // 如果當前前端路由的頁面和后端的當前頁面是同一個，就直接在data_thread_list 取數(shù)據(jù)
        let forumlistData = window.data_thread_list.data;
        commit(actions.FETCH_FORUM_LIST_SUCCESS, forumlistData);
        return;
      }
      
      axios.get() // ajax請求獲取頁面數(shù)據(jù)。
}

這樣一來，當頁面首次渲染時，我們就不需要發(fā)起任何ajax請求：

參考文檔

如何讓搜索引擎抓取AJAX內(nèi)容
url的 #號
單頁應(yīng)用SEO淺談

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

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

相關(guān)文章

  • 細說 Vue 組件的服務(wù)器端渲染

    摘要：所以，這次就來聊聊組件的服務(wù)器端渲染。這種模式下，后端只提供接口，傳統(tǒng)的服務(wù)器端路由模板渲染則都有層接管。這樣，前端開發(fā)人員可以自由的決定哪些組件需要在服務(wù)器端渲染，哪些組件可以放在客戶端渲染，前后端完全解耦，但又保留了服務(wù)器端渲染的功能。 細說 Vue 組件的服務(wù)器端渲染 聲明：需要讀者對 NodeJs、Vue 服務(wù)器端渲染有一定的了解 現(xiàn)在，前后端分離與客戶端渲染已經(jīng)成為前端開發(fā)的...

    reclay 評論0 收藏0

  • 細說后端模板渲染、客戶端渲染、node 中間層、服務(wù)器端渲染（ssr）

    摘要：細說后端模板渲染客戶端渲染中間層服務(wù)器端渲染前端與后端渲染方式的發(fā)展大致經(jīng)歷了這樣幾個階段后端模板渲染客戶端渲染中間層服務(wù)器端渲染。與后端模板渲染剛好相反，客戶端渲染的頁面渲染都是在客戶端進行，后端不負責(zé)任何的渲染，只管數(shù)據(jù)交互。 細說后端模板渲染、客戶端渲染、node 中間層、服務(wù)器端渲染（ssr） 前端與后端渲染方式的發(fā)展大致經(jīng)歷了這樣幾個階段：后端模板渲染、客戶端渲染、node ...

    icyfire 評論0 收藏0

  • 淺談前后端分離與實踐 之 nodejs 中間層服務(wù)（二）

    摘要：服務(wù)端任需要進行校驗來達到數(shù)據(jù)的可靠性前端的路由可能在服務(wù)端并不存在等等這一系列重用性的問題。串行并行，大幅縮短請求時間。關(guān)于作者本人主頁本文部分圖片段落參考文章淘寶前后端分離實踐微信公眾號會不定期推送前端技術(shù)文章，歡迎關(guān)注 一、背景 書接上文，淺談前后端分離與實踐(一) 我們用mock服務(wù)器搭建起來了自己的前端數(shù)據(jù)模擬服務(wù)，前后端開發(fā)過程中只需定義好接口規(guī)范，便可以相互進行各自的開發(fā)...

    ddongjian0000 評論0 收藏0

  • 淺談前后端分離與實踐 之 nodejs 中間層服務(wù)（二）

    摘要：服務(wù)端任需要進行校驗來達到數(shù)據(jù)的可靠性前端的路由可能在服務(wù)端并不存在等等這一系列重用性的問題。串行并行，大幅縮短請求時間。關(guān)于作者本人主頁本文部分圖片段落參考文章淘寶前后端分離實踐微信公眾號會不定期推送前端技術(shù)文章，歡迎關(guān)注 一、背景 書接上文，淺談前后端分離與實踐(一) 我們用mock服務(wù)器搭建起來了自己的前端數(shù)據(jù)模擬服務(wù)，前后端開發(fā)過程中只需定義好接口規(guī)范，便可以相互進行各自的開發(fā)...

    mochixuan 評論0 收藏0

  • ajax基礎(chǔ)知識

    摘要：各瀏覽器都有自己的關(guān)于最大長度的限制谷歌火狐超過限制長度的部分，瀏覽器會自動截取掉，導(dǎo)致傳遞給服務(wù)器的數(shù)據(jù)缺失。 AJAX基礎(chǔ)知識及核心原理解讀 AJAX基礎(chǔ)知識 什么是AJAX？async javascript and xml，異步的JS和XML xml：可擴展的標記語言 作用是用來存儲數(shù)據(jù)的（通過自己擴展的標記名稱清晰的展示出數(shù)據(jù)結(jié)構(gòu)）ajax之所以稱為異步的js和xml，主要原因...

    wangshijun 評論0 收藏0

發(fā)表評論

0條評論

Lin_YT

男|高級講師

TA的文章

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