非服務端渲染頁面如何做SEO

Lin_YT 發布于2019-08-20 18:02 / 511人閱讀

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

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

為什么要做SEO

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

解決方案 客戶端渲染應用的SEO

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

網站提交sitemap給Google；

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

_escaped_fragment_這個參數是Google指定的命名，如果開發者希望把網站內容提交給Google，就必須通過這個參數生成靜態頁面。
這種方案本質上是為搜索引擎提供多帶帶頁面，以供爬蟲收錄。

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

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

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

至于如何設置服務端，可以參看vue router教程history-mode;

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

首屏渲染主要內容到noscript標簽

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

利用History api 實現前端路由跳轉

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

通過服務端將頁面主要內容渲染近

在禁用js（爬蟲訪問時）,得到的dom結構如下圖

這樣瀏覽器即使禁用了js，依然能夠顯示出網站的關鍵內容，而頁面上的網址也是爬蟲繼續收錄的入口。

優化

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

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

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

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

      commit(actions.FETCH_FORUM_LIST_PENDING);

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

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

參考文檔

如何讓搜索引擎抓取AJAX內容
url的 #號
單頁應用SEO淺談

GPU云服務器云服務器服務器端如何做緩存如何做html頁面服務端渲染頁面渲染測速

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

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

細說 Vue 組件的服務器端渲染

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

reclay 2019-08-23 17:51 評論0 收藏0
細說后端模板渲染、客戶端渲染、node 中間層、服務器端渲染（ssr）

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

icyfire 2019-08-23 12:23 評論0 收藏0
淺談前后端分離與實踐之 nodejs 中間層服務（二）

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

ddongjian0000 2019-08-21 17:13 評論0 收藏0
淺談前后端分離與實踐之 nodejs 中間層服務（二）

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

mochixuan 2019-08-01 17:51 評論0 收藏0
ajax基礎知識

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

wangshijun 2019-08-22 15:47 評論0 收藏0