引言

在前端開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到SEO問(wèn)題，即搜索引擎無(wú)法正確爬取并收錄我們的網(wǎng)站，導(dǎo)致網(wǎng)站在搜索引擎中的排名較低。為了解決這個(gè)問(wèn)題，我們可以使用Puppeteer來(lái)實(shí)現(xiàn)服務(wù)端渲染（SSR），將網(wǎng)站的HTML代碼返回給搜索引擎爬蟲(chóng)。

什么是Puppeteer

Puppeteer是一個(gè)由Google Chrome團(tuán)隊(duì)開(kāi)發(fā)的Node.js庫(kù)，它提供了一個(gè)高級(jí)API，可以控制Chrome或Chromium瀏覽器的操作，實(shí)現(xiàn)類似于人類對(duì)瀏覽器的操作，比如打開(kāi)網(wǎng)頁(yè)、輸入文字、點(diǎn)擊按鈕等等。使用Puppeteer可以方便地進(jìn)行自動(dòng)化測(cè)試、爬蟲(chóng)、網(wǎng)頁(yè)截圖等操作。

解決SEO問(wèn)題

一般來(lái)說(shuō)，搜索引擎爬蟲(chóng)會(huì)在瀏覽器中加載網(wǎng)頁(yè)，然后將渲染后的HTML代碼進(jìn)行解析并進(jìn)行收錄。如果我們的網(wǎng)站是單頁(yè)應(yīng)用（SPA），只有在瀏覽器中執(zhí)行JavaScript代碼后才能渲染出頁(yè)面，那么搜索引擎爬蟲(chóng)就無(wú)法正確地解析和收錄我們的頁(yè)面。這時(shí)候就需要使用服務(wù)端渲染（SSR）來(lái)解決這個(gè)問(wèn)題。

使用Puppeteer可以模擬瀏覽器的行為，將我們的網(wǎng)站在瀏覽器中渲染出來(lái)，然后將渲染后的HTML代碼返回給搜索引擎爬蟲(chóng)。這樣搜索引擎就可以正確地解析和收錄我們的頁(yè)面，提高我們的網(wǎng)站在搜索引擎中的排名。

實(shí)現(xiàn)方式

在本文中，我們將使用Koa2作為后端框架，使用Nginx作為反向代理服務(wù)器，將請(qǐng)求區(qū)分為來(lái)自搜索引擎的請(qǐng)求和來(lái)自普通用戶的請(qǐng)求。對(duì)于搜索引擎的請(qǐng)求，我們將其轉(zhuǎn)發(fā)到Node服務(wù)，Node服務(wù)使用Puppeteer將網(wǎng)站渲染后返回HTML代碼。對(duì)于普通用戶的請(qǐng)求，我們直接將請(qǐng)求轉(zhuǎn)發(fā)到目標(biāo)網(wǎng)站即可。

安裝依賴

首先，我們需要安裝以下依賴：

npm install koa koa-router puppeteer

編寫后端代碼

我們先來(lái)編寫后端代碼，創(chuàng)建一個(gè)server.js文件，代碼如下：

const Koa = require('koa');
const Router = require('koa-router');
const puppeteer = require('puppeteer');
const app = new Koa();
const router = new Router();
router.get('/ssr', async (ctx, next) => {
  const url = 'http://your-domain.com'; // 目標(biāo)網(wǎng)站URL
  const browser = await puppeteer.launch(); // 啟動(dòng)Puppeteer瀏覽器
  const page = await browser.newPage(); // 創(chuàng)建一個(gè)新頁(yè)面
  await page.goto(url, {waitUntil: 'networkidle2'}); // 跳轉(zhuǎn)到目標(biāo)網(wǎng)站并等待頁(yè)面完全加載
  const html = await page.content(); // 獲取頁(yè)面HTML代碼
  await browser.close(); // 關(guān)閉瀏覽器
  ctx.body = html; // 將HTML代碼返回給前端
});
app.use(router.routes());
app.listen(4000, () => {
  console.log('Server is running at http://localhost:4000');
});

