如何让Next.js 14+Nginx网站在谷歌搜索正确显示AI Flavoured名称

一、网站名称显示异常问题分析与修复 #

你希望网站在谷歌搜索中显示名称「数字工坊」，但当前显示域名，问题主要来自Next.js元数据配置不规范，以及Nginx的错误配置：

1. Next.js元数据问题：

   • openGraph.site_name设置为带后缀的非标准名称，导致搜索引擎识别异常
   • metadataBase指向子路径，造成canonical URL等元数据路径错误
   • 存在无效的自定义name字段，干扰标准元数据解析

2. Nginx配置问题：

   • HTTP server块存在重复的listen 80和server_name，导致Nginx无法正确加载配置，请求转发异常

修复步骤： #

1. 修正Next.js metadata配置

统一网站名称为「数字工坊」，调整元数据为标准格式：

const website = process.env.WEBSITE_URL || 'https://aiflavoured.com';

export const metadata = {
  title: "数字工坊 | 图像生成、演示文稿制作、音频创作与PDF摘要",
  metadataBase: new URL(website), // 改为根域名，确保元数据路径正确
  description: "体验全面的数字化解决方案：生成精美图像、创建专业演示文稿、将文本转换为高质量音频、摘要PDF文档，提升你的工作效率。",
  applicationName: "数字工坊",
  authors: [
    {
      name: "Sourabh",
      url: "https://www.linkedin.com/in/sourabh-sharma-8987451a2/",
    },
  ],
  generator: "数字工坊",
  keywords: [
    "图像生成", "演示文稿制作", "音频创作", "PDF摘要", "在线工具"
  ],
  referrer: "origin",
  creator: "Sourabh",
  publisher: "数字工坊",
  robots: {
    index: true,
    follow: true,
  },
  alternates: { canonical: `${website}/flavours` }, // 设置完整的页面规范URL
  openGraph: {
    title: "数字工坊 | 图像生成、演示文稿制作、音频创作与PDF摘要",
    description: "体验全面的数字化解决方案：生成精美图像、创建专业演示文稿、将文本转换为高质量音频、摘要PDF文档，提升你的工作效率。",
    url: `${website}/flavours`,
    type: "website",
    locale: "en_IN",
    site_name: "数字工坊", // 统一为目标网站名称
  }
};

2. 修正Nginx HTTP配置

合并重复的HTTP server块，确保请求正确重定向到HTTPS：

server {
    listen 80;
    server_name aiflavoured.com www.aiflavoured.com;
    # 所有HTTP请求强制重定向到HTTPS
    return 301 https://$server_name$request_uri;
}

二、确保标题和元数据跨浏览器/设备正确显示的方法 #

• 使用标准元数据字段：严格遵循HTML标准和Open Graph协议，仅保留title、description、og:title、og:description等核心字段，避免自定义无效字段
• 验证元数据渲染：通过浏览器开发者工具的「Elements」标签查看<head>区域，确认元数据已正确注入
• 适配动态页面：若使用动态路由，通过Next.js的generateMetadata函数（App Router）为每个页面生成专属元数据，避免全局元数据覆盖
• 规避缓存干扰：在Nginx中为动态页面配置no-cache策略，防止旧元数据被缓存

三、Nginx+Next.js架构下的SEO优化措施 #

1. 规范Canonical URL：确保每个页面的规范URL唯一且正确，Next.js中通过alternates.canonical设置完整路径，Nginx避免修改请求路径导致URL不一致
2. 强制HTTPS访问：配置301重定向和HSTS头，提升网站安全性与搜索引擎权重
3. 优化静态资源缓存：为Next.js的/_next/static/路径下的静态资源设置长期缓存，添加immutable标记
4. 适配Next.js路由特性：确保Nginx将所有请求转发到Next.js，避免拦截SSG/SSR/ISR页面
5. 配置站点地图与 robots.txt：在Next.js中生成sitemap.xml，并通过Nginx确保这些文件可被爬虫访问
6. 消除重复内容：将www域名301重定向到主域名（或反之），避免搜索引擎收录重复页面

四、当前Nginx配置的安全性改进 #

当前配置存在重复块、SSL参数薄弱等问题，可从以下方向优化：

1. 修复重复配置：合并重复的HTTP server块，确保Nginx正常启动
2. 强化SSL配置：启用TLS 1.2/1.3，使用现代加密套件，禁用旧协议
3. 添加安全响应头：配置HSTS、X-Frame-Options、X-XSS-Protection等头，防范常见攻击
4. 限制请求资源：设置最大请求体大小，防止大文件上传攻击
5. 隐藏服务器信息：关闭Nginx版本显示，避免暴露敏感信息

优化后的Nginx HTTPS配置示例 #

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

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

    # 安全SSL参数
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    # HSTS强制HTTPS
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

    # 安全防护头
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header X-Content-Type-Options "nosniff" always;

    # 隐藏Nginx版本
    server_tokens off;

    # Next.js请求转发
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    # 静态资源缓存优化
    location /_next/static/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 限制最大请求体大小
    client_max_body_size 10M;
}

五、适配Next.js 14 ISR等特性的Nginx设置 #

Next.js 14的增量静态再生（ISR）需要Nginx配合完成缓存控制与请求转发，关键配置如下：

1. 禁用动态页面缓存：确保ISR的缓存策略由Next.js主导，Nginx不对动态页面进行缓存
2. 传递完整请求头：配置X-Forwarded-Proto等头，让Next.js正确识别请求协议与域名
3. 允许ISR刷新请求：放行/_next/data/*路径的POST请求，用于触发缓存更新
4. 启用HTTP/2：提升页面加载速度，配合Next.js的资源优化

ISR适配补充配置 #

# 处理ISR缓存刷新请求
location ~ ^/_next/data/ {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    # 禁用Nginx缓存，由Next.js管理ISR缓存
    proxy_cache off;
}

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