Blazor 문화 라우팅: SEO 최적화 문화별 URL 가이드
이 Blazor 튜토리얼에서는 ghostlyinc.com/en-us/page-name 같은 깔끔하고 검색 가능한 SEO 친화적 문화별 URL을 구현합니다. 안전한 문화 전환, 일관된 내비게이션 유지, 다국어 콘텐츠 검색성 향상을 단계별로 배워봅니다.
기본 개념부터 확인하려면 먼저 읽어보세요 Blazor란 무엇인가? 그 후 SEO용 문화 라우팅 구현으로 돌아오세요.

목차
이 SEO 친화적 문화 링크 튜토리얼에서 만들 내용
전체 구현 과정을 안내합니다:
- 애플리케이션 문화 변경: Blazor 앱 전반에 일관된 문화 적용
- 구조화된 URL 체계 사용: 각 문화별로 /en-us/your-page 형태로 페이지 제공
- 브라우저 기반 문화 변경 지원: 사용자가 선호하는 문화로 전환 가능
- 잘못된 문화 링크 처리: 지원하지 않는 문화는 리디렉션 또는 대체 페이지 제공
- URL을 SEO 친화적이고 문화별로 구분하여 모든 현지화 페이지가 쉽게 크롤링되도록 유지
- 인덱싱과 사용자 경험 개선: 가시성 향상과 예측 가능한 경험 유지
Blazor 메타데이터 및 구조화된 SEO 기본은 다음도 참고하세요 Blazor SEO 메타데이터 컴포넌트.
단계별 가이드: Blazor SEO 친화적 문화별 URL 구현
이제 Blazor 앱에 문화 기반 라우팅을 추가하는 코드를 살펴봅니다. 각 단계를 따라가면 현재와 미래 페이지 모두 일관된 문화 URL을 갖게 됩니다.
다음으로 Culture Controller를 추가해 선택한 문화를 적용하고 올바른 문화별 URL로 리디렉션합니다.
현재 ICultureService와 CultureController가 준비되었습니다. 이제 다음을 진행하세요 Program.cs 다음 변경 사항과 함께:
- ICultureService를 등록하세요.
- 기본 문화를 지원 목록의 첫 번째 문화로 설정
- 콘텐츠 현지화를 위한 지원 문화 구성
- UI 현지화를 위한 지원 UI 문화 구성
- 설정한 현지화 옵션을 요청 파이프라인에 적용
- 들어오는 HTTP 요청을 해당 컨트롤러 액션에 매핑
이제 업데이트 _host.cshtml 다음 변경 사항과 함께:
- ICultureService를 주입하세요.
- HTML lang 속성 설정
- body 태그에 Culture 쿠키 설정
이제 업데이트 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를 주입하세요.
- Culture 매개변수 생성
- OnInitialized 메서드에서 culture 매개변수 설정
- 페이지 태그에 Culture 매개변수 추가
다음 코드는 페이지 변경 사항을 보여줍니다 fetchdata.razor
실전 패턴으로 Blazor 앱 자신감 있게 개발하기
제가 드리는 팁 Blazor 기본, 아키텍처 선택, 유지보수 가능한 컴포넌트 설계를 실습 영상으로 배웠습니다.
- Razor 컴포넌트, 상태 관리, 의존성 주입 단계별 실습
- 호스팅, 성능, 배포 워크플로우 실무 가이드
- Blazor 코드 유지보수에 좋은 깔끔한 UI 기법
Blazor에서 SEO 친화적 문화별 URL이 중요한 이유
- 검색 노출 개선: 문화별 URL은 검색 엔진이 언어별 콘텐츠를 이해하고 올바르게 인덱싱하도록 돕습니다.
- 사용자 신뢰 향상: 사용자는 /en-us/ 또는 /de-de/를 즉시 인식해 불편함을 줄이고 참여도를 높입니다.
- 내비게이션 일관성 유지: 사이트 전반에 단일 URL 패턴을 적용해 혼합 언어 내비게이션을 방지합니다.
- 다국어 콘텐츠 확장: 경로 재설계나 페이지 중복 없이 새 언어를 추가할 수 있습니다.
- 사이트 미래 대비: 신규 페이지도 자동으로 동일한 SEO 친화적 문화 라우팅 규칙을 따릅니다.
- 글로벌 도달 범위: 문화별 URL은 지역과 언어 선호도별 타깃팅을 용이하게 합니다.
Blazor Server를 공개 배포할 계획이라면 다음 호스팅 참고 사항이 도움이 됩니다: UpCloud Blazor 서버 호스팅.
자주 묻는 질문
문화 URL과 Blazor 현지화 관련 주요 질문 답변
완료되었습니다. 향후 페이지는 경로 + 문화 매개변수 단계를 반복하고, 코드 내 링크 생성 시 항상 문화 세그먼트를 포함해 내비게이션 오류를 방지하세요.