在上面的代碼中，我們創(chuàng)建了一個(gè)Koa實(shí)例，并使用koa-router來(lái)處理路由。我們?yōu)?code>/ssr路徑創(chuàng)建了一個(gè)路由處理函數(shù)，該函數(shù)會(huì)使用Puppeteer來(lái)打開(kāi)目標(biāo)網(wǎng)站，并返回該網(wǎng)站的HTML代碼。最后，我們將HTML代碼作為響應(yīng)體返回給前端。

測(cè)試后端代碼

我們已經(jīng)完成了后端代碼的編寫，現(xiàn)在可以啟動(dòng)后端服務(wù)并測(cè)試它是否能夠成功返回目標(biāo)網(wǎng)站的HTML代碼了。

在終端中執(zhí)行以下命令啟動(dòng)后端服務(wù)：

node server/index.js

訪問(wèn)http://localhost:4000/ssr，可以看到返回了目標(biāo)網(wǎng)站的HTML代碼。這證明后端代碼已經(jīng)可以正常工作了。

配置Nginx

現(xiàn)在我們需要將Nginx配置為區(qū)分搜索引擎和正常用戶，并將請(qǐng)求轉(zhuǎn)發(fā)到不同的服務(wù)。

區(qū)分搜索引擎和正常用戶

我們可以使用Nginx的$http_user_agent變量來(lái)判斷請(qǐng)求的來(lái)源。如果$http_user_agent中包含某些搜索引擎的關(guān)鍵字，那么該請(qǐng)求就是來(lái)自搜索引擎的。否則，就是正常用戶的請(qǐng)求。

在Nginx的配置文件中添加以下代碼：

http {
  map $http_user_agent $is_bot {
    default 0;
    ~*bot 1;
    ~*spider 1;
    ~*crawl 1;
    ~*Googlebot 1;
  }
  server {
    listen 80;
    server_name your-domain.com;
    location / {
      if ($is_bot) {
        proxy_pass http://127.0.0.1:4000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      }
      try_files $uri $uri/ /index.html;
    }
  }
}

上面的配置文件中，我們使用了Nginx的map模塊，將$http_user_agent（即請(qǐng)求頭中的User-Agent）與是否是搜索引擎的標(biāo)志$is_bot進(jìn)行了關(guān)聯(lián)。

在server塊中，我們?cè)O(shè)置監(jiān)聽(tīng)端口為80，server_name為你的域名（目前站點(diǎn)/前端項(xiàng)目）。

對(duì)于location /，我們先進(jìn)行了判斷，如果是搜索引擎，則轉(zhuǎn)發(fā)到本地的4000端口上（即Node服務(wù)的端口），否則直接使用try_files指令進(jìn)行靜態(tài)資源的尋找。

需要注意的是，在轉(zhuǎn)發(fā)請(qǐng)求時(shí)，我們使用了proxy_set_header指令，將一些請(qǐng)求頭信息傳遞給后端服務(wù)器，方便后端處理。

總結(jié)

在本文中，我們介紹了如何使用Puppeteer解決前端SEO問(wèn)題。我們使用了nginx作為反向代理服務(wù)器，利用其能力進(jìn)行請(qǐng)求分流，并Puppeteer進(jìn)行頁(yè)面渲染，最終將渲染后的HTML返回給搜索引擎。這個(gè)方案可以解決前端框架在SEO方面的弱點(diǎn)，提升網(wǎng)站在搜索引擎中的排名。 在實(shí)際應(yīng)用中，我們還需要考慮更多的問(wèn)題，比如Puppeteer的性能、網(wǎng)站的訪問(wèn)量、反爬蟲(chóng)等等。

以上就是Puppeteer解決SEO問(wèn)題方法的詳細(xì)內(nèi)容，更多關(guān)于Puppeteer SEO解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！