Translating Head and SEO Metadata

Translazor can translate page metadata by using the TranslatedHead component.

Use TranslatedHead to translate:

Page title
Meta description
Open Graph metadata
Twitter/X metadata

This helps your Blazor pages provide localized metadata for search engines and social media platforms.

Basic usage

Use TranslatedHead to translate the page title and meta description.

<TranslatedHead Key="Home.Title"
                Fallback="Home"
                MetaDescriptionKey="Home.MetaDescription"
                MetaFallback="Test application" />

Parameters

Parameter	Description
`Key`	Translation key for the page title.
`Fallback`	Static page title used if translation is missing or fails.
`MetaDescriptionKey`	Translation key for the meta description.
`MetaFallback`	Static meta description used if translation is missing or fails.

Example

@page "/"

<TranslatedHead Key="Home.Title"
                Fallback="Home"
                MetaDescriptionKey="Home.MetaDescription"
                MetaFallback="Welcome to our Blazor application." />

<h1>
    <TranslatableText Key="Home.Heading" Text="Hello, world!" />
</h1>

<p>
    <TranslatableText Key="Home.Body" Text="Welcome to your new app." />
</p>

TranslatedHead can also translate social media metadata such as Open Graph and Twitter/X tags.

This is useful when your pages are shared on platforms such as Facebook, LinkedIn, X, WhatsApp, and other social apps.

Full SEO example

<TranslatedHead Key="home.title"
                Fallback="Home"
                MetaDescriptionKey="home.meta.description"
                MetaFallback="Translazor helps you translate your Blazor application."

                OgTitleKey="home.og.title"
                OgTitleFallback="Translate your Blazor app instantly"
                OgDescriptionKey="home.og.description"
                OgDescriptionFallback="Translazor helps you translate your Blazor application with caching and SEO support."
                OgImage="https://translazor.com/images/social/home-og.jpg"
                OgUrl="https://translazor.com/ar/home"
                OgLocale="ar_SA"

                TwitterTitleKey="home.twitter.title"
                TwitterTitleFallback="Translate your Blazor app instantly"
                TwitterDescriptionKey="home.twitter.description"
                TwitterDescriptionFallback="Translazor helps you translate your Blazor application with caching and SEO support."
                TwitterImage="https://translazor.com/images/social/home-og.jpg" />

Open Graph parameters

Parameter	Description
`OgTitleKey`	Translation key for the Open Graph title.
`OgTitleFallback`	Static Open Graph title used if translation is missing or fails.
`OgDescriptionKey`	Translation key for the Open Graph description.
`OgDescriptionFallback`	Static Open Graph description used if translation is missing or fails.
`OgImage`	Image URL used when the page is shared.
`OgUrl`	Canonical/shared URL for the page.
`OgLocale`	Locale code used for Open Graph metadata.

Twitter/X parameters

Parameter	Description
`TwitterTitleKey`	Translation key for the Twitter/X title.
`TwitterTitleFallback`	Static Twitter/X title used if translation is missing or fails.
`TwitterDescriptionKey`	Translation key for the Twitter/X description.
`TwitterDescriptionFallback`	Static Twitter/X description used if translation is missing or fails.
`TwitterImage`	Image URL used when the page is shared on Twitter/X.

Recommended key naming

Use consistent keys for metadata.

For example:

home.title
home.meta.description
home.og.title
home.og.description
home.twitter.title
home.twitter.description

Or, if you prefer PascalCase keys:

Home.Title
Home.MetaDescription
Home.OgTitle
Home.OgDescription
Home.TwitterTitle
Home.TwitterDescription

Choose one style and use it consistently across your application.

Important App.razor setup

For head metadata to refresh when the language changes, make sure HeadOutlet uses interactive rendering.

Example:

<head>
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

Also make sure your routes are rendered interactively if you want instant language switching.

<Routes @rendermode="InteractiveServer" />

Troubleshooting

If the page title or meta description does not update, check the following:

HeadOutlet is set to @rendermode="InteractiveServer".
Routes is set to @rendermode="InteractiveServer" if your language switching requires interactive refresh.
Routes.razor is wrapped with <BlazorTranslator ...>.
The selected language is supported in your Translazor configuration.
The translation keys match the keys used in your cache or translation provider.
Fallback values are provided for all important metadata.

Basic usage​

Parameters​

Example​

Social media metadata​

Full SEO example​

Open Graph parameters​

Twitter/X parameters​

Recommended key naming​

Important App.razor setup​

Troubleshooting​

Related pages​