Blazor WebApp Server(.NET8)分享链接时动态页面标题不生效问题

我在Blazor WebApp（.NET8 Server）项目中，需要根据数据库里的不同文章动态修改页面标题，目前用JavaScript实现了页面加载时标题更新，但WhatsApp或Telegram分享链接时，预览显示的还是旧标题。推测原因是这些社交平台的爬虫在JavaScript执行前就抓取了页面内容，导致无法识别更新后的标题。

想请教解决思路，确保社交平台分享时能正确识别更新后的标题？

当前实现代码 #

Home.razor #

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await JSRuntime.InvokeVoidAsync("changeDocumentTitle", "new title");
}

App.razor #

<script>
    function changeDocumentTitle(newTitle) {
        document.title = newTitle;
        document.getElementById('ogTitle').setAttribute('content', newTitle);
    }
</script>

更新说明 #

尝试使用<PageTitle>组件动态更新标题，但未生效。比如以下代码中，点击链接时SetParametersAsync会触发，但<PageTitle>内容没有更新：

@page "/{currentId:int}"
<PageTitle>@Title</PageTitle>
<a href="@currentId">Click Here</a>

@code
{    
    public string currentId;
    public string Title { get; set; }

    public override Task SetParametersAsync(ParameterView parameters)
    {
        Title = DateTime.Now.ToString();
        StateHasChanged();
        return base.SetParametersAsync(parameters);
    }
}

解决思路 #

1. 服务端预渲染生成正确元数据 #

社交平台的爬虫不会执行JavaScript，所以必须让页面在服务端渲染阶段就输出正确的<title>和OG标签（如og:title）：

• 对于带路由参数的页面（比如文章详情页），在组件初始化时（OnInitializedAsync）先从数据库获取对应内容的标题；
• 直接通过Blazor的<PageTitle>或<HeadContent>组件在服务端生成标题和元标签，不要依赖后续JS修改。

2. 修复<PageTitle>组件不更新的问题 #

你当前的SetParametersAsync代码存在逻辑错误，修正后即可让<PageTitle>正常更新：

@page "/{currentId:int}"
<PageTitle>@Title</PageTitle>
<a href="@currentId">Click Here</a>

@code
{    
    [Parameter]
    public int currentId { get; set; }
    public string Title { get; set; }

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        // 先更新组件参数
        parameters.SetParameterProperties(this);
        // 根据currentId获取对应标题（示例用时间模拟）
        Title = $"文章 {currentId} - {DateTime.Now:yyyy-MM-dd HH:mm:ss}";
        // 先完成基类的参数设置，再触发状态变更
        await base.SetParametersAsync(ParameterView.Empty);
        StateHasChanged();
    }
}

3. 服务端生成OG标签 #

社交平台依赖Open Graph标签生成预览，必须在服务端直接输出这些标签，不能靠JS动态修改：

@page "/{currentId:int}"
<PageTitle>@Title</PageTitle>
<HeadContent>
    <meta property="og:title" content="@Title" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="@($"{NavigationManager.BaseUri}{currentId}")" />
</HeadContent>

@code
{
    [Parameter]
    public int currentId { get; set; }
    [Inject]
    public NavigationManager NavigationManager { get; set; }
    public string Title { get; set; }

    protected override async Task OnInitializedAsync()
    {
        // 模拟从数据库获取文章标题
        Title = await GetArticleTitle(currentId);
    }

    private async Task<string> GetArticleTitle(int id)
    {
        await Task.Delay(100); // 模拟数据库查询延迟
        return $"文章详情 - ID:{id}";
    }
}

4. 验证预览效果 #

修改完成后，直接在WhatsApp或Telegram聊天框粘贴链接测试预览，确保标题和OG标签正确显示。

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