I ❤️ .NET

In this article, let's learn about Pre Rendering Blazor apps during publish time to improve SEO and SMO.

Note: If you have not done so already, I recommend you read the article on Publishing to GitHub Pages.

Table of Contents

1. Introduction
2. SEO problem with SPA
3. SEO solution for SPA
4. Pre-render Blazor WASM at publish time
5. Summary

Introduction

The output of a published Blazor WebAssembly application consists of static files exclusively. But just like other single page application (SPA) frameworks, Blazor WASM is not properly indexed by search engines. This makes it very hard to do Search Engine Optimization (SEO). Prerendering can improve Search Engine Optimization (SEO) by rendering content for the initial HTTP response that search engines can use to calculate page rank.

SEO problem with SPA

Search engines crawl your website using "crawlers" also called "spiders" sometimes. These crawlers are essentially bots visiting every page it can find on your website. The content on those pages are then added to the search index. But what do crawlers see when they visit SPA's? For Blazor WASM applications, this is what crawlers see:

Here is the snapshot of what crawlers see without prerendering Index.razor.

The only thing the crawlers see are the words "Loading…" or a blank screen.

To optimize for search engines at the margins, you can add some content above and below, or use the title and description meta tags in the head, but that won't get you far. The reason why it doesn't see your entire SPA, is because most search engine crawlers do not execute JavaScript.

SEO solution for SPA

Many SPA frameworks have support for rendering the same application on both client and server. Being able to render both server and client side combines best of both worlds. You have the speed and SEO benefits from server rendered applications and the UX benefits of a SPA. Server side pre-rendering is a great solution, but it does require your code to be executed on a server which is not possible if you’re using a static site host.

So instead of pre-rendering server side at request time, you can pre-render at publish-time. You can then host the HTML files outputted at publish-time on static site hosts, giving you the best performance, best SEO, best UX, and a more affordable hosting.

Pre-render Blazor WASM at publish time

Steps

1. Install BlazorWasmPreRender.Build Nuget package.

2. Configure Services registration

   If you are registering any services (except HttpClient that isn't specially configured) to the service provider at the startup of your Blazor WebAssembly app, please extract that process to the static method named static void ConfigureServices(IServiceCollection services, string baseAddress).

   Code Sample - Blazor Wasm Pre Rendering Program Before Extraction

   Code Sample - Blazor Wasm Pre Rendering Program After Extraction

   Note: The "ConfigureServices" local function must be "static" local function.

   The ConfigureServices() method can also have an IConfiguration argument reflected with the contents of the wwwroot/appsetting.json JSON file.

3. Publish the project.

Now after pre rendering the project during publish, you can check the wwwroot/index.html to see the pre rendered contents. Now that crawlers can see:

Here is the snapshot of what crawlers see with prerendering Index.razor.

More detailed documentation can be found in BlazorWasmPreRendering.Build GitHub Readme.

Summary

SPA frameworks like Blazor require the execution of JavaScript to function. Most search engine crawler's don't execute JavaScript which means JavaScript generated content won't be indexed. Google's crawlers do execute JavaScript and they can successfully index Blazor WASM apps. To optimize for other search engines, you can pre-render Blazor WASM on the server, but that requires server side code execution.

For static site hosts like GitHub Actions and Azure Static Web Apps, server side code execution is not available. Instead of pre-rendering in response to HTTP requests, you can move the pre-rendering to the build pipeline. Using "BlazorWasmPreRender.Build" package will improve the internet search results of your static hosting Blazor Wasm app with only minimal or no code changes.

Additionally, you can integrate these pre-rendering tools inside of your continuous integration and continuous deployment pipelines. Using GitHub Actions, you can pre-render your Blazor application and deploy it to GitHub Pages. Deploying pre-rendered applications to GitHub Pages will increase SEO but also resolve those pesky HTTP 404 errors.