一、什么是seo？
SEO是由英文Search Engine
Optimization縮寫而來(lái)， 中文意譯為“搜索引擎優(yōu)化”天试。SEO是指通過對(duì)網(wǎng)站進(jìn)行站內(nèi)優(yōu)化和修復(fù)(網(wǎng)站W(wǎng)eb結(jié)構(gòu)調(diào)整、網(wǎng)站內(nèi)容建設(shè)然低、網(wǎng)站代碼優(yōu)化和編碼等)和站外優(yōu)化喜每，從而提高網(wǎng)站的網(wǎng)站關(guān)鍵詞排名以及公司產(chǎn)品的曝光度。通過搜索引擎查找信息是當(dāng)今網(wǎng)民們尋找網(wǎng)上信息和資源的主要手段雳攘。
二带兜、引擎蜘蛛的工作原理？
從 meta 標(biāo)簽中讀取 keywords 吨灭、 description 的內(nèi)容刚照。
根據(jù)語(yǔ)義化的 html 的標(biāo)簽爬取和分析內(nèi)容。一個(gè)整體都是用 div 標(biāo)簽的網(wǎng)站和正確使用了 html5 標(biāo)簽的效果是不一樣的喧兄。
讀取 a 標(biāo)簽里的鏈接无畔，通過 a 標(biāo)簽的鏈接可以跳轉(zhuǎn)到別的網(wǎng)站。（爬蟲是先跳轉(zhuǎn)吠冤，還是繼續(xù)爬內(nèi)容再跳轉(zhuǎn)浑彰，就看算法是廣度優(yōu)先還是深度優(yōu)先了）
像 h1 - h6 標(biāo)簽是具有不同程度的強(qiáng)調(diào)意義的。
一般將 h1 視為重要內(nèi)容咨演。同樣有強(qiáng)調(diào)內(nèi)容還有 strong 闸昨、 em 標(biāo)簽蚯斯。
三薄风、seo為啥對(duì)vue單頁(yè)面不友好?
1）、爬蟲在爬取的過程中拍嵌，不會(huì)去執(zhí)行js遭赂，所以隱藏在js中的跳轉(zhuǎn)也不會(huì)獲取到
2）、vue通過js控制路由然后渲染出對(duì)應(yīng)的頁(yè)面横辆，而搜索引擎蜘蛛是不會(huì)去執(zhí)行頁(yè)面的js的撇他，導(dǎo)致搜索引擎蜘蛛只能收錄index.html一個(gè)頁(yè)面，在百度中就搜索不到相關(guān)的子頁(yè)面的內(nèi)容。
3）困肩、我們加載頁(yè)面的時(shí)候,瀏覽器的渲染包含:html的解析划纽、dom樹的構(gòu)建、cssom構(gòu)建锌畸、javascript解析勇劣、布局、繪制,當(dāng)解析到j(luò)avascript的時(shí)候才回去觸發(fā)vue的渲染,然后元素掛載到id為app的div上,這個(gè)時(shí)候我們才能看到我們頁(yè)面的內(nèi)容,所以即使vue渲染機(jī)制很快我們?nèi)匀荒軌蚩吹揭欢螘r(shí)間的白屏情況,用戶體驗(yàn)不好
話不多說：使用prerender-spa-plugin解決
1潭枣、安裝prerender-spa-plugin：
npm install prerender-spa-plugin --save
2比默、配置vue.config.js代碼
// vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
? ? publicPath: "/",
? ? configureWebpack: config => {
? ? ? ? if (process.env.NODE_ENV !== 'production') return;
? ? ? ? return {
? ? ? ? ? ? plugins: [
? ? ? ? ? ? ? ? new PrerenderSPAPlugin({
? ? ? ? ? ? ? ? ? ? staticDir: path.join(__dirname, 'dist'),
? ? ? ? ? ? ? ? ? ? // 打包的路由路徑
? ? ? ? ? ? ? ? ? ? routes: ['/', '/solution', '/product', '/productDetails', '/news', '/newsDetails', '/download', '/AboutUs', '/contactUs'],
? ? ? ? ? ? ? ? ? ? ?// 這個(gè)很重要，如果沒有配置這段盆犁，也不會(huì)進(jìn)行預(yù)編譯
? ? ? ? ? ? ? ? ? ? renderer: new Renderer({
? ? ? ? ? ? ? ? ? ? ? ? inject: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? foo: "bar"
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? headless: false,
? ? ? ? ? ? ? ? ? ? ? ? // 最大頁(yè)面數(shù)
? ? ? ? ? ? ? ? ? ? ? ? maxConcurrentRoutes: 20,
? ? ? ? ? ? ? ? ? ? ? ? renderAfterTime: 500000,
? ? ? ? ? ? ? ? ? ? ? ? // 在 main.js 中 document.dispatchEvent(new Event('render-event'))命咐，兩者的事件名稱要對(duì)應(yīng)上。
? ? ? ? ? ? ? ? ? ? ? ? renderAfterDocumentEvent: 'render-event'
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ]
? ? ? ? }
? ? }
};
3谐岁、配置main.js
new Vue({
? router,
? store,
? render: h => h(App),
//添加到這里,這里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名稱一致
? mounted () {
? ? document.dispatchEvent(new Event('render-event'))
? }
}).$mount('#app')
4醋奠、路由router模式為 history ：
const router = new VueRouter({
? ? mode: 'history',
? ? routes
})
然后就是npm run build打包
遇到的問題
1.本地起服務(wù)測(cè)試,會(huì)發(fā)現(xiàn)能正常運(yùn)行，但是做了優(yōu)化的頁(yè)面刷新之后會(huì)沒有樣式造成問題的原因就是打包的時(shí)候vue.config.js的資源路徑配置不對(duì)沒有優(yōu)化之前的路徑是
打包之后路由下面的資源路徑是這樣的
重點(diǎn)：解決辦法
優(yōu)化之后的路徑是
打包之后的路由下面的資源路徑是這樣的
就是路徑前面多了一個(gè)/,采用了絕對(duì)路徑
2伊佃、需要一個(gè)服務(wù)來(lái)測(cè)試
1）钝域、執(zhí)行npm install anywhere -g 安裝anywhere
2）、在對(duì)應(yīng)路徑下打開cmd锭魔，執(zhí)行anywhere指令例证。如圖：
然后就可以在瀏覽器輸入地址訪了，可以看到每個(gè)路由對(duì)應(yīng)的 HTML
瀏覽器訪問http://你的ip:8000/contact后看到一下內(nèi)容以及對(duì)應(yīng)的html
鼠標(biāo)右鍵審查元素可以看到
然后就是為這些打包的靜態(tài)頁(yè)面分配title和meta標(biāo)簽迷捧，需要用到?vue-meta-info
這樣在組件頁(yè)面中就可以使用了
假設(shè)你要給demo.vue添加title织咧，meta標(biāo)簽
到此SEO優(yōu)化基本已經(jīng)完成
如果對(duì)你有用，請(qǐng)贊一個(gè)再走
