含Blazor WebAssembly组件的Razor Pages页面谷歌索引异常求助

问题描述 #

我有一个ASP.NET Core Razor Pages网站，大部分纯服务器渲染页面能被谷歌正常索引，但三个包含Blazor WebAssembly组件的页面处于已抓取 - 未编入索引状态，在Google Search Console提交索引请求时，会收到错误：

Oops! Something went wrong
We had a problem submitting your indexing request. Please try again later.

示例页面代码：

@page "/exercises/left/{id:int?}"
@using Keyboardy.Backend.Client.Services
@model Keyboardy.Backend.Pages.Exercises.LeftModel

<section class="section">
    <h1> This is importent information </h1>
    <p> This is also important</p>

    <div id="interactive-section">
        <component type="typeof(Core.Blazor.KeyboardContainer)" render-mode="WebAssembly" />
    </div>
</section>

@section Scripts {
    <script src="~/_framework/blazor.webassembly.js"></script>
}

已知谷歌不会执行客户端Blazor内容，仅关注服务器已渲染的HTML部分，已尝试：

• 纯Razor Pages页面索引正常；
• 延迟加载blazor.webassembly.js（用setTimeout），提交索引仍报错；
• 移除Blazor组件代码，问题依旧，推测错误源于加载blazor.webassembly.js时的大量wasm文件。

解决方案 #

1. 给爬虫单独屏蔽Blazor脚本加载 #

直接在页面里加判断，只有非爬虫请求才加载Blazor的WASM脚本：

@section Scripts {
    @if (!HttpContext.Request.Headers["User-Agent"].ToString().Contains("Googlebot", StringComparison.OrdinalIgnoreCase))
    {
        <script src="~/_framework/blazor.webassembly.js"></script>
    }
}

要是想覆盖更多搜索引擎爬虫，比如Bingbot、Yahoo Slurp，直接在判断里加多个关键词就行。这样爬虫不会去加载那些体积大的WASM资源，避免因为资源加载问题卡壳。

2. 优化WASM资源加载效率 #

• 启用WASM压缩：在项目的.csproj文件里加配置，压缩WASM文件体积：

<PropertyGroup>
  <BlazorEnableCompression>true</BlazorEnableCompression>
</PropertyGroup>

• 开启模块延迟加载：在Program.cs里配置Blazor延迟加载模块，避免一次性加载所有WASM资源，减轻爬虫的加载压力：

builder.Services.AddHttpClient();
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

// 启用延迟加载
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.WebHost.UseStaticWebAssets();

3. 排查页面本身的索引障碍 #

用Google的URL Inspection Tool仔细看页面的抓取详情，重点确认：

• 页面返回的状态码是不是200 OK；
• 页面里有没有noindex标签，或者响应头里有没有X-Robots-Tag限制索引；
• 爬虫抓取到的HTML内容是不是完整的（可以看工具里的“已抓取的页面”内容）；
• 有没有JS加载失败的情况（即使谷歌不执行JS，但加载失败可能影响索引判断）。

4. 调整索引提交的姿势 #

• 别频繁手动提交索引请求，谷歌有频率限制，失败几次后先停几个小时再试；
• 先把这些页面加到sitemap.xml里提交，让谷歌自然抓取，比手动提交更稳妥；
• 确保站点内部有正常的链接指向这些页面，让谷歌能通过导航自然发现，提升索引优先级。

5. 给爬虫返回静态占位内容 #

把Blazor交互组件和爬虫看到的内容分开，爬虫访问时只显示静态占位，不加载组件：

<div id="interactive-section">
    @if (!HttpContext.Request.Headers["User-Agent"].ToString().Contains("Googlebot", StringComparison.OrdinalIgnoreCase))
    {
        <component type="typeof(Core.Blazor.KeyboardContainer)" render-mode="WebAssembly" />
    }
    else
    {
        <p>交互式键盘练习组件（仅支持浏览器访问）</p>
    }
</div>

这样爬虫拿到的是完整的静态HTML，不会触发Blazor相关资源的加载。

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