Blazor SEO metadata
Manage Blazor SEO metadata in one component
Keep titles, descriptions, canonical URLs, hreflang links, Open Graph tags, robots directives, and JSON-LD together in one reusable Blazor component.
Review the examples, then buy the complete implementation for approx. £4 when you want the same pattern in your own application.
Summary
Use one metadata source for every page
A Blazor application can render many pages from the same layout. A central metadata component keeps each page title, description, canonical URL, language links, social preview, and schema payload aligned.
Suitability check
Central metadata beats copied head markup
Copying head tags into every page works for a while, then small differences create duplicate titles, stale canonical URLs, missing hreflang links, or schema that no longer matches the visible page. A component keeps the rules in one place.
Use a component when pages share SEO rules
- Many web pages share the same title, description, canonical, hreflang, Open Graph, and robots rules.
- Localised pages need consistent culture links and x-default handling.
- Articles, FAQs, products, or software web pages need JSON-LD that matches visible content.
- Editors or developers should be able to update metadata without editing layout markup.
Avoid scattered head markup
- Every page writes its own head tags by hand.
- The H1, title, and meta description all repeat the same sentence.
- Canonical URLs point to old routes after a page move.
- FAQ schema remains online after the visible FAQ has been removed.
Contents
SEO signals
Keep the page identity consistent
Search engines, social platforms, and AI crawlers all read slightly different signals. They should still describe the same web page in plain language.
Name the page clearly
Use a short title that includes the main topic without copying the H1 word for word.
Invite the next action
Write a natural meta description that explains the benefit and gives visitors a reason to open, review, or buy.
Choose one preferred URL
The canonical URL should point to the web page you want indexed, not to a tracking link, redirect, or stale route.
Link language versions
Culture-aware web pages need hreflang links that match real URLs and include a sensible x-default web page.
Control shared previews
Social previews should use the same web page title, description, canonical URL, and prepared image as the rest of the metadata.
Set crawl rules deliberately
Use robots and AI directives per web page so indexing, snippets, archives, and AI usage match the content policy.
Structured data
Generate schema from the same page metadata
JSON-LD should not tell a different story from the web page. Use the same title, description, canonical URL, publish date, image, breadcrumbs, and FAQ data that the visible article already uses.
Article schema
Use Article schema when the web page has a real headline, publish date, modified date, image, and section structure.
FAQ schema
Use FAQPage only when the same questions and answers are visible on the web page.
Breadcrumbs
Build breadcrumbs from the same hierarchy visitors can understand through links and navigation.
Software or product
Add product or software schema only when price, offer, name, and description are visible to visitors.
Common mistakes
Most metadata bugs are small mismatches
The component is useful because it turns repeated checks into one repeatable pattern. The aim is not more tags. The aim is fewer contradictions.
Do not copy H1 into title and description
The title, H1, and meta description can share a topic, but each one should have a different job.
Do not forget translated URLs
If a web page exists in several cultures, metadata and hreflang should point to the matching culture route.
Do not reuse stale share images
Open Graph and JSON-LD images should represent this web page, not the last article that used the component.
Do not mark up hidden content
FAQ and product schema should describe content visitors can actually see on the page.
Implementation
Wire the component once, then feed it page data
The pattern stays boring on purpose: define a web page metadata object, render the component in the layout or web page, and pass matching JSON-LD when the web page needs structured data.
Define page metadata
var metadata = new PageMetaData(culture)
{
Name = PageLinks.BlazorSEOMetaDataComponent,
Title = "Blazor SEO Metadata Component for Blazor Apps",
Description = "Keep title, description, canonical, hreflang, Open Graph, and JSON-LD aligned.",
ImageUrl = "/images/blazor/metadatacomponente/opengraph/hero-1200.png",
Url = PageLinks.BlazorSEOMetaDataComponent,
Robots = RobotsMetaTagExtensions.Join(RobotsMetaTagEnum.Index, RobotsMetaTagEnum.Follow),
AllowAiIndexing = true
};Render metadata within a layout
@inherits LayoutComponentBase
<MetadataComponent MetaData="@PageMeta"
JsonLd="@Schema?.JsonLd"
RenderArticleMeta="@Schema?.RenderArticleMeta" />
@BodyAttach JSON-LD on the page
@page "/{Culture}/guide/"
@inherits PageBase
<MetadataComponent MetaData="@PageMeta"
JsonLd="@Schema?.JsonLd"
RenderArticleMeta="@Schema?.RenderArticleMeta" />
<ArticleFaq Id="faq" FAQ="@FAQs" />Validation
Check the output before you publish
A metadata component is only useful when the rendered HTML is correct. Inspect the page source, test sharing previews, validate schema, and crawl localised URLs before release.
View source
Check the rendered HTML head, not just the Razor file. Crawlers read the final response.
Validate schema
Run rich result or schema validation, then fix warnings that point to missing visible content.
Test sharing
Use social preview debuggers to check the title, description, image, and cache behaviour.
Crawl locales
Crawl culture URLs before release to catch broken canonical, hreflang, or x-default links.
Get started
Buy the component when your metadata rules repeat
If you are already writing the same title, canonical, Open Graph, and JSON-LD logic on several web pages, buy the complete implementation for approx. £4 and keep the rule in one place.
Related resources
Next guides for Blazor SEO metadata
Use these guides when you need more detail on routing, structured data, social previews, or Blazor itself.
Frequently Asked Questions
Blazor Metadata Component questions
Short answers about Blazor metadata, JSON-LD, canonical URLs, hreflang, Open Graph, robots tags, and checks.
What does the Blazor Metadata Component do?
It renders web page metadata from one typed source: title, description, canonical URL, hreflang links, Open Graph tags, robots directives, and optional JSON-LD.
Why should the title, H1, and meta description be different?
They appear in different places. The title helps search and browser tabs, the H1 names the visible web page, and the description should invite the next action.
Does the component prevent duplicate content?
It helps by keeping canonical URLs and hreflang links consistent. You still need unique web page copy and descriptions for web pages that target different intents or languages.
How does JSON-LD fit into the component?
The web page builds JSON-LD from the same metadata and visible content used by the article, FAQ, breadcrumb, product, or software section.
Can I control AI crawler tags per page?
Yes. Use web page-level robots and AI options so indexing, snippets, archives, noai, and noimageai rules match the content policy for that web page.
Can I use this in Blazor WebAssembly?
Yes, but SEO metadata is strongest when the tags are present in the initial HTML response. Server rendering or prerendering is usually the safer option.