爲何單頁面的seo不友好？如何解決這一問題？

前言

你們可能都知道單頁面的SEO不友好，可是你有沒有思考過爲何單頁面的SEO不友好呢？在單頁面盛行的今天，有哪些策略來規避掉這一缺點呢？很好奇有木有？那就跟我一塊兒開啓探索之旅吧~

搜索引擎的工做原理

在搜索引擎網站的後臺會有一個很是龐大的數據庫，裏面存儲了海量的關鍵詞，而每一個關鍵詞又對應着不少網址，這些網址是被稱之爲「搜索引擎蜘蛛」或「網絡爬蟲」程序從茫茫的互聯網上一點一點下載收集而來的。隨着各類各樣網站的出現，這些勤勞的「蜘蛛」天天在互聯網上爬行，從一個連接到另外一個連接，下載其中的內容，進行分析提煉，找到其中的關鍵詞，若是「蜘蛛」認爲關鍵詞在數據庫中沒有而對用戶是有用的便存入後臺的數據庫中。反之，若是「蜘蛛」認爲是垃圾信息或重複信息，就捨棄不要，繼續爬行，尋找最新的、有用的信息保存起來提供用戶搜索。當用戶搜索時，就能檢索出與關鍵字相關的網址顯示給訪客。一個關鍵詞對用多個網址，所以就出現了排序的問題，相應的當與關鍵詞最吻合的網址就會排在前面了。在「蜘蛛」抓取網頁內容，提煉關鍵詞的這個過程當中，就存在一個問題：「蜘蛛」可否看懂。若是網站內容是flash和js等，那麼它是看不懂的，會犯迷糊，即便關鍵字再貼切也沒用。相應的，若是網站內容能夠被搜索引擎能識別，那麼搜索引擎就會提升該網站的權重，增長對該網站的友好度。

SEO介紹

SEO是搜索引擎優化(Search Engine Optimization)的英文縮寫,意指在瞭解搜索引擎天然排名機制的基礎上,對網站進行內部及外部的調整優化,改進網站在搜索引擎中的關鍵詞天然排名,得到更多的流量,從而達成網站銷售以及品牌建設的預期目標.

SEO的主要工做是經過了解各種搜索引擎如何抓取互聯網頁面,如何進行索引以及如何肯定其對某一特定關鍵詞的搜索結果排名等技術,來對網頁進行相關的優化,使其提升搜索引擎排名,從而提升訪問量,最終提高網站的銷售能力或宣傳能力的技術.增長網站曝光率,提升整站權重,讓用戶更容易搜索到你的網站,進而帶來客觀的流量.經過這一策略引流的優勢是: 1. 低成本; 2. 持久性; 3. 不須要承擔"無效點擊"的風險.

這裏簡單寫一點SEO的優化方向:

1. 網站設計優化

• 網站主標題關鍵詞優化，必須選擇好關鍵詞，通常以「一個核心詞+三五個長尾詞」組合成標題。
• 網站佈局的優化。通常來講，企業產品網站，主要是F型佈局，內容繁多的網站以「扁平結構」佈局爲主。
• 代碼優化，就是板塊、欄目代碼，最好使用對應的簡拼或者全拼。

2. 網站內容優化

• 分析欄目關鍵詞，有哪些長尾詞，挖掘出來，作成表格的形式。而後，逐個分析長尾詞都有哪些內容有關，造成二級長尾詞。
• 根據挖掘的長尾詞，分析用戶需求，挖掘與之有關的內容，整理出文章，發佈在網站上，必定確保高質量文章。

爲何說單頁面的SEO不友好

由於單頁面的狀況下的頁面中的不少內容都是根據匹配到的路由動態生成並展現出來的,並且不少頁面內容是經過ajax異步獲取的,網絡抓取工具並不會等待異步請求完成後再行抓取頁面內容,對於網絡抓取工來講去準確模擬相關的行爲獲取複合數據是很困難的,它們更擅長對靜態資源的抓取和分析.

如何解決單頁面SEO不友好的問題

明白了問題出在哪裏,「搜索引擎蜘蛛」或「網絡爬蟲」程序更擅長對靜態資源的抓取和更新,那咱們就要採起相應策略生成儘量多的靜態資源,來讓網絡爬蟲獲取更多的數據,從而提高網站的搜索排名.目前市面上用的比較多的就是如下兩種策略: 預渲染和SSR(服務端渲染).

簡單介紹下SEO的一些優化策略:

預渲染

預渲染是基於prerender-spa-plugin在項目構建時,經過無頭瀏覽器模擬瀏覽器請求,將獲得的數據插入給出的模板中,從而生成已經包含數據的html,這樣有了更多的靜態資源,網絡爬蟲能夠抓取到更多的網站信息,提高網站的搜索排名.我最近在使用react作官網,考慮到單頁面的SEO的問題和官網大多都是靜態資源,採用了預渲染技術,想在這裏跟你們分享一下.

這裏的預渲染是使用prerender-spa-plugin模塊,結合webpack來生成一些路由對應的靜態頁面.個人項目是使用create-react-app腳手架構建的,在config-overrides.js裏來進行自定義的webpack配置.

