Blazor SEO Metadata Component for Production-Ready Applications
A production-ready Blazor component that consolidates SEO metadata, social previews, JSON-LD structured data, and AI crawler controls into a single reusable package.
Purchase the full implementation for approx. £4 to enable canonical URLs, hreflang tags, Open Graph, Twitter Cards, and automated JSON-LD generation throughout your Blazor app.
Contents
Component overview
The Blazor Metadata Component offers a centralised, production-ready solution for managing essential SEO metadata in your Blazor applications, including canonical URLs, hreflang tags, Open Graph and Twitter Card metadata, JSON-LD structured data, and up-to-date AI crawler directives.
Built on strongly-typed PageMetaData models and dependency-injected services, it removes repetitive markup and ensures each page complies with search engine and social platform standards.
Key metadata features for production Blazor applications
The MetadataComponent manages all vital SEO signals from a single reusable unit.
Management of canonical URLs and hreflang tags
Automatic generation of canonical URLs and culture-specific hreflang tags for all supported locales prevents duplicate content problems.
- Avoids penalties for duplicate content
- Built-in support for multilingual sites
- x-default fallback management
Open Graph and Twitter Card support
Detailed social previews with og:title, og:description, og:image, and Twitter Card meta tags guarantee professional link sharing.
- Professional social media preview support
- Localised titles and descriptions
- Support for image optimisation
JSON-LD structured data
Schema.org markup for articles, FAQs, breadcrumbs, and organisation data assists search engines in comprehending your content.
- Improved appearance in search results
- Eligibility for knowledge panels
- Optimisation for voice search
Understanding JSON-LD structured data within Blazor
JSON-LD (JavaScript Object Notation for Linked Data) is the preferred format for embedding structured data on web pages. Search engines use this to better interpret your content and present rich results.
The importance of JSON-LD for SEO
Structured data informs search engines precisely about your page content. Articles include publication dates and authors, FAQs show expandable questions in results, and products display prices and ratings. The MetadataComponent automates all this.
Supported schema types
- Article schema: Title, description, author, publisher, publication date, and article sections
- FAQPage schema: Question and answer pairs displayed directly in search results
- BreadcrumbList schema: Navigation hierarchy shown in search snippets
- Organisation schema: Company details, logos, and social profiles
The JsonLdService constructs compliant payloads from your PageMetaData and component parameters. Each schema block is rendered within a script tag of type application/ld+json, keeping markup separate from visible content.
Component architecture
The metadata system uses layered services to centralise content definitions and expose them across the UI.
- PageMetaDataService stores typed entries for each route, including titles, descriptions, social images, and robots directives.
- MetadataComponent uses the current page entry to render SEO markup and merges extra JSON LD payloads supplied by the page.
- CultureService provides the active culture, ensuring hreflang links and canonical URLs are generated with precise accuracy.
- JsonLdService helpers create schema-compliant payloads for articles, FAQs, breadcrumbs, and product highlights.
As these layers are decoupled, you can modify descriptions, feature flags, or AI usage policies without altering view templates.
Managing search engines and AI crawlers
The component supports detailed robots meta tags such as index, follow, noarchive, nosnippet, and modern AI-specific directives like noai and noimageai, allowing precise control over how search engines and AI systems interact with your content.
Standard directives
index/noindex- Manage search engine indexingfollow/nofollow- Control link crawling behaviournoarchive- Prevent cached versionsnosnippet- Disable text previews
AI-specific controls
noai/ai- Manage AI training usagenoimageai/imageai- Image AI permissions- AllowAiIndexing parameter for centralised control
- Support for per-page overrides
Configuration process
Follow these steps to integrate the component into your existing Blazor solution.
- Register ICultureService, PageMetaDataService, and JsonLdService within your dependency injection container.
- Fill PageMetaData entries for each route with localised titles, descriptions, canonical URLs, and share images.
- Include MetadataComponent in layouts or individual pages and bind the appropriate metadata entry using PageLinks constants.
- Create optional JsonLd collections per page to display article, FAQ, breadcrumb, or product schema blocks.
- Use BuyButton to trigger software badge downloads or payment prompts, allowing visitors to purchase the component immediately.
Code examples
The following examples show how to register metadata entries and render them within a shared layout.
Define page metadata
Render metadata within a layout
Attach metadata to a page
Testing and validation
After integration, perform these checks to confirm the markup meets SEO standards.
- Use the schema validator in Google Rich Results Test to verify JSON LD payloads parse correctly.
- Check canonical and hreflang links using Screaming Frog, Sitebulb, or similar crawling tools.
- Use sharing debuggers to verify Open Graph and Twitter cards display correct titles and images.
- Inspect robots directives with browser developer tools and ensure AI usage tags reflect your settings.
- Monitor Core Web Vitals to ensure metadata changes do not cause layout shifts or block resources.