Blazor页面加号被编码致Google富结果检测失败问题排查

问题根源 #

• 预渲染/模板引擎的自动HTML实体编码逻辑过度处理：+属于HTML属性中的特殊字符，多数引擎会默认将其编码为+，但application/ld+json是标准MIME类型，其中的+是合法组成部分，不需要编码，这种自动编码导致Google无法识别该MIME类型。
• 部分服务端渲染框架（如ASP.NET Razor）在输出属性值时，默认启用HTML编码，直接输出application/ld+json时会被自动转义。

解决方法 #

根据使用的技术栈选择对应方案：

1. ASP.NET Razor场景 #

• 使用Html.Raw()输出未编码的MIME类型：

  <script type="@Html.Raw("application/ld+json")">
      @StructuredData
  </script>
  

• 或者在页面模型中定义属性，结合Html.Raw()绑定：

  // 页面模型中定义
  public string LdJsonMimeType { get; } = "application/ld+json";
  

  视图中调用：

  <script type="@Html.Raw(Model.LdJsonMimeType)">
      @StructuredData
  </script>
  

2. 其他预渲染/前端框架场景 #

• 关闭属性的自动编码：比如Vue/Nuxt中使用v-bind绑定属性时，确保不触发自动转义；Next.js中直接在next/head组件中使用原始字符串定义type属性。
• 客户端动态创建script标签（适用于补充渲染场景）：

  const structuredData = @StructuredData; // 假设已获取结构化数据
  const scriptEl = document.createElement('script');
  scriptEl.type = 'application/ld+json';
  scriptEl.textContent = JSON.stringify(structuredData);
  document.head.appendChild(scriptEl);
  

验证步骤 #

1. 修改完成后，查看页面源代码，确认script标签的type属性值为application/ld+json而非编码后的形式。
2. 使用Google富结果测试工具验证结构化数据是否能被正常识别。

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