前言

什么是SEO ？

我們日常頻繁借助搜索引擎，查找各類信息。只需在搜索引擎中輸入簡短字詞，按下回車，就能獲取所需內容。然而，每個搜索關鍵詞往往對應著成千上萬的結果，搜索引擎依據自身算法對這些結果進行排序，根據輸入的搜索詞，運用算法將結果呈現給用戶。

對于網站所有者而言，自然期望自家網站信息能在搜索結果中名列前茅，這正是 SEO 的價值所在。

SEO 即 Search Engine Optimization，意為搜索引擎優化。它是指利用搜索引擎的規則，提升網站在相關搜索引擎中的自然排名，旨在助力網站在行業內占據領先地位，獲取品牌效益，本質上是網站經營者為提升自身或公司排名而采取的商業行為。

SEO 是提升網站排名的有效方式，通過完善和優化網站的排名因素，影響搜索引擎的排名算法。它是網絡營銷策略（online marketing Digital strategy）與數字營銷策略（Digital Marketing strategy）的關鍵環節，能提高網站在搜索引擎中的排名，進而為網站帶來更多流量。

什么是SPA？

SPA 即 Single Page Application，也就是單頁面應用。它的顯著特點是，網站所有效果都展示在一個靜態頁面中。當用戶進行頁面切換操作時，并非真正從一個頁面跳轉到另一個頁面，而是通過 JavaScript 動態修改頁面內容來實現。

SPA 頁面有著諸多優點。從用戶體驗角度來說，數據切換加載速度更快，內容變更無需重新加載整個頁面，避免了不必要的跳轉和重復渲染，極大提升了用戶體驗。從技術層面看，渲染工作由客戶端完成，大大減輕了服務器的請求處理壓力；并且采用前后端分離開發模式，前端專注于交互邏輯，后端負責數據處理，分工明確，有利于提高開發效率和代碼維護性。

然而，SPA 也存在明顯缺點。在初次加載時，需要統一加載基礎的 JavaScript 和 CSS，部分頁面雖可按需加載，但整體加載量依然較大。在搜索引擎優化（SEO）方面，由于所有內容都在同一頁面動態替換顯示，而爬蟲蜘蛛在爬取網頁時，不會執行其中的 JS 邏輯，這就導致隱藏在 JS 中的跳轉邏輯無法被執行，使得搜索引擎蜘蛛難以爬取到頁面的數據內容，在 SEO 上存在天然劣勢。

為什么要做SEO優化？

首先，對于網站來說，搜索引擎是用戶獲取網站信息的重要渠道。如果網站在搜索引擎中的呈現效果不佳，比如標題和內容與實際不符，關鍵信息無法被收錄，這將導致網站在搜索引擎中很難被用戶發現。

以 SPA 應用為例，由于其自身特點（如內容通過 JavaScript 動態修改，而搜索引擎爬蟲通常不執行 JS 邏輯），如果不進行 SEO 優化，搜索引擎抓取的內容就會和實際頁面內容脫節。這意味著網站的價值內容無法通過搜索引擎傳遞給用戶，從而影響網站的流量和曝光度。

圖片

從用戶訪問角度看，用戶在搜索引擎中查找信息時，主要是通過搜索結果中的標題和摘要等來判斷是否點擊訪問網站。如果搜索引擎展示的內容不能準確反映網站實際內容，用戶就不太可能訪問這個網站，這會導致網站失去潛在的訪問量和客戶。

從網站運營角度講，流量是網站生存和發展的重要因素。沒有流量，網站的功能、產品或服務就無法得到有效傳播。因此，為了讓 SPA 應用（以及其他類型的網站）能夠在搜索引擎中正確地展示內容，吸引用戶訪問，進行 SEO 優化是非常必要的。

SEO優化難點

頁面渲染問題

在前后端分離的架構下，原本直接嵌入在HTML中的頁面內容被重構為動態元素，它們依賴于JavaScript在客戶端（瀏覽器）執行后才能完整展現。這也就意味著搜索引擎爬蟲在初步抓取頁面時，可能無法像對待靜態頁面那樣直觀地捕獲所有實質性內容，特別是在爬蟲技術未能完全模擬瀏覽器執行JavaScript的情況下，這可能會導致部分或全部關鍵信息無法被有效索引。

數據獲取方式

前后端分離架構的核心在于通過API接口進行數據傳輸，后端服務器將原本的內嵌于HTML文檔中的數據提取至獨立的數據，并通過接口傳遞至前端應用。

