前言

什么是SEO ？

我們?nèi)粘ｎl繁借助搜索引擎，查找各類(lèi)信息。只需在搜索引擎中輸入簡(jiǎn)短字詞，按下回車(chē)，就能獲取所需內(nèi)容。然而，每個(gè)搜索關(guān)鍵詞往往對(duì)應(yīng)著成千上萬(wàn)的結(jié)果，搜索引擎依據(jù)自身算法對(duì)這些結(jié)果進(jìn)行排序，根據(jù)輸入的搜索詞，運(yùn)用算法將結(jié)果呈現(xiàn)給用戶。

對(duì)于網(wǎng)站所有者而言，自然期望自家網(wǎng)站信息能在搜索結(jié)果中名列前茅，這正是 SEO 的價(jià)值所在。

SEO 即 Search Engine Optimization，意為搜索引擎優(yōu)化。它是指利用搜索引擎的規(guī)則，提升網(wǎng)站在相關(guān)搜索引擎中的自然排名，旨在助力網(wǎng)站在行業(yè)內(nèi)占據(jù)領(lǐng)先地位，獲取品牌效益，本質(zhì)上是網(wǎng)站經(jīng)營(yíng)者為提升自身或公司排名而采取的商業(yè)行為。

SEO 是提升網(wǎng)站排名的有效方式，通過(guò)完善和優(yōu)化網(wǎng)站的排名因素，影響搜索引擎的排名算法。它是網(wǎng)絡(luò)營(yíng)銷(xiāo)策略（online marketing Digital strategy）與數(shù)字營(yíng)銷(xiāo)策略（Digital Marketing strategy）的關(guān)鍵環(huán)節(jié)，能提高網(wǎng)站在搜索引擎中的排名，進(jìn)而為網(wǎng)站帶來(lái)更多流量。

什么是SPA？

SPA 即 Single Page Application，也就是單頁(yè)面應(yīng)用。它的顯著特點(diǎn)是，網(wǎng)站所有效果都展示在一個(gè)靜態(tài)頁(yè)面中。當(dāng)用戶進(jìn)行頁(yè)面切換操作時(shí)，并非真正從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，而是通過(guò) JavaScript 動(dòng)態(tài)修改頁(yè)面內(nèi)容來(lái)實(shí)現(xiàn)。

SPA 頁(yè)面有著諸多優(yōu)點(diǎn)。從用戶體驗(yàn)角度來(lái)說(shuō)，數(shù)據(jù)切換加載速度更快，內(nèi)容變更無(wú)需重新加載整個(gè)頁(yè)面，避免了不必要的跳轉(zhuǎn)和重復(fù)渲染，極大提升了用戶體驗(yàn)。從技術(shù)層面看，渲染工作由客戶端完成，大大減輕了服務(wù)器的請(qǐng)求處理壓力；并且采用前后端分離開(kāi)發(fā)模式，前端專(zhuān)注于交互邏輯，后端負(fù)責(zé)數(shù)據(jù)處理，分工明確，有利于提高開(kāi)發(fā)效率和代碼維護(hù)性。

然而，SPA 也存在明顯缺點(diǎn)。在初次加載時(shí)，需要統(tǒng)一加載基礎(chǔ)的 JavaScript 和 CSS，部分頁(yè)面雖可按需加載，但整體加載量依然較大。在搜索引擎優(yōu)化（SEO）方面，由于所有內(nèi)容都在同一頁(yè)面動(dòng)態(tài)替換顯示，而爬蟲(chóng)蜘蛛在爬取網(wǎng)頁(yè)時(shí)，不會(huì)執(zhí)行其中的 JS 邏輯，這就導(dǎo)致隱藏在 JS 中的跳轉(zhuǎn)邏輯無(wú)法被執(zhí)行，使得搜索引擎蜘蛛難以爬取到頁(yè)面的數(shù)據(jù)內(nèi)容，在 SEO 上存在天然劣勢(shì)。

為什么要做SEO優(yōu)化？

首先，對(duì)于網(wǎng)站來(lái)說(shuō)，搜索引擎是用戶獲取網(wǎng)站信息的重要渠道。如果網(wǎng)站在搜索引擎中的呈現(xiàn)效果不佳，比如標(biāo)題和內(nèi)容與實(shí)際不符，關(guān)鍵信息無(wú)法被收錄，這將導(dǎo)致網(wǎng)站在搜索引擎中很難被用戶發(fā)現(xiàn)。

