Blazor WASM Script 标签不应放置在组件内，因为它们无法动态更新。将脚本标签移动到 index.html 文件

Question

我正在开发 .Net 6 Blazor Wasm 应用程序。我需要在每个着陆页组件中放置 <script type="application/ld+json"> 以获得 SEO 好处。

我已经在使用 <HeadContent> 添加其他 <meta> 和 <link> 标签。所以我决定为此目的使用相同的组件。

然而，当我将 <script> 标签放在 <HeadContent> 中时，我得到如下编译错误，

Script tags should not be placed inside components because they cannot be updated dynamically. To fix this, move the script tag to the 'index.html' file or another static location.

为了解决这个问题，我在 <HeadContent> 中添加了我的脚本标签作为字符串文本，如下所示，

@page "/"
@inject NavigationManager NavigationManager

<HeadContent>
   @($@"<script type=""application/ld+json"">
        {{
            ""@context"": ""https://schema.org"",
            ""@type"": ""WebSite"",
            ""publisher"": {{
                ""@type"": ""Organization"",
                ""name"": ""Page Name"",
                ""url"": ""{NavigationManager.BaseUri}"",
                ""logo"": {{
                    ""@type"": ""ImageObject"",
                    ""url"": ""{NavigationManager.BaseUri}favicon.ico"",
                    ""width"": 16,
                    ""height"": 16
                }}
            }},
            ""url"": ""{NavigationManager.BaseUri}"",
            ""mainEntityOfPage"": {{
                ""@type"": ""WebPage"",
                ""@id"": ""{NavigationManager.BaseUri}""
            }},
            ""description"": ""some good description about the page""
        }}
    </script>")
</HeadContent>

但这会将脚本呈现为浏览器中 head 标记内的文本，如下面的屏幕截图所示：

这会影响 SEO 福利吗？有没有更好的方法来处理这个问题？请协助。

Answer 1

如果您确定自己知道自己在做什么并且想使用脚本标签 - 并且会彻底测试 - 您可以像这样覆盖警告

<script suppress-error="BL9992">...</script>

在这种情况下，因为您的 script 包含 json 它可能没问题

Answer 2

您呈现的是字符串而不是标记。

@(new MarkupString($@"<script type=""application/ld+json"">
        {{
            ""@context"": ""https://schema.org"",
            ""@type"": ""WebSite"",
            ""publisher"": {{
                ""@type"": ""Organization"",
                ""name"": ""Page Name"",
                ""url"": ""{NavigationManager.BaseUri}"",
                ""logo"": {{
                    ""@type"": ""ImageObject"",
                    ""url"": ""{NavigationManager.BaseUri}favicon.ico"",
                    ""width"": 16,
                    ""height"": 16
                }}
            }},
            ""url"": ""{NavigationManager.BaseUri}"",
            ""mainEntityOfPage"": {{
                ""@type"": ""WebPage"",
                ""@id"": ""{NavigationManager.BaseUri}""
            }},
            ""description"": ""some good description about the page""
        }}
    </script>"))

Blazor WASM Script 标签不应放置在组件内，因为它们无法动态更新。将脚本标签移动到 index.html 文件

Blazor WASM Script tags should not be placed inside components because they cannot be updated dynamically. Move the script tag to the index.html file

.net

asp.net-core

blazor

blazor-webassembly