首页 > 解决方案 > 为什么 blazor HeadOutlet 在 App 之后渲染

问题描述

我在服务器端预渲染 net6.0 应用程序上使用 HeadOutlet 来设置一些标头标签,例如元描述,但服务器首先呈现应用程序,然后是使搜索引擎忽略它的标头。

@page "/"
@namespace Example.Pages
@using Microsoft.AspNetCore.Components.Web
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
    <base href="~/" />

    <link href="css/site.css" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="/" class="reload">Reload</a>
        <a href="#" class="dismiss"></a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <script src="~/outsideHandleContainerJsInterop.js"></script>
</body>
</html>
@page "/test"

<HeadContent>
     <meta name="description" content="Hello World">
</HeadContent>

在浏览器中查看页面将按预期呈现头部中的元标记,但在 insomnia/postman 中执行 get 请求会返回初始标题和 blazor 预呈现标记注释

<!--Blazor:{"sequence":0,"type":"server","prerenderId":"b0376004567c4aaf9c07defc4341e21e","descriptor":"<long string here>"}--><!--Blazor:{"prerenderId":"b0376004567c4aaf9c07defc4341e21e"}-->

这是一个错误还是我错过了什么?我需要在页面的其余部分之前或与页面的其余部分一起呈现头部,以便搜索引擎可以选择它。

标签: .netblazorserver-side-renderingmeta-tagshead

解决方案


这是通过将 html/head/body 从 _Host.cshtml 移动到 _Layout.html 来解决的。这篇文章中描述的更多信息:https ://github.com/dotnet/aspnetcore/issues/37293


推荐阅读