Blazor托管WebAssembly网站Facebook链接预览异常，无法显示自定义标题和图片

1. 移除重复的HeadOutlet配置 #

Blazor WebAssembly托管方案中，仅需在服务端的_Host.cshtml中添加HeadOutlet，同时在_Layout.cshtml和_Host.cshtml中添加会导致预渲染的动态内容被二次渲染覆盖。删除_Layout.cshtml中的<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />代码。

2. 确保预渲染阶段能获取到食谱数据 #

组件中动态设置og标签依赖食谱数据，如果预渲染时异步加载数据未完成，HeadContent会输出默认值。要区分预渲染和客户端运行时的逻辑：

protected override Task OnInitializedAsync()
{
    // 预渲染时直接从服务端同步获取数据（避免异步延迟）
    if (HttpContextAccessor.HttpContext != null)
    {
        Recipe = RecipeService.GetRecipe(RecipeId);
    }
    else
    {
        // 客户端运行时使用异步请求
        Recipe = await HttpClient.GetFromJsonAsync<Recipe>($"api/recipes/{RecipeId}");
    }
    return Task.CompletedTask;
}

注意：需要注入IHttpContextAccessor来判断是否处于预渲染阶段，且服务端服务要能直接访问数据（比如用EF Core直接查询）。

3. 检查og:image的有效性 #

Facebook爬虫对图片有严格要求：

• 必须是绝对HTTPS路径，不能用相对路径（比如不要写/images/xxx.jpg，要写https://你的域名/images/xxx.jpg）；
• 图片尺寸建议1200x630像素（最小600x315像素），格式为JPG/PNG；
• 图片必须公开可访问，不能带身份验证、CDN缓存限制或防盗链。

4. 强制刷新Facebook缓存 #

Facebook会缓存页面的预览数据，即使你修复了配置，旧缓存仍会显示错误内容。使用官方的分享调试工具重新抓取链接，强制刷新缓存，工具会列出具体的抓取错误（比如og标签缺失、图片无法加载等）。

5. 避免默认meta标签覆盖动态内容 #

不要在服务端_Host.cshtml中写死og:title、og:image这类需要动态替换的标签，只保留基础的og:type（比如website）、og:url等静态标签，动态内容完全由Blazor组件的HeadContent生成，避免标签冲突。

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