亚洲又粗又长又硬Av,丝袜人妻中文字幕国语,国产又粗又猛又大爽又黄www.,欧美大屁股爽爽

利用 Puppeteer 優(yōu)化單頁面 Vue 博客的 SEO 策略

2024-10-12

Vue.js憑借其高性能的SPA功能在現(xiàn)代Web編程領(lǐng)域頗受歡迎。盡管其SEO表現(xiàn)欠佳，不利于搜索引擎抓取整個網(wǎng)站，但SEO對于提升用戶流量至關(guān)重要。本文將探討如何利用Node.js庫在不改動現(xiàn)有代碼的前提下，對Vue單頁面應(yīng)用的SEO進行有效優(yōu)化。

Vue單頁面應(yīng)用的SEO挑戰(zhàn)

Vue.js的SPAs模式導(dǎo)致客戶端動態(tài)裝載內(nèi)容，極大提升了用戶交互體驗，卻給搜索引擎爬蟲帶來挑戰(zhàn)。爬蟲通常只能檢索靜態(tài)HTML，Vue應(yīng)用中至關(guān)重要的動態(tài)內(nèi)容在首次加載時往往處于不可見狀態(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é)議實現(xiàn)。該庫預(yù)設(shè)為無頭模式執(zhí)行小程序開發(fā)，同時亦支持配置為有頭模式。利用此方法，能夠模擬瀏覽器活動并生成靜態(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`命令檢驗安裝是否完成。接著，安裝必要的外部工具，搭建并切入項目文件夾seo優(yōu)化，安裝所需依賴庫。盡管過程細致，這些卻是實施SEO優(yōu)化的根本步驟。

創(chuàng)建服務(wù)器端運行腳本

項目目錄中，須構(gòu)建數(shù)個核心腳本。初為頁面渲染腳本，專用于生成靜態(tài)HTML頁面內(nèi)容。次為性能優(yōu)化腳本，默認禁用冗余功能，以提升訪問速度。終為服務(wù)器啟動腳本seo優(yōu)化，負責(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ù)器啟動后，運用`tail-f.out`指令即能監(jiān)控日志以驗證啟動狀態(tài)。若啟動不果，常見故障如端口沖突可用調(diào)整端口方法解決。啟動成功的標(biāo)志是日志中僅顯示“服務(wù)已啟動”，并無其他錯誤信息。

配置與測試

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);
????//隨機獲取瀏覽器
????let?browserWSEndpoint?=?WSE_LIST[tmp];
????//連接
????const?browser?=?await?puppeteer.connect({
????????browserWSEndpoint
????});
????
????//打開一個標(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,?//連接超時時間，單位ms
????????waitUntil:?'networkidle0'?//網(wǎng)絡(luò)空閑說明已加載完畢
????});
????
????//獲取渲染好的頁面源碼。不建議使用await?page.content();獲取頁面，因為在我測試中發(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)用測試工具驗證靜態(tài)HTML內(nèi)容的生成情況。對照配置前后的數(shù)據(jù)，可驗證SEO優(yōu)化的成效。

常見問題與解決方法

const?puppeteer?=?require('./node_modules/puppeteer');
const?MAX_WSE?=?2;?//啟動幾個瀏覽器?
let?WSE_LIST?=?[];?//存儲browserWSEndpoint列表
//負載均衡
(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'
????????????],
????????????//一般不需要配置這條，除非啟動一直報錯找不到谷歌瀏覽器
????????????//executablePath:'chrome.exe在你本機上的路徑，例如C:/Program?Files/Google/chrome.exe'
????????});
????????let?browserWSEndpoint?=?await?browser.wsEndpoint();
????????WSE_LIST.push(browserWSEndpoint);
????}
})();

module.exports?=?WSE_LIST

操作過程可能遭遇諸如端口占用或配置失誤等多種難題。我們將依據(jù)具體錯誤指引，施行針對性措施。若3000端口遭占用，可通過修改配置以選用未被占用的端口號。細微調(diào)整將有助于保證服務(wù)器平穩(wě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ù)已啟動！');
});