Blazorのカルチャールーティング:SEOに適したカルチャーURL
このBlazorチュートリアルでは、ghostlyinc.com/en-us/page-nameのようなクリーンでインデックス可能なSEO対応カルチャーリンクを実装します。安全なカルチャー切替、ナビゲーションの一貫性、多言語コンテンツの発見性向上を段階的に学びましょう。
まず基本を学びたい方は以下をお読みください Blazorとは? その後、SEO向けカルチャールーティングの実装に戻りましょう。

目次
このSEO対応カルチャーリンクチュートリアルで作るもの
本ガイドでは実装の全手順を解説します:
- アプリのカルチャーを変更:Blazorアプリ全体で一貫してカルチャーを更新します。
- 構造化されたURLスキームを使用:各カルチャーごとに/en-us/your-pageの形式でページを提供します。
- ブラウザのカルチャー変更をサポート:ユーザーが好みに応じてカルチャーを切り替えられます。
- 無効なカルチャーリンクの処理:サポート外のカルチャーはリダイレクトやフォールバックで対応します。
- URLをSEO対応かつカルチャー特化に保ち、すべてのローカライズページをクロールしやすくします。
- インデックスとUXを改善:視認性を高めつつ、ユーザー体験を安定させます。
Blazorのメタデータと構造化SEOの基本については以下もご覧ください Blazor SEOメタデータコンポーネント.
ステップバイステップ:BlazorでSEO対応カルチャーURLを実装
Blazorアプリにカルチャーベースのルーティングを追加するコードを順に解説します。各ステップを踏めば、現在と将来のページで一貫したカルチャーURLが実現します。
次に、選択されたカルチャーを適用し、正しいカルチャーURLへリダイレクトするCulture Controllerを追加します。
ここまでで ICultureService と CultureController が用意できました。次に更新します。 Program.cs これらの変更を加えて:
- ICultureService を登録します。
- デフォルトカルチャーをサポートされている最初のカルチャーに設定します。
- コンテンツローカライズ用のサポートカルチャーを設定します。
- UIローカライズ用のサポートUIカルチャーを設定します。
- 設定したローカライズオプションをリクエストパイプラインに適用します。
- 受信したHTTPリクエストを対応するコントローラーアクションにマッピングします。
次に更新します _host.cshtml これらの変更を加えて:
- ICultureService を注入します。
- HTMLのlang属性を設定します。
- bodyタグにカルチャークッキーを設定します。
次に更新します App.razor これらの変更を加えて:
- ICultureService を注入します。
- NavigationManagerを注入します。
- 以下のコードセクションを追加します。
@inject NavigationManager Navigation
@inject ICultureService cultureService
@code {
/// <summary>
/// This section handles redirection to a new culture when the user changes the culture in the browser link.
/// If you don't wish to support this, you can delete this code.
/// By default, it redirects to the current culture if no culture is specified in the link.
/// </summary>
/// <param name="firstRender">Indicates whether this is the initial rendering of the page</param>
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
// Check if the link contains a specified culture
var culture = cultureService.GetCultureFromLink(Navigation.Uri, Navigation.BaseUri);
// If the culture string is null or empty, it's the page's first load. In this case, set the culture from the browser settings.
if (string.IsNullOrEmpty(culture)) culture = CultureInfo.CurrentCulture.Name.ToLowerInvariant();
// Check if the culture is supported by the application
if (!cultureService.IsCultureSupported(culture))
{
// Try to set the language contained in the culture
culture = cultureService.HandleUnsupportedCulture(culture);
}
var cultureInfo = new CultureInfo(culture);
// If the current culture differs from the specified culture, set the new culture
if (!string.Equals(CultureInfo.CurrentCulture.Name, culture, StringComparison.OrdinalIgnoreCase))
{
cultureService.SetCulture(cultureInfo);
}
}
}
}
異なるカルチャーをテストするための新しいコンポーネントを作成します: ChangeCulture.razor
@using System.Globalization
@inject ICultureService cultureService
<button @onclick="() => SetCulture(Englisch)"> Englisch</button>
<button @onclick="() => SetCulture(Arabische)"> Arabische</button>
<button @onclick="() => SetCulture(France)"> France</button>
<button @onclick="() => SetCulture(Austria)"> Austria</button>
<button @onclick="() => SetCulture(Germany)"> Germany</button>
@code {
private string Englisch = "en-us";
private string Arabische = "ar-ae";
private string France = "fr-fr";
private string Austria = "de-at";
private string Germany = "de-de";
private void SetCulture(string culture)
{
cultureService.SetCulture(new CultureInfo(culture));
}
}
次に更新します MainLayout.razor これらの変更を加えて:
- ICultureService を注入します。
- NavigationManagerを注入します。
- 作成前のコンポーネントを追加します。
- 以下のコードセクションを追加します。
@inject NavigationManager navi
@inject ICultureService cultureService
<article class="content px-4">
<ChangeCulture/>
@Body
</article>
@code {
// Here we redirect to culture link, for example, from example.com to example.com/de-de/
protected override void OnAfterRender(bool firstRender)
{
// Only perform this logic on the first render
if (firstRender)
{
// Extract the relative path from the current URI by removing the base URI
var currentUri = navi.Uri.Replace(navi.BaseUri, ");
// Find the index of the first slash in the relative path
int firstSlashIndex = currentUri.IndexOf('/');
// Prepare the culture-specific URI
string uri;
if (firstSlashIndex >= 0)
{
// Extract the part of the relative path after the first slash
string result = currentUri.Substring(firstSlashIndex + 1);
// Construct the culture-specific URI
uri = "/" + cultureService.Culture + "/" + result;
}
else
{
// If no slash was found in the relative path, navigate to the root path for the current culture
uri = "/" + cultureService.Culture + "/";
}
// Navigate to the determined URI
navi.NavigateTo(uri, false, false);
}
// Call the base OnAfterRender method to ensure proper functioning of the component
base.OnAfterRender(firstRender);
}
}
すべてのページにカルチャールーティングを適用
Blazorの全ページにSEO対応カルチャーリンクを実装し、既存・新規ページともに一貫した運用が可能になりました。新しいルート追加時も同様の手順でローカライズページをクロールしやすく保ちましょう。
- ICultureService を注入します。
- カルチャーパラメーターを作成します。
- OnInitializedメソッドでカルチャーパラメーターを設定します。
- ページタグにカルチャーパラメーターを追加します。
以下のコードはページの変更例です fetchdata.razor
実践的パターンでBlazorアプリを自信を持って構築
私からのヒント Blazorの基本、アーキテクチャ選択、保守しやすいコンポーネント設計を実践動画で学びました。
- Razorコンポーネント、状態管理、依存性注入の段階的ラボ。
- ホスティング、パフォーマンス、デプロイの実践的な指導。
- Blazorコードを保守しやすくするクリーンなUI技術。
BlazorでSEO対応カルチャーURLが重要な理由
- 発見性を高める: カルチャー別URLは検索エンジンが言語特化コンテンツを理解し正しくインデックスするのに役立ちます。
- ユーザーの信頼を高める: /en-us/や/de-de/を即座に認識でき、ユーザーの抵抗感を減らしエンゲージメントを向上させます。
- ナビゲーションの一貫性を保つ: サイト全体で統一されたURLパターンにより、言語混在のナビゲーションを防ぎます。
- 多言語コンテンツの拡張性: ルートの再設計やページの重複なしに新しい言語を追加できます。
- 将来に備えたサイト設計: 新規ページも自動的に同じSEO対応カルチャールールに従います。
- グローバルなリーチ: カルチャー特化URLは地域や言語のターゲティングを容易にします。
Blazor Serverを公開展開する場合、以下のホスティング情報が役立ちます: UpCloudのBlazor Serverホスティング.
よくある質問
カルチャーURLとBlazorローカライズに関するよくある質問と回答
完了です。今後のページもルート+カルチャーパラメーターの手順を繰り返し、リンク作成時は必ずカルチャーセグメントを含めてナビゲーション切れを防ぎましょう。