這種情況下，搜索引擎爬蟲在抓取網頁時，無法直接從HTML源碼中抓取到具體業務數據，因為這一些數據是在請求服務端接口之后才被填充至頁面上來的。如果搜索引擎爬蟲不去執行這些接口請求或是不支持對AJAX等異步請求的跟蹤處理時，很有可能會錯失大量有價值的內容信息，進而影響到我們網站在搜索引擎結果頁中的可見性以及排名表現。

服務器端渲染問題

服務器端渲染可以說得上是一種戰略性的技術手段了，它主要是為應對前后端分離設計模式所帶來的SEO挑戰而生。它和傳統的客戶端渲染方式有所不同，SSR允許服務器向瀏覽器發送響應前，就已經完成了對網頁內容的完全構建——也就是將用戶界面試圖預先在服務器端轉換成HTML格式文檔。

這也意味著，當搜索引擎爬蟲訪問一個采用SSR技術的網站時，它們將能夠即時捕獲到豐富的、可供索引的內容，并不需要瀏覽器執行JavaScript后才能顯示到信息。在工作流程上，當服務器接收到客戶端發出的HTTP請求時，它首先負責調用響應的后臺邏輯，從數據庫或其他數據數據源檢索頁面展示所需的所有數據。接著，服務器會將這些實時數據注入到前端框架提供的HTML模版中，經過頁面渲染引擎處理后，生成包含完整的DOM結構和數據的靜態HTML頁面。

最后，這個已渲染完畢的HTML頁面將會被傳送到客戶端中（也就是用戶的瀏覽器中），從而實現了首屏內容的快速加載以及對搜索引擎爬蟲的高度友好。

技術方案選型

方案一 前端SSR

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

然而，SSR并非完美無缺。在實際應用中，它存在一些不可忽視的弊端。一方面，項目若要引入 SSR，改造成本巨大，需要對原有的開發架構、代碼邏輯等進行大規模調整；另一方面，開發人員需要掌握額外的技術知識與技能，學習成本相對較高，這對團隊技術能力提出了更高要求。

此外，由于渲染工作在服務端完成，服務端需承擔額外的計算壓力，在高并發場景下，可能導致服務器性能瓶頸，影響整體服務質量。

方案二 無頭瀏覽器

資源占用過大，服務器負擔加重。無頭瀏覽器在渲染網頁時，需要模擬完整的瀏覽器環境，包括加載 HTML、CSS、JavaScript 等資源，執行復雜的腳本邏輯，這會消耗大量的 CPU、內存等服務器資源。對于一些小型網站或者服務器配置較低的情況，使用無頭瀏覽器可能會導致服務器性能下降，甚至出現崩潰的情況，影響網站的正常運行。

成本增加。為了滿足無頭瀏覽器的資源需求，可能需要升級服務器硬件配置或者增加云服務的使用量，這無疑會增加網站運營的成本。例如，原本一臺普通配置的服務器可以滿足網站日常訪問需求，但引入無頭瀏覽器后，需要更換為更高配置的服務器，或者增加服務器實例數量，這都會帶來額外的費用支出。

方案三 PHP后端混合架構

整體思路

借助反向代理把特定需收錄的頁面（像首頁、政策列表以及詳情頁等這類頁面）導向獨立的 SEO 子系統。此子系統運用前后端不分離的開發模式，這里選用超高性能可擴展PHP框架webman框架進行開發，以達成系統輕便實用且穩定性高的目標。

前端使用nginx代理，當UA為爬蟲請求時，直接反向代理到PHP的SEO路由，返回一個純凈的專門讓爬蟲蜘蛛查看的專題頁頁面。

具體實現步驟

反向代理設置：反向代理是位于前端服務器的代理服務器，它接收客戶端的請求，再將請求轉發給內部服務器，并把內部服務器的響應返回給客戶端。在這個方案里，需要把反向代理配置為將特定頁面請求轉發到獨立的 SEO 子系統。

實現方案

前端正常系統配置

開源技術小棧

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

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-首頁
    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 路徑的如果是正常訪問請求會被轉發到正常業務系統，而如果是爬蟲請求會被轉發到獨立的 SEO 子系統。

SEO 服務配置

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子系統開發

• 選擇 PHP 框架：為保證系統輕便實用且穩定，這里選擇超高性能可擴展PHP框架webman框架進行開發為例，它簡潔輕量，易于上手。
• 前后端不分離開發：前后端不分離意味著在服務器端生成完整的 HTML 頁面，然后直接返回給客戶端。

安裝webman

composer create-project workerman/webman

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

開源技術小棧

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

composer require topthink/think-template

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

優勢分析

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