Почему рендеринг заголовка blazor выполняется после приложения

#.net #blazor #server-side-rendering #meta-tags #head

Вопрос:

Я использую заголовок в предварительно отрисованном на стороне сервера приложении net6.0, чтобы установить некоторые теги заголовка, такие как meta description, но сервер сначала отображает приложение, а затем заголовки, что заставляет поисковые системы игнорировать его.

 @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>
 

Просмотр страницы в браузере отобразит мета-теги в заголовке, как и ожидалось, но выполнение запроса get в insomnia / postman возвращает начальные заголовки и комментарий к тегу предварительного рендеринга blazor

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

Это ошибка или я что-то упускаю? Мне нужно, чтобы заголовок отображался до или вместе с остальной частью страницы, чтобы поисковые системы могли его найти.

Ответ №1:

Это было решено путем перемещения html /head/ body из _Host.cshtml в _Layout.html . Дополнительная информация, описанная в этом сообщении: https://github.com/dotnet/aspnetcore/issues/37293

Комментарии:

1. Комментарий по ссылке: «Люди, создающие свое собственное приложение, не поймут этого и не смогут понять, почему более естественная структура приложения не работает». — lol. К счастью, это ТАК. 1