以 SPA 應(yīng)用為例，由于其自身特點(diǎn)（如內(nèi)容通過(guò) JavaScript 動(dòng)態(tài)修改，而搜索引擎爬蟲(chóng)通常不執(zhí)行 JS 邏輯），如果不進(jìn)行 SEO 優(yōu)化，搜索引擎抓取的內(nèi)容就會(huì)和實(shí)際頁(yè)面內(nèi)容脫節(jié)。這意味著網(wǎng)站的價(jià)值內(nèi)容無(wú)法通過(guò)搜索引擎?zhèn)鬟f給用戶，從而影響網(wǎng)站的流量和曝光度。

圖片

從用戶訪問(wèn)角度看，用戶在搜索引擎中查找信息時(shí)，主要是通過(guò)搜索結(jié)果中的標(biāo)題和摘要等來(lái)判斷是否點(diǎn)擊訪問(wèn)網(wǎng)站。如果搜索引擎展示的內(nèi)容不能準(zhǔn)確反映網(wǎng)站實(shí)際內(nèi)容，用戶就不太可能訪問(wèn)這個(gè)網(wǎng)站，這會(huì)導(dǎo)致網(wǎng)站失去潛在的訪問(wèn)量和客戶。

從網(wǎng)站運(yùn)營(yíng)角度講，流量是網(wǎng)站生存和發(fā)展的重要因素。沒(méi)有流量，網(wǎng)站的功能、產(chǎn)品或服務(wù)就無(wú)法得到有效傳播。因此，為了讓 SPA 應(yīng)用（以及其他類(lèi)型的網(wǎng)站）能夠在搜索引擎中正確地展示內(nèi)容，吸引用戶訪問(wèn)，進(jìn)行 SEO 優(yōu)化是非常必要的。

SEO優(yōu)化難點(diǎn)

頁(yè)面渲染問(wèn)題

在前后端分離的架構(gòu)下，原本直接嵌入在HTML中的頁(yè)面內(nèi)容被重構(gòu)為動(dòng)態(tài)元素，它們依賴于JavaScript在客戶端（瀏覽器）執(zhí)行后才能完整展現(xiàn)。這也就意味著搜索引擎爬蟲(chóng)在初步抓取頁(yè)面時(shí)，可能無(wú)法像對(duì)待靜態(tài)頁(yè)面那樣直觀地捕獲所有實(shí)質(zhì)性內(nèi)容，特別是在爬蟲(chóng)技術(shù)未能完全模擬瀏覽器執(zhí)行JavaScript的情況下，這可能會(huì)導(dǎo)致部分或全部關(guān)鍵信息無(wú)法被有效索引。

數(shù)據(jù)獲取方式

前后端分離架構(gòu)的核心在于通過(guò)API接口進(jìn)行數(shù)據(jù)傳輸，后端服務(wù)器將原本的內(nèi)嵌于HTML文檔中的數(shù)據(jù)提取至獨(dú)立的數(shù)據(jù)，并通過(guò)接口傳遞至前端應(yīng)用。

這種情況下，搜索引擎爬蟲(chóng)在抓取網(wǎng)頁(yè)時(shí)，無(wú)法直接從HTML源碼中抓取到具體業(yè)務(wù)數(shù)據(jù)，因?yàn)檫@一些數(shù)據(jù)是在請(qǐng)求服務(wù)端接口之后才被填充至頁(yè)面上來(lái)的。如果搜索引擎爬蟲(chóng)不去執(zhí)行這些接口請(qǐng)求或是不支持對(duì)AJAX等異步請(qǐng)求的跟蹤處理時(shí)，很有可能會(huì)錯(cuò)失大量有價(jià)值的內(nèi)容信息，進(jìn)而影響到我們網(wǎng)站在搜索引擎結(jié)果頁(yè)中的可見(jiàn)性以及排名表現(xiàn)。

服務(wù)器端渲染問(wèn)題

服務(wù)器端渲染可以說(shuō)得上是一種戰(zhàn)略性的技術(shù)手段了，它主要是為應(yīng)對(duì)前后端分離設(shè)計(jì)模式所帶來(lái)的SEO挑戰(zhàn)而生。它和傳統(tǒng)的客戶端渲染方式有所不同，SSR允許服務(wù)器向?yàn)g覽器發(fā)送響應(yīng)前，就已經(jīng)完成了對(duì)網(wǎng)頁(yè)內(nèi)容的完全構(gòu)建——也就是將用戶界面試圖預(yù)先在服務(wù)器端轉(zhuǎn)換成HTML格式文檔。

