前言

大家可能都知道單頁面的SEO不友好，但是你有沒有思考過為什么單頁面的SEO不友好呢？在單頁面盛行的今天，有哪些策略來規(guī)避掉這一缺點(diǎn)呢？很好奇有木有？那就跟我一起開啟探索之旅吧~

搜索引擎的工作原理

在搜索引擎網(wǎng)站的后臺會有一個非常龐大的數(shù)據(jù)庫，里面存儲了海量的關(guān)鍵詞，而每個關(guān)鍵詞又對應(yīng)著很多網(wǎng)址，這些網(wǎng)址是被稱之為“搜索引擎蜘蛛”或“網(wǎng)絡(luò)爬蟲”程序從茫茫的互聯(lián)網(wǎng)上一點(diǎn)一點(diǎn)下載收集而來的。隨著各種各樣網(wǎng)站的出現(xiàn)，這些勤勞的“蜘蛛”每天在互聯(lián)網(wǎng)上爬行，從一個鏈接到另一個鏈接，下載其中的內(nèi)容，進(jìn)行分析提煉，找到其中的關(guān)鍵詞，如果“蜘蛛”認(rèn)為關(guān)鍵詞在數(shù)據(jù)庫中沒有而對用戶是有用的便存入后臺的數(shù)據(jù)庫中。反之，如果“蜘蛛”認(rèn)為是垃圾信息或重復(fù)信息，就舍棄不要，繼續(xù)爬行，尋找最新的、有用的信息保存起來提供用戶搜索。當(dāng)用戶搜索時，就能檢索出與關(guān)鍵字相關(guān)的網(wǎng)址顯示給訪客。一個關(guān)鍵詞對用多個網(wǎng)址，因此就出現(xiàn)了排序的問題，相應(yīng)的當(dāng)與關(guān)鍵詞最吻合的網(wǎng)址就會排在前面了。在“蜘蛛”抓取網(wǎng)頁內(nèi)容，提煉關(guān)鍵詞的這個過程中，就存在一個問題：“蜘蛛”能否看懂。如果網(wǎng)站內(nèi)容是flash和js等，那么它是看不懂的，會犯迷糊，即使關(guān)鍵字再貼切也沒用。相應(yīng)的，如果網(wǎng)站內(nèi)容可以被搜索引擎能識別，那么搜索引擎就會提高該網(wǎng)站的權(quán)重，增加對該網(wǎng)站的友好度。

SEO介紹

SEO是搜索引擎優(yōu)化(Search Engine Optimization)的英文縮寫,意指在了解搜索引擎自然排名機(jī)制的基礎(chǔ)上,對網(wǎng)站進(jìn)行內(nèi)部及外部的調(diào)整優(yōu)化,改進(jìn)網(wǎng)站在搜索引擎中的關(guān)鍵詞自然排名,獲得更多的流量,從而達(dá)成網(wǎng)站銷售以及品牌建設(shè)的預(yù)期目標(biāo).

SEO的主要工作是通過了解各類搜索引擎如何抓取互聯(lián)網(wǎng)頁面,如何進(jìn)行索引以及如何確定其對某一特定關(guān)鍵詞的搜索結(jié)果排名等技術(shù),來對網(wǎng)頁進(jìn)行相關(guān)的優(yōu)化,使其提高搜索引擎排名,從而提高訪問量,最終提升網(wǎng)站的銷售能力或宣傳能力的技術(shù).增加網(wǎng)站曝光率,提高整站權(quán)重,讓用戶更容易搜索到你的網(wǎng)站,進(jìn)而帶來客觀的流量.通過這一策略引流的優(yōu)點(diǎn)是: 1. 低成本; 2. 持久性; 3. 不需要承擔(dān)"無效點(diǎn)擊"的風(fēng)險.

這里簡單寫一點(diǎn)SEO的優(yōu)化方向:

網(wǎng)站設(shè)計優(yōu)化

網(wǎng)站主標(biāo)題關(guān)鍵詞優(yōu)化，必須選擇好關(guān)鍵詞，一般以“一個核心詞+三五個長尾詞”組合成標(biāo)題。

