CODEWITHSUNDEEP
.netasp.net-coreblazorblazor-webassembly
fingers10
fingers10

Reputation: 7977

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

I'm developing a .Net 6 Blazor Wasm app. I need to place <script type="application/ld+json"> inside each landing page component for SEO benefits.

I'm already making use of <HeadContent> to add other <meta> and <link> tags. So I decided to use the same component for this purpose.

However when I place the <script> tag inside <HeadContent>, I'm getting the compilation error as follows,

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.

To workaround this issue, I added my script tag as string text inside <HeadContent> as shown below,

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

But this renders the script as text inside head tag in browser as shown in below screenshot:

Rendered HeadContent

Will this affect SEO benefits or is there any better way to handle this? Please assist.

Upvotes: 9

Views: 7408

Answers (2)

Brian Parker
Brian Parker

Reputation: 14563

You are rendering a string not markup.

@(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>"))

Upvotes: 1

Mister Magoo
Mister Magoo

Reputation: 8984

If you are sure you know what you are doing and want to use a script tag - and will test thoroughly - you can override the warning like this

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

In this case, as your script contains json it may be ok

Upvotes: 23

Related Questions