基于Nginx将WordPress博客集成至React应用并实现SEO优化咨询

我之前刚好经手过几乎一模一样的迁移需求，踩了不少坑，整理了一套能跑通的方案，包括Nginx配置、WordPress迁移步骤和SEO保障的关键点，分享给你：

要从子域名转到子路径，首先得修正WP的站点地址和内部链接：

• 能登录WP后台的话，直接去「设置」→「常规」，把**WordPress地址（URL）和站点地址（URL）**都改成 https://domain.com/blog
• 如果后台登不上，直接修改WP根目录的wp-config.php，添加两行强制设置：

define('WP_HOME','https://domain.com/blog');
define('WP_SITEURL','https://domain.com/blog');

• 最后必须替换数据库里的旧域名链接，避免内容里的图片、跳转还是指向旧地址，用SQL语句执行（记得替换wp_为你的数据库前缀）：

UPDATE wp_posts SET post_content = REPLACE(post_content, 'https://blog.domain.com', 'https://domain.com/blog');
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, 'https://blog.domain.com', 'https://domain.com/blog');

主域名是React单页应用，要让Nginx把/blog路径单独转发给WordPress，同时不影响React的路由。以下是完整的server块示例，你可以根据自己的文件路径调整：

server {
    listen 80;
    server_name domain.com www.domain.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name domain.com www.domain.com;

    # 替换成你的SSL证书路径
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # React应用的build目录作为主域名根目录
    root /var/www/react-app/build;
    index index.html;

    # 处理React单页路由：除了/blog，所有路径都交给React的index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 单独接管/blog路径，转发给WordPress
    location /blog {
        # WP的根目录（比如你的WP文件放在/var/www/wordpress，这里root就写/var/www）
        root /var/www;
        index index.php index.html index.htm;

        try_files $uri $uri/ /blog/index.php?$args;

        # PHP-FPM配置，根据你的PHP版本调整路径
        location ~ \.php$ {
            fastcgi_split_path_info ^(/blog)(/.*)$;
            fastcgi_pass unix:/run/php/php8.2-fpm.sock; # 换成你的PHP-FPM套接字路径
            fastcgi_index index.php;
            include fastcgi_params;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            fastcgi_param PATH_INFO $fastcgi_path_info;
        }
    }

    # 静态文件缓存优化，提升加载速度
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

关键提醒：这里用root而不是alias来映射WP路径，因为root会自动把location的路径拼接到根目录后，更适配WP在子路径下的路由逻辑，亲测比alias少踩很多坑。

既然我们让WP独立处理/blog路径，就完全避开了React单页应用的SEO缺陷——爬虫访问domain.com/blog时，直接拿到WP渲染的静态HTML，天生符合SEO要求。再做好这几点加固：

• 保留WP的SEO插件（比如Yoast SEO），重新配置博客的标题、描述、结构化数据
• 把旧的blog.domain.com全站301重定向到新路径，避免丢失原有权重，旧子域名的Nginx配置可以这么写：

server {
    listen 80;
    listen 443 ssl;
    server_name blog.domain.com;

    ssl_certificate /path/to/old/cert.pem;
    ssl_certificate_key /path/to/old/key.pem;

    return 301 https://domain.com/blog$request_uri;
}

• 登录Google Search Console，提交新的站点地图，同时标记旧子域名的站点已迁移

• 迁移后一定要去WP后台「设置」→「固定链接」，随便选一个规则点击保存，让WP重新生成内部路由规则
• 检查WP主题的自定义设置里是否有硬编码的旧域名链接（比如logo、导航栏跳转），手动替换成新路径
• 确保WP目录的权限是Nginx运行用户（通常是www-data）可读写，不然会出现上传图片失败、后台无法保存设置的问题

内容的提问来源于stack exchange，提问作者Ajith