// 在create-react-app 2.x如下的的版本里,   
// 在config-overrides.js是這樣配置預渲染的
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');
module.exports = function override(config, env) {
  if (env === 'production') {
    config.plugins = config.plugins.concat([
      new PrerenderSPAPlugin({
        routes: ['/', '/home', 'about'],
        staticDir: path.join(__dirname, 'build'),
      }),
    ]);
  }
  return config;
};

// create-react-app 2.x 以上的ban版本是這樣配置的
const { override, fixBabelImports, addLessLoader, addWebpackAlias, addWebpackPlugin } = require('customize-cra');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');
// 除了單獨定義一個功能函數你還可使用
// customize-cra提供的addWebpackPlugin來添加插件
// 感興趣的小夥伴能夠自行百度使用方法
const addConfigPlugin = config => {
    // 在這裏咱們還能夠很方便的對config擴展別的配置項
    if(process.env.NODE_ENV === 'production') {
        config.plugins = config.plugins.concat([
            new PrerenderSPAPlugin({
                routes: ['/', '/home', 'about'],
                staticDir: path.join(__dirname, 'build'),
            })
        ]);
    }
    return config
}
// 個人理解override函數的本質仍是處理config對象並返回
module.exports =  override(
    addConfigPlugin,
    // 這裏是按需加載antd
    fixBabelImports('import', {        
        libraryName: 'antd',        
        libraryDirectory: 'es',       
        style: 'css'
    })
)
複製代碼

create-react-app官方文檔關於預渲染也提供了相應的解決方案戳這裏.

SSR(服務端渲染)

服務端渲染就是先向後端服務器請求數據,而後生成完整首屏html返回給瀏覽器, 服務端渲染返回給客戶端的是已經獲取了異步數據並執行JavaScript腳本的最終HTML,網絡爬蟲能夠抓取到完整的頁面信息,SSR另外一個很大的做用是加速首屏渲染,由於無需等待全部的JavaScript都完成下載並執行,才顯示服務端渲染的標記,因此用戶會更快地看到完整渲染的頁面.

SSR相比預渲染的優點

1. 更快的構建速度,SSR是動態插入數據,並不會在構建時就去預加載數據,而是在輸入url後在服務端請求,拿到返回的數據插入模板後再返回給客戶端.
2. 嵌套路由下的個性化頁面加載,個性化頁面沒法進行預渲染,SSR能夠解決.
3. 更好的SEO.
4. 更快地首屏加載速度(請求業務數據,和將數據render成html片斷都在服務端進行了,瀏覽器負責加載資源,請求CDN資源,css渲染,到達時間縮短.)

這裏推薦一個基於Vue.js的服務端渲染應用框架Nuxt.js,想要了解的可自行查看官方文檔.

我這裏的代碼示例就採用最基礎簡潔的技術來實現一個簡單的Vue SSR的示例.完整版的實現戳這裏

// 一個基礎版本的ssr的實現
const server = require('express')()
const Vue = require('vue')
const fs = require('fs')
const vueServerRender= require('vue-server-renderer');
// 生成一個render函數
const Renderer = vueServerRender.createRenderer({
    // 定義一個基礎的模板頁面
    template:fs.readFileSync('./src/index.template.html', 'utf-8')
})
server.get('*', (req, res) => {
    // 建立一個vue組件
    const app = new Vue({
        data: {
            name: 'this is vue ssr basic demo',
            url: req.url
        },
        template:'<div> {{name}}, current url is: {{url}}</div>'
    })
    const context = {
        title: 'SSR test#'
    }
    // 將vue實例和對應的傳參轉換成html字符串
    Renderer.renderToString(app, context, (err, html) => {
        if(err) {
            console.log(err)
            res.status(500).end('server error')
        }
        // 返回渲染完成的頁面
        res.end(html)
    })
})
const port = process.env.PORT || 8008;
// 運行服務器端
server.listen(port, () => {
  console.log(`server started at localhost:${port}`);
})
複製代碼

結合vue-server-renderer開發一個SSR項目,仍是有必定挑戰的,我也是折騰了一番才成功運行,會踩到的坑就是vue生成的Virtual Dom與服務端渲染的內容不匹配的問題.

遇到這個問題須要檢查./entry-client.js中有沒有進行狀態同步

.

若是大家想要動手實現一個不急於Nuxt框架的SSR項目,個人建議是先去查看官方文檔Nuxt,而後嘗試本身實現一個小型項目,遇到問題能夠參考個人實現vue-ssr-demo,還有一個尤大寫的一個demo,這個demo實現的功能更強大,更完善,可是不少模塊的版本比較低,有些新版本的api可能會有所變化,有些模塊依賴node@9如下的版本,想要正確運行可能須要費點功夫vue-hackernews-2.0.你們在學習的過程當中遇到問題或者有什麼建議可在評論區留言或者加微信lj_de_wei_xin與我溝通.願咱們都能成爲更好的本身~

擴展閱讀

• 什麼是服務端渲染、客戶端渲染、SPA、預渲染，看完這一篇就夠了
• 打牢基礎系列：JavaScript的變量和數據類型
• 精讀源碼系列: Vue中DOM的異步更新及Vue.nextTick()原理解析
• 打牢基礎系列: JavaScript的類繼承
• postMessage可太有用了
• 在vue中使用SockJS實現webSocket通訊