利用 Puppeteer 優(yōu)化單頁面 Vue 博客的 SEO 策略
2024-10-12
Vue.js憑借其高性能的SPA功能在現(xiàn)代Web編程領(lǐng)域頗受歡迎。盡管其SEO表現(xiàn)欠佳，不利于搜索引擎抓取整個(gè)網(wǎng)站，但SEO對于提升用戶流量至關(guān)重要。本文將探討如何利用Node.js庫在不改動現(xiàn)有代碼的前提下，對Vue單頁面應(yīng)用的SEO進(jìn)行有效優(yōu)化。
Vue單頁面應(yīng)用的SEO挑戰(zhàn)
Vue.js的SPAs模式導(dǎo)致客戶端動態(tài)裝載內(nèi)容，極大提升了用戶交互體驗(yàn)，卻給搜索引擎爬蟲帶來挑戰(zhàn)。爬蟲通常只能檢索靜態(tài)HTML，Vue應(yīng)用中至關(guān)重要的動態(tài)內(nèi)容在首次加載時(shí)往往處于不可見狀態(tài)。因此，確保爬蟲能夠抓取頁面動態(tài)信息，成為Vue開發(fā)者亟需解決的難題。
Node.js庫的引入
wget?https://nodejs.org/dist/v17.9.0/node-v17.9.0-linux-x64.tar.gz為應(yīng)對該問題，建議采用一款Node.js庫，其具備高級API用以管理瀏覽器，并通過開發(fā)者協(xié)議實(shí)現(xiàn)。該庫預(yù)設(shè)為無頭模式執(zhí)行小程序開發(fā)，同時(shí)亦支持配置為有頭模式。利用此方法，能夠模擬瀏覽器活動并生成靜態(tài)HTML，便于搜索引擎抓取。
tar?-xzvf?node-v17.9.0-linux-x64.tar.gz安裝與配置Node.js庫
ln?-s?/opt/node-v17.9.0-linux-x64/bin/node?/usr/local/bin/
ln?-s?/opt/node-v17.9.0-linux-x64/bin/npm?/usr/local/bin/為了安裝Node.js，須訪問其安裝路徑，下載并解壓安裝包。隨后，建立符號鏈接以簡化命令訪問，并通過執(zhí)行`node-v`命令檢驗(yàn)安裝是否完成。接著，安裝必要的外部工具，搭建并切入項(xiàng)目文件夾seo優(yōu)化，安裝所需依賴庫。盡管過程細(xì)致，這些卻是實(shí)施SEO優(yōu)化的根本步驟。
創(chuàng)建服務(wù)器端運(yùn)行腳本
項(xiàng)目目錄中，須構(gòu)建數(shù)個(gè)核心腳本。初為頁面渲染腳本，專用于生成靜態(tài)HTML頁面內(nèi)容。次為性能優(yōu)化腳本，默認(rèn)禁用冗余功能，以提升訪問速度。終為服務(wù)器啟動腳本seo優(yōu)化，負(fù)責(zé)啟動服務(wù)器并供應(yīng)生成靜態(tài)內(nèi)容以供搜索引擎抓取。
npm?install?puppeteer?--save
npm?install?express
npm?install?html-minifier啟動與調(diào)試
yum?install?pango.x86_64?libXcomposite.x86_64?libXcursor.x86_64?libXdamage.x86_64?libXext.x86在服務(wù)器啟動后，運(yùn)用`tail-f.out`指令即能監(jiān)控日志以驗(yàn)證啟動狀態(tài)。若啟動不果，常見故障如端口沖突可用調(diào)整端口方法解決。啟動成功的標(biāo)志是日志中僅顯示“服務(wù)已啟動”，并無其他錯(cuò)誤信息。
配置與測試
const?puppeteer?=?require('./node_modules/puppeteer');//由于目錄不一致，所以使用的是絕對路徑
const?WSE_LIST?=?require('./puppeteer-pool.js');?//這里注意文件的路徑和文件名
const?spider?=?async?(url)?=>?{
????let?tmp?=?Math.floor(Math.random()?*?WSE_LIST.length);
????//隨機(jī)獲取瀏覽器
????let?browserWSEndpoint?=?WSE_LIST[tmp];
????//連接
????const?browser?=?await?puppeteer.connect({
????????browserWSEndpoint
????});
????
????//打開一個(gè)標(biāo)簽頁
????var?page?=?await?browser.newPage();
????
????//?Intercept?network?requests.
????await?page.setRequestInterception(true);
????page.on('request',?req?=>?{
??????//?Ignore?requests?for?resources?that?don't?produce?DOM
??????//?(images,?stylesheets,?media).
??????const?whitelist?=?['document',?'script',?'xhr',?'fetch'];
??????if?(!whitelist.includes(req.resourceType()))?{
????????return?req.abort();
??????}
??????
??????//?Pass?through?all?other?requests.
??????req.continue();
????});
????
????//打開網(wǎng)頁
????await?page.goto(url,?{
????????timeout:?20000,?//連接超時(shí)時(shí)間，單位ms
????????waitUntil:?'networkidle0'?//網(wǎng)絡(luò)空閑說明已加載完畢
????});
????
????//獲取渲染好的頁面源碼。不建議使用await?page.content();獲取頁面，因?yàn)樵谖覝y試中發(fā)現(xiàn)，頁面還沒有完全加載。就獲取到了。頁面源碼不完整。也就是動態(tài)路由沒有加載。vue路由也配置了history模式
????let?html?=?await?page.evaluate(()?=>?{
????????return?document.getElementsByTagName('html')[0].outerHTML;
????});
????await?page.close();
????return?html;
}
module.exports?=?spider;
成功啟動服務(wù)器后，執(zhí)行下列配置步驟。若采用寶塔面板，于偽靜態(tài)設(shè)置中插入必需代碼。配置完畢，應(yīng)用測試工具驗(yàn)證靜態(tài)HTML內(nèi)容的生成情況。對照配置前后的數(shù)據(jù)，可驗(yàn)證SEO優(yōu)化的成效。
常見問題與解決方法
const?puppeteer?=?require('./node_modules/puppeteer');
const?MAX_WSE?=?2;?//啟動幾個(gè)瀏覽器?
let?WSE_LIST?=?[];?//存儲browserWSEndpoint列表
//負(fù)載均衡
(async?()?=>?{
????for?(var?i?=?0;?i?<?MAX_WSE;?i++)?{
????????const?browser?=?await?puppeteer.launch({
????????????//無頭模式
????????????headless:?true,
????????????//參數(shù)
????????????args:?[
????????????????'--disable-gpu',
????????????????'--disable-dev-shm-usage',
????????????????'--disable-setuid-sandbox',
????????????????'--no-first-run',
????????????????'--no-sandbox',
????????????????'--no-zygote',
????????????????'--single-process'
????????????],
????????????//一般不需要配置這條，除非啟動一直報(bào)錯(cuò)找不到谷歌瀏覽器
????????????//executablePath:'chrome.exe在你本機(jī)上的路徑，例如C:/Program?Files/Google/chrome.exe'
????????});
????????let?browserWSEndpoint?=?await?browser.wsEndpoint();
????????WSE_LIST.push(browserWSEndpoint);
????}
})();
module.exports?=?WSE_LIST操作過程可能遭遇諸如端口占用或配置失誤等多種難題。我們將依據(jù)具體錯(cuò)誤指引，施行針對性措施。若3000端口遭占用，可通過修改配置以選用未被占用的端口號。細(xì)微調(diào)整將有助于保證服務(wù)器平穩(wěn)運(yùn)行。
const?express?=?require('./node_modules/express');
var?app?=?express();
var?spider?=?require("./spider.js");
var?minify?=?require('html-minifier').minify;
app.get('*',?async?(req,?res)?=>?{
????let?url?=?"https://www.shiyit.com"?+?req.originalUrl;
????console.log('請求的完整URL：'?+?url);
????let?content?=?await?spider(url).catch((error)?=>?{
????????console.log(error);
????????res.send('獲取html內(nèi)容失敗');
????????return;
????});
????//?通過minify庫壓縮代碼
????content=minify(content,{removeComments:?true,collapseWhitespace:?true,minifyJS:true,?minifyCSS:true});
????res.send(content);
});
app.listen(3000,?()?=>?{
????console.log('服務(wù)已啟動！');
});總結(jié)與展望
以上流程令Vue單頁面應(yīng)用SEO優(yōu)化在原代碼未改動的前提下成為可能。雖然實(shí)施過程可能較為繁瑣，遵循步驟逐一操作即可達(dá)成預(yù)期效果。展望未來，技術(shù)進(jìn)步有望帶來更便捷高效的做法。
nohup?node?service.js?&請問在執(zhí)行Vue單頁面應(yīng)用的搜索引擎優(yōu)化時(shí)網(wǎng)站開發(fā)，哪一環(huán)節(jié)最為棘手？敬請于評論區(qū)分享您的見解與經(jīng)驗(yàn)，同時(shí)不妨點(diǎn)贊與轉(zhuǎn)發(fā)本篇文章。
