seo需要处理页面html,为什么单页面的seo不友好?如何解决这一问题?
前言
大家可能都知道單頁面的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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: jmeter生成html报告修改,jme
- 下一篇: html5纪念日期代码,HTML5适合的