前言
大家可能都知道單頁面的SEO不友好，但是你有沒有思考過為什麼單頁面的SEO不友好呢？在單頁面盛行的今天，有哪些策略來規避掉這一缺點呢？很好奇有木有？那就跟我一起開啟探索之旅吧~
搜尋引擎的工作原理
在搜尋引擎網站的後臺會有一個非常龐大的資料庫，裡面儲存了海量的關鍵詞，而每個關鍵詞又對應著很多網址，這些網址是被稱之為“搜尋引擎蜘蛛”或“網路爬蟲”程式從茫茫的網際網路上一點一點下載收集而來的。隨著各種各樣網站的出現，這些勤勞的“蜘蛛”每天在網際網路上爬行，從一個連結到另一個連結，下載其中的內容，進行分析提煉，找到其中的關鍵詞，如果“蜘蛛”認為關鍵詞在資料庫中沒有而對使用者是有用的便存入後臺的資料庫中。反之，如果“蜘蛛”認為是垃圾資訊或重複資訊，就捨棄不要，繼續爬行，尋找最新的、有用的資訊儲存起來提供使用者搜尋。當使用者搜尋時，就能檢索出與關鍵字相關的網址顯示給訪客。一個關鍵詞對用多個網址，因此就出現了排序的問題，相應的當與關鍵詞最吻合的網址就會排在前面了。在“蜘蛛”抓取網頁內容，提煉關鍵詞的這個過程中，就存在一個問題：“蜘蛛”能否看懂。如果網站內容是flash和js等，那麼它是看不懂的，會犯迷糊，即使關鍵字再貼切也沒用。相應的，如果網站內容可以被搜尋引擎能識別，那麼搜尋引擎就會提高該網站的權重，增加對該網站的友好度。
SEO介紹
SEO是搜尋引擎優化(Search Engine Optimization)的英文縮寫,意指在瞭解搜尋引擎自然排名機制的基礎上,對網站進行內部及外部的調整優化,改進網站在搜尋引擎中的關鍵詞自然排名,獲得更多的流量,從而達成網站銷售以及品牌建設的預期目標.
SEO的主要工作是通過了解各類搜尋引擎如何抓取網際網路頁面,如何進行索引以及如何確定其對某一特定關鍵詞的搜尋結果排名等技術,來對網頁進行相關的優化,使其提高搜尋引擎排名,從而提高訪問量,最終提升網站的銷售能力或宣傳能力的技術.增加網站曝光率,提高整站權重,讓使用者更容易搜尋到你的網站,進而帶來客觀的流量.通過這一策略引流的優點是: 1. 低成本; 2. 永續性; 3. 不需要承擔"無效點選"的風險.
這裡簡單寫一點SEO的優化方向:
- 網站設計優化
- 網站主標題關鍵詞優化，必須選擇好關鍵詞，一般以“一個核心詞+三五個長尾詞”組合成標題。
- 網站佈局的優化。一般來說，企業產品網站，主要是F型佈局，內容繁多的網站以“扁平結構”佈局為主。
- 程式碼優化，就是板塊、欄目程式碼，最好使用對應的簡拼或者全拼。
- 網站內容優化
- 分析欄目關鍵詞，有哪些長尾詞，挖掘出來，做成表格的形式。然後，逐個分析長尾詞都有哪些內容有關，形成二級長尾詞。
- 根據挖掘的長尾詞，分析使用者需求，挖掘與之有關的內容，整理出文章，釋出在網站上，一定確保高質量文章。
為什麼說單頁面的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相比預渲染的優勢
- 更快的構建速度,SSR是動態插入資料,並不會在構建時就去預載入資料,而是在輸入url後在服務端請求,拿到返回的資料插入模板後再返回給客戶端.
- 巢狀路由下的個性化頁面載入,個性化頁面無法進行預渲染,SSR可以解決.
- 更好的SEO.
- 更快地首屏載入速度(請求業務資料,和將資料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與我溝通.願我們都能成為更好的自己~