In this article, let's learn about
Pre Rendering Blazor apps during publish time to improve
SEO and SMO.
Table of Contents
- SEO problem with SPA
- SEO solution for SPA
- Pre-render Blazor WASM at publish time
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:
Code Sample - What crawlers see without prerendering
Here is the snapshot of what crawlers see without prerendering
The only thing the crawlers see are the words "Loading…" or a blank screen.
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
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.
ConfigureServices()method can also have an
IConfigurationargument reflected with the contents of the
- 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:
Code Sample - What crawlers see with prerendering
Here is the snapshot of what crawlers see with prerendering
More detailed documentation can be found in BlazorWasmPreRendering.Build GitHub Readme.
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.