引言

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

什么是Puppeteer

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

解決SEO問題

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

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

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

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

安裝依賴

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

npm install koa koa-router puppeteer

編寫后端代碼

我們先來編寫后端代碼，創(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è)新頁面
  await page.goto(url, {waitUntil: 'networkidle2'}); // 跳轉(zhuǎn)到目標(biāo)網(wǎng)站并等待頁面完全加載
  const html = await page.content(); // 獲取頁面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來處理路由。我們?yōu)?code>/ssr路徑創(chuàng)建了一個(gè)路由處理函數(shù)，該函數(shù)會(huì)使用Puppeteer來打開目標(biāo)網(wǎng)站，并返回該網(wǎng)站的HTML代碼。最后，我們將HTML代碼作為響應(yīng)體返回給前端。

測試后端代碼

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

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

node server/index.js

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

配置Nginx

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

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

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

在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（即請求頭中的User-Agent）與是否是搜索引擎的標(biāo)志$is_bot進(jìn)行了關(guān)聯(lián)。

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

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

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

總結(jié)

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

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

最新評論