這也意味著，當(dāng)搜索引擎爬蟲(chóng)訪問(wèn)一個(gè)采用SSR技術(shù)的網(wǎng)站時(shí)，它們將能夠即時(shí)捕獲到豐富的、可供索引的內(nèi)容，并不需要瀏覽器執(zhí)行JavaScript后才能顯示到信息。在工作流程上，當(dāng)服務(wù)器接收到客戶端發(fā)出的HTTP請(qǐng)求時(shí)，它首先負(fù)責(zé)調(diào)用響應(yīng)的后臺(tái)邏輯，從數(shù)據(jù)庫(kù)或其他數(shù)據(jù)數(shù)據(jù)源檢索頁(yè)面展示所需的所有數(shù)據(jù)。接著，服務(wù)器會(huì)將這些實(shí)時(shí)數(shù)據(jù)注入到前端框架提供的HTML模版中，經(jīng)過(guò)頁(yè)面渲染引擎處理后，生成包含完整的DOM結(jié)構(gòu)和數(shù)據(jù)的靜態(tài)HTML頁(yè)面。

最后，這個(gè)已渲染完畢的HTML頁(yè)面將會(huì)被傳送到客戶端中（也就是用戶的瀏覽器中），從而實(shí)現(xiàn)了首屏內(nèi)容的快速加載以及對(duì)搜索引擎爬蟲(chóng)的高度友好。

技術(shù)方案選型

方案一 前端SSR

SSR（Server - Side Rendering，服務(wù)器端渲染）是當(dāng)下前端項(xiàng)目極為常用的優(yōu)化方案。其原理是頁(yè)面內(nèi)容由服務(wù)端進(jìn)行渲染生成，瀏覽器只需直接展示服務(wù)端返回的 HTML。這種方式優(yōu)勢(shì)顯著，它大幅提升了首屏加載速度，用戶無(wú)需長(zhǎng)時(shí)間等待頁(yè)面加載，能快速獲取信息，極大地優(yōu)化了用戶體驗(yàn)；同時(shí)，對(duì)于搜索引擎優(yōu)化（SEO）極為有利，搜索引擎爬蟲(chóng)能更好地抓取頁(yè)面關(guān)鍵內(nèi)容，提升網(wǎng)站在搜索結(jié)果中的排名，增加曝光與流量。

然而，SSR并非完美無(wú)缺。在實(shí)際應(yīng)用中，它存在一些不可忽視的弊端。一方面，項(xiàng)目若要引入 SSR，改造成本巨大，需要對(duì)原有的開(kāi)發(fā)架構(gòu)、代碼邏輯等進(jìn)行大規(guī)模調(diào)整；另一方面，開(kāi)發(fā)人員需要掌握額外的技術(shù)知識(shí)與技能，學(xué)習(xí)成本相對(duì)較高，這對(duì)團(tuán)隊(duì)技術(shù)能力提出了更高要求。

此外，由于渲染工作在服務(wù)端完成，服務(wù)端需承擔(dān)額外的計(jì)算壓力，在高并發(fā)場(chǎng)景下，可能導(dǎo)致服務(wù)器性能瓶頸，影響整體服務(wù)質(zhì)量。

方案二 無(wú)頭瀏覽器

資源占用過(guò)大，服務(wù)器負(fù)擔(dān)加重。無(wú)頭瀏覽器在渲染網(wǎng)頁(yè)時(shí)，需要模擬完整的瀏覽器環(huán)境，包括加載 HTML、CSS、JavaScript 等資源，執(zhí)行復(fù)雜的腳本邏輯，這會(huì)消耗大量的 CPU、內(nèi)存等服務(wù)器資源。對(duì)于一些小型網(wǎng)站或者服務(wù)器配置較低的情況，使用無(wú)頭瀏覽器可能會(huì)導(dǎo)致服務(wù)器性能下降，甚至出現(xiàn)崩潰的情況，影響網(wǎng)站的正常運(yùn)行。

成本增加。為了滿足無(wú)頭瀏覽器的資源需求，可能需要升級(jí)服務(wù)器硬件配置或者增加云服務(wù)的使用量，這無(wú)疑會(huì)增加網(wǎng)站運(yùn)營(yíng)的成本。例如，原本一臺(tái)普通配置的服務(wù)器可以滿足網(wǎng)站日常訪問(wèn)需求，但引入無(wú)頭瀏覽器后，需要更換為更高配置的服務(wù)器，或者增加服務(wù)器實(shí)例數(shù)量，這都會(huì)帶來(lái)額外的費(fèi)用支出。

方案三 PHP后端混合架構(gòu)

整體思路

借助反向代理把特定需收錄的頁(yè)面（像首頁(yè)、政策列表以及詳情頁(yè)等這類(lèi)頁(yè)面）導(dǎo)向獨(dú)立的 SEO 子系統(tǒng)。此子系統(tǒng)運(yùn)用前后端不分離的開(kāi)發(fā)模式，這里選用超高性能可擴(kuò)展PHP框架webman框架進(jìn)行開(kāi)發(fā)，以達(dá)成系統(tǒng)輕便實(shí)用且穩(wěn)定性高的目標(biāo)。