網(wǎng)站布局的優(yōu)化。一般來說，企業(yè)產(chǎn)品網(wǎng)站，主要是F型布局，內(nèi)容繁多的網(wǎng)站以“扁平結(jié)構(gòu)”布局為主。

代碼優(yōu)化，就是板塊、欄目代碼，最好使用對應(yīng)的簡拼或者全拼。

網(wǎng)站內(nèi)容優(yōu)化

分析欄目關(guān)鍵詞，有哪些長尾詞，挖掘出來，做成表格的形式。然后，逐個分析長尾詞都有哪些內(nèi)容有關(guān)，形成二級長尾詞。

根據(jù)挖掘的長尾詞，分析用戶需求，挖掘與之有關(guān)的內(nèi)容，整理出文章，發(fā)布在網(wǎng)站上，一定確保高質(zhì)量文章。

為什么說單頁面的SEO不友好

因?yàn)閱雾撁娴那闆r下的頁面中的很多內(nèi)容都是根據(jù)匹配到的路由動態(tài)生成并展示出來的,而且很多頁面內(nèi)容是通過ajax異步獲取的,網(wǎng)絡(luò)抓取工具并不會等待異步請求完成后再行抓取頁面內(nèi)容,對于網(wǎng)絡(luò)抓取工來說去準(zhǔn)確模擬相關(guān)的行為獲取復(fù)合數(shù)據(jù)是很困難的,它們更擅長對靜態(tài)資源的抓取和分析.

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

明白了問題出在哪里,“搜索引擎蜘蛛”或“網(wǎng)絡(luò)爬蟲”程序更擅長對靜態(tài)資源的抓取和更新,那我們就要采取相應(yīng)策略生成盡可能多的靜態(tài)資源,來讓網(wǎng)絡(luò)爬蟲獲取更多的數(shù)據(jù),從而提升網(wǎng)站的搜索排名.目前市面上用的比較多的就是以下兩種策略: 預(yù)渲染和SSR(服務(wù)端渲染).

簡單介紹下SEO的一些優(yōu)化策略:

預(yù)渲染

預(yù)渲染是基于prerender-spa-plugin在項(xiàng)目構(gòu)建時,通過無頭瀏覽器模擬瀏覽器請求,將得到的數(shù)據(jù)插入給出的模板中,從而生成已經(jīng)包含數(shù)據(jù)的html,這樣有了更多的靜態(tài)資源,網(wǎng)絡(luò)爬蟲可以抓取到更多的網(wǎng)站信息,提升網(wǎng)站的搜索排名.我最近在使用react做官網(wǎng),考慮到單頁面的SEO的問題和官網(wǎng)大多都是靜態(tài)資源,采用了預(yù)渲染技術(shù),想在這里跟大家分享一下.

這里的預(yù)渲染是使用prerender-spa-plugin模塊,結(jié)合webpack來生成一些路由對應(yīng)的靜態(tài)頁面.我的項(xiàng)目是使用create-react-app腳手架構(gòu)建的,在config-overrides.js里來進(jìn)行自定義的webpack配置.

// 在create-react-app 2.x以下的的版本里,

// 在config-overrides.js是這樣配置預(yù)渲染的

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');

// 除了單獨(dú)定義一個功能函數(shù)你還可以使用

// customize-cra提供的addWebpackPlugin來添加插件

// 感興趣的小伙伴可以自行百度使用方法

const addConfigPlugin = config => {

// 在這里我們還可以很方便的對config擴(kuò)展別的配置項(xiàng)

if(process.env.NODE_ENV === 'production') {

config.plugins = config.plugins.concat([

new PrerenderSPAPlugin({

routes: ['/', '/home', 'about'],

staticDir: path.join(__dirname, 'build'),

})

]);

}

return config

}

// 我的理解override函數(shù)的本質(zhì)還是處理config對象并返回

module.exports = override(

addConfigPlugin,

// 這里是按需加載antd

fixBabelImports('import', {

libraryName: 'antd',

libraryDirectory: 'es',

style: 'css'

})

)

復(fù)制代碼

create-react-app官方文檔關(guān)于預(yù)渲染也提供了相應(yīng)的解決方案戳這里.

SSR(服務(wù)端渲染)

