Blazor交互式服务器应用：如何让Google爬虫获取<head>动态内容？

你的问题核心是Blazor Interactive Server默认采用客户端渲染模式，Google爬虫不会执行JavaScript，只能获取服务器初始发送的静态HTML，而OnInitializedAsync是在客户端浏览器中执行的，所以爬虫拿不到数据库填充的PageTitle和结构化数据。解决的核心是启用预渲染（Prerendering），让组件逻辑在服务器端先执行，生成包含动态数据的完整HTML再发送给客户端和爬虫。

具体步骤如下：

• 启用预渲染配置
  在项目的Program.cs中，修改交互式服务渲染模式的配置，开启预渲染：

  builder.Services.AddRazorComponents()
      .AddInteractiveServerRenderMode(prerender: true);
  

  或者在单个页面组件上指定预渲染模式，覆盖全局配置：

  @page "/your-page"
  @rendermode InteractiveServerPrerendered
  

• 确保服务器端可访问数据服务
  预渲染是在服务器端执行组件逻辑，所以要保证OnInitializedAsync中调用的数据库服务（比如你的数据访问层）能在服务器端正常运行。依赖注入的服务尽量用Scoped或Singleton生命周期，避免使用仅限客户端的服务（比如需要IJSRuntime的客户端专属服务）。

• 正确编写动态Head内容
  在组件中正常使用PageTitle和HeadContent，预渲染阶段这些内容会被服务器端渲染到HTML的<head>标签中，爬虫就能直接抓取到。示例代码：

  @page "/product/{ProductId:int}"
  @inject IProductRepository ProductRepo
  @using System.Text.Json
  
  <PageTitle>@Product?.Name - 商城</PageTitle>
  <HeadContent>
      <meta name="description" content="@Product?.Description" />
      <script type="application/ld+json">
          @JsonSerializer.Serialize(new {
              "@context" = "https://schema.org",
              "@type" = "Product",
              name = Product?.Name,
              description = Product?.Description,
              sku = Product?.Sku
          })
      </script>
  </HeadContent>
  
  @code {
      [Parameter] public int ProductId { get; set; }
      private Product? Product { get; set; }
  
      protected override async Task OnInitializedAsync()
      {
          // 预渲染时会在服务器端执行这个方法，获取数据库数据
          Product = await ProductRepo.GetByIdAsync(ProductId);
      }
  }
  

• 验证预渲染效果
  部署或运行项目后，右键页面选择「查看页面源代码」，如果能看到填充后的<title>和结构化数据，说明预渲染生效。此时再用Google富结果测试工具检测，就能获取到完整的渲染内容了。

注意：如果组件中有客户端专属逻辑（比如操作localStorage、调用浏览器API），需要在代码中判断当前是否处于预渲染环境，避免报错。可以通过OperatingSystem.IsBrowser或IJSRuntime的调用状态来判断：

protected override async Task OnInitializedAsync()
{
    if (OperatingSystem.IsBrowser)
    {
        // 仅在客户端执行的逻辑
        await JSRuntime.InvokeVoidAsync("someClientFunction");
    }
    // 服务器端和客户端都能执行的数据获取逻辑
    Product = await ProductRepo.GetByIdAsync(ProductId);
}

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