前端使用nginx代理，當(dāng)UA為爬蟲(chóng)請(qǐng)求時(shí)，直接反向代理到PHP的SEO路由，返回一個(gè)純凈的專(zhuān)門(mén)讓爬蟲(chóng)蜘蛛查看的專(zhuān)題頁(yè)頁(yè)面。

具體實(shí)現(xiàn)步驟

反向代理設(shè)置：反向代理是位于前端服務(wù)器的代理服務(wù)器，它接收客戶端的請(qǐng)求，再將請(qǐng)求轉(zhuǎn)發(fā)給內(nèi)部服務(wù)器，并把內(nèi)部服務(wù)器的響應(yīng)返回給客戶端。在這個(gè)方案里，需要把反向代理配置為將特定頁(yè)面請(qǐng)求轉(zhuǎn)發(fā)到獨(dú)立的 SEO 子系統(tǒng)。

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

前端正常系統(tǒng)配置

開(kāi)源技術(shù)小棧

Nginx 反向代理配置示例。反向代理是位于前端服務(wù)器的代理服務(wù)器

cms.tinywan.com.conf 配置文件

map $http_user_agent $is_spider {
    default 0;
    ~[\S\s]bot[\S\s] 1;
    ~[\S\s]Bot[\S\s] 1;
    ~[\S\s]pider[\S\s] 1;
    'DingTalk-LinkService/1.0' 1;
    'Yahoo! Slurp China' 1;
    'Mediapartners-Google' 1;
    'YisouSpider' 1;
}

server {
    listen 443 ssl http2;
    server_name cms.tinywan.com;
    root /home/www/website/cms.tinywan.com;

    location / {
        index index.html index.htm;
        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;
    }

    # SEO-新聞資訊-列表|詳情
    location ~ ^/news(list|detail)$ {
        if ($is_spider) {
            rewrite ^/news(list|detail)$ /seo/news/$1$is_args$args break;
            proxy_pass https://seo.tinywan.com;
        }
        try_files $uri $uri/ /index.html;
    }

    # SEO-首頁(yè)
    location = / {
        if ($is_spider) {
            rewrite / /seo/home/index$is_args$args break;
            proxy_pass https://seo.tinywan.com;
        }
        try_files $uri $uri/ /index.html;
    }

}

在上述配置中，/news/list 和 /news/detail 路徑的如果是正常訪問(wèn)請(qǐng)求會(huì)被轉(zhuǎn)發(fā)到正常業(yè)務(wù)系統(tǒng)，而如果是爬蟲(chóng)請(qǐng)求會(huì)被轉(zhuǎn)發(fā)到獨(dú)立的 SEO 子系統(tǒng)。

SEO 服務(wù)配置

seo.tinywan.com.conf 配置文件

server {
    listen 443 ssl ;
    server_name seo.tinywan.com;

    location ^~ / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header Access-Control-Allow-Origin *;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        proxy_pass http://127.0.0.1:8787;
    }
}

SEO子系統(tǒng)開(kāi)發(fā)

• 選擇 PHP 框架：為保證系統(tǒng)輕便實(shí)用且穩(wěn)定，這里選擇超高性能可擴(kuò)展PHP框架webman框架進(jìn)行開(kāi)發(fā)為例，它簡(jiǎn)潔輕量，易于上手。
• 前后端不分離開(kāi)發(fā)：前后端不分離意味著在服務(wù)器端生成完整的 HTML 頁(yè)面，然后直接返回給客戶端。

安裝webman

composer create-project workerman/webman

官方文檔：https://www.workerman.net/doc/webman/install.html

開(kāi)源技術(shù)小棧

安裝視圖模板，這里選用 think-template

composer require topthink/think-template

官方文檔：https://www.workerman.net/doc/webman/view.html

優(yōu)勢(shì)分析

• SEO 友好：前后端不分離的方式生成的 HTML 頁(yè)面（即SEO專(zhuān)題頁(yè)面），搜索引擎爬蟲(chóng)可以直接抓取頁(yè)面內(nèi)容，有利于提高網(wǎng)站在搜索引擎中的排名。
• 穩(wěn)定性高：PHP 是一種成熟且廣泛應(yīng)用的服務(wù)器端腳本語(yǔ)言，有豐富的資源和社區(qū)支持。選用合適的 PHP 框架可以保證系統(tǒng)的穩(wěn)定性和可維護(hù)性。
• 系統(tǒng)輕便：webman 輕量級(jí) PHP 框架對(duì)服務(wù)器資源的消耗較少，能夠滿足系統(tǒng)輕便實(shí)用的要求。