服務(wù)端渲染就是先向后端服務(wù)器請求數(shù)據(jù),然后生成完整首屏html返回給瀏覽器, 服務(wù)端渲染返回給客戶端的是已經(jīng)獲取了異步數(shù)據(jù)并執(zhí)行JavaScript腳本的最終HTML,網(wǎng)絡(luò)爬蟲可以抓取到完整的頁面信息,SSR另一個很大的作用是加速首屏渲染,因?yàn)闊o需等待所有的JavaScript都完成下載并執(zhí)行,才顯示服務(wù)端渲染的標(biāo)記,所以用戶會更快地看到完整渲染的頁面.

SSR相比預(yù)渲染的優(yōu)勢

更快的構(gòu)建速度,SSR是動態(tài)插入數(shù)據(jù),并不會在構(gòu)建時就去預(yù)加載數(shù)據(jù),而是在輸入url后在服務(wù)端請求,拿到返回的數(shù)據(jù)插入模板后再返回給客戶端.

嵌套路由下的個性化頁面加載,個性化頁面無法進(jìn)行預(yù)渲染,SSR可以解決.

更好的SEO.

更快地首屏加載速度(請求業(yè)務(wù)數(shù)據(jù),和將數(shù)據(jù)render成html片段都在服務(wù)端進(jìn)行了,瀏覽器負(fù)責(zé)加載資源,請求CDN資源,css渲染,到達(dá)時間縮短.)

這里推薦一個基于Vue.js的服務(wù)端渲染應(yīng)用框架Nuxt.js,想要了解的可自行查看官方文檔.

我這里的代碼示例就采用最基礎(chǔ)簡潔的技術(shù)來實(shí)現(xiàn)一個簡單的Vue SSR的示例.完整版的實(shí)現(xiàn)戳這里

// 一個基礎(chǔ)版本的ssr的實(shí)現(xiàn)

const server = require('express')()

const Vue = require('vue')

const fs = require('fs')

const vueServerRender= require('vue-server-renderer');

// 生成一個render函數(shù)

const Renderer = vueServerRender.createRenderer({

// 定義一個基礎(chǔ)的模板頁面

template:fs.readFileSync('./src/index.template.html', 'utf-8')

})

server.get('*', (req, res) => {

// 創(chuàng)建一個vue組件

const app = new Vue({

data: {

name: 'this is vue ssr basic demo',

url: req.url

},

template:'

{{name}}, current url is: {{url}}'

})

const context = {

title: 'SSR test#'

}

// 將vue實(shí)例和對應(yīng)的傳參轉(zhuǎn)換成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;

// 運(yùn)行服務(wù)器端

server.listen(port, () => {

console.log(`server started at localhost:${port}`);

})

復(fù)制代碼

結(jié)合vue-server-renderer開發(fā)一個SSR項(xiàng)目,還是有一定挑戰(zhàn)的,我也是折騰了一番才成功運(yùn)行,會踩到的坑就是vue生成的Virtual Dom與服務(wù)端渲染的內(nèi)容不匹配的問題.

遇到這個問題需要檢查./entry-client.js中有沒有進(jìn)行狀態(tài)同步

.

如果你們想要動手實(shí)現(xiàn)一個不急于Nuxt框架的SSR項(xiàng)目,我的建議是先去查看官方文檔Nuxt,然后嘗試自己實(shí)現(xiàn)一個小型項(xiàng)目,遇到問題可以參考我的實(shí)現(xiàn)vue-ssr-demo,還有一個尤大寫的一個demo,這個demo實(shí)現(xiàn)的功能更強(qiáng)大,更完善,但是很多模塊的版本比較低,有些新版本的api可能會有所變化,有些模塊依賴node@9以下的版本,想要正確運(yùn)行可能需要費(fèi)點(diǎn)功夫vue-hackernews-2.0.大家在學(xué)習(xí)的過程中遇到問題或者有什么建議可在評論區(qū)留言或者加微信lj_de_wei_xin與我溝通.愿我們都能成為更好的自己~

擴(kuò)展閱讀

總結(jié)

以上是生活随笔為你收集整理的seo需要处理页面html,为什么单页面的seo不友好？如何解决这一问题？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。