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 in one reusable Blazor component.
Review the examples, then buy the complete implementation for ca. $5 when you want the same pattern in your own app.
Overview
Use one metadata source for every page
A Blazor app 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.
Fit check
Central metadata beats copy-pasted 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 rule in one place.
Use a component when pages share SEO rules
- Many pages share the same title, description, canonical, hreflang, Open Graph, and robots rules.
- Localized pages need consistent culture links and x-default handling.
- Articles, FAQs, products, or software pages need JSON-LD that matches visible content.
- Editors or developers should 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 repeat the same sentence.
- Canonical URLs point to old routes after a page move.
- FAQ schema remains online after the visible FAQ was removed.
Table of Content
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 page in simple language.
Name the page clearly
Use a short title that contains 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 users a reason to open, review, or buy.
Choose one preferred URL
The canonical URL should point to the page you want indexed, not to a tracking link, redirect, or stale route.
Link language versions
Culture-aware pages need hreflang links that match real URLs and include a sensible x-default page.
Control shared previews
Social previews should use the same page title, description, canonical URL, and prepared image as the rest of the metadata.
Set crawl rules deliberately
Use robots and AI directives per page so indexing, snippets, archives, and AI usage match the content policy.
JSON-LD
Generate schema from the same page metadata
JSON-LD should not tell a different story from the page. Use the same title, description, canonical URL, publish date, image, breadcrumbs, and FAQ data that the visible article already uses.
Article
Use Article schema when the page has a real headline, publish date, modified date, image, and section structure.
FAQPage
Use FAQPage only when the same questions and answers are visible on the page.
BreadcrumbList
Build breadcrumbs from the same hierarchy users can understand through links and navigation.
Software or product
Add product or software schema only when price, offer, name, and description are visible to users.
Common mistakes
Most metadata bugs are small mismatches
The component is useful because it turns repeated checks into one repeatable pattern. The goal is not more tags. The goal is fewer contradictions.
Do not copy H1 into title and description
The title, H1, and meta description can use the same topic, but each one should have a different job.
Do not forget translated URLs
If a 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 page, not the last article that used the component.
Do not mark up hidden content
FAQ and product schema should describe content users can actually see on the page.
Implementation
Wire the component once, then feed it page data
The pattern stays boring on purpose: define a page metadata object, render the component in the layout or page, and pass matching JSON-LD when the 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 in 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 localized URLs before release.
View source
Check the rendered HTML head, not only the Razor file. Crawlers read the final response.
Validate schema
Run rich result or schema validation and fix warnings that point to missing visible content.
Test sharing
Use social preview debuggers to check title, description, image, and cache behaviour.
Crawl locales
Crawl culture URLs to catch broken canonical, hreflang, or x-default links before release.
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 pages, buy the complete implementation for ca. $5 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 the Blazor platform itself.
FAQ
What does the Blazor Metadata Component do?
It renders page metadata from one typed source: title, description, canonical URL, hreflang links, Open Graph tags, robots directives, and optional JSON-LD.
Why should title, H1, and meta description be different?
They appear in different places. The title helps search and browser tabs, the H1 names the visible 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 page copy and descriptions for pages that target different intents or languages.
How does JSON-LD fit into the component?
The 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 page-level robots and AI options so indexing, snippets, archives, noai, and noimageai rules match the content policy for that 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 choice.