前后端分离SEO混合架构终极解决方案-51CTO.COM

前言

什么是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 框架对服务器资源的消耗较少，能够满足系统轻便实用的要求。

前后端分离SEO混合架构终极解决方案

前言