Blazor server seo is not complicated as Blazor WebAssembly seo. When it comes to Blazor server seo, to optimize for seo just we need to choose the rendering mode to be server prerendering.
But, for WebAssembly seo the rendering mode will be WebAssembly prerendering. In addition to this, we need to tweak code that come with the default template. A Link provided at the end of the article in order to give you a good example of implementation of prerendering in Blazor WebAssembly.
.Net 6 gives the ability of defining Blazor Page Title and also defining Blazor meta tags, such as Description and other in Blazor headcontent.
For instance, the following code uses the PageTitle and HeadContent component.
<PageTitle>@title</PageTitle>
<HeadContent>
<meta name="description" content="@description">
</HeadContent>
@code {
private string description = "Description";
private string title = "Page Title";
}Resulting in HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="Description" CONTENT="Content of page">
</head>
</html>But what about body content?
With Hosted Blazor WebAssembly App, we can pre-render the image data on server and persist that state into page.
State persistence into page from the server during pre-render is done in two steps. First, the render-mode should be WebAssemblyPrerendered. Second, on the client side in your code inject PersistentComponentState in order to persist the state.
The reason, behind persisting state is that the initial render happen on the server. After the initial render, The client side has to go and get the image data retrieved on the server. Which means, nothing transferred to the client.
A good code example is available on github : BlazorWebAssemblyPrerendering
Note: Prerendering with Authentication still not working of time of writing.
