Blazor 문화 라우팅: SEO 최적화 문화별 URL 가이드

가격
5 €약 ₩8,655
최종 업데이트 2026. 1. 29.
소프트웨어 스택 Blazor Server · VS 2026 · .NET 10 · TablerForNet

이 Blazor 튜토리얼에서는 ghostlyinc.com/en-us/page-name 같은 깔끔하고 검색 가능한 SEO 친화적 문화별 URL을 구현합니다. 안전한 문화 전환, 일관된 내비게이션 유지, 다국어 콘텐츠 검색성 향상을 단계별로 배워봅니다.

기본 개념부터 확인하려면 먼저 읽어보세요 Blazor란 무엇인가? 그 후 SEO용 문화 라우팅 구현으로 돌아오세요.

Blazor 문화 기반 URL 라우팅으로 SEO 최적화 다국어 페이지 구조 시각화
Blazor 문화 인식 URL 패턴으로 색인, 탐색 명확성, 글로벌 확장성 향상

이 SEO 친화적 문화 링크 튜토리얼에서 만들 내용

전체 구현 과정을 안내합니다:

  • 애플리케이션 문화 변경: Blazor 앱 전반에 일관된 문화 적용
  • 구조화된 URL 체계 사용: 각 문화별로 /en-us/your-page 형태로 페이지 제공
  • 브라우저 기반 문화 변경 지원: 사용자가 선호하는 문화로 전환 가능
  • 잘못된 문화 링크 처리: 지원하지 않는 문화는 리디렉션 또는 대체 페이지 제공
  • URL을 SEO 친화적이고 문화별로 구분하여 모든 현지화 페이지가 쉽게 크롤링되도록 유지
  • 인덱싱과 사용자 경험 개선: 가시성 향상과 예측 가능한 경험 유지

Blazor 메타데이터 및 구조화된 SEO 기본은 다음도 참고하세요 Blazor SEO 메타데이터 컴포넌트.


단계별 가이드: Blazor SEO 친화적 문화별 URL 구현

이제 Blazor 앱에 문화 기반 라우팅을 추가하는 코드를 살펴봅니다. 각 단계를 따라가면 현재와 미래 페이지 모두 일관된 문화 URL을 갖게 됩니다.

C#



다음으로 Culture Controller를 추가해 선택한 문화를 적용하고 올바른 문화별 URL로 리디렉션합니다.

C#



현재 ICultureService와 CultureController가 준비되었습니다. 이제 다음을 진행하세요 Program.cs 다음 변경 사항과 함께:

  • ICultureService를 등록하세요.
  • 기본 문화를 지원 목록의 첫 번째 문화로 설정
  • 콘텐츠 현지화를 위한 지원 문화 구성
  • UI 현지화를 위한 지원 UI 문화 구성
  • 설정한 현지화 옵션을 요청 파이프라인에 적용
  • 들어오는 HTTP 요청을 해당 컨트롤러 액션에 매핑
C#




이제 업데이트 _host.cshtml 다음 변경 사항과 함께:

  • ICultureService를 주입하세요.
  • HTML lang 속성 설정
  • body 태그에 Culture 쿠키 설정
Razor



이제 업데이트 App.razor 다음 변경 사항과 함께:

  • ICultureService를 주입하세요.
  • NavigationManager 주입
  • 아래 코드 섹션을 코드에 추가
Razor

@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


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 주입
  • 생성 전 컴포넌트 추가
  • 아래 코드 섹션 추가
Razor

@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

Razor


Blazor 학습 추천

실전 패턴으로 Blazor 앱 자신감 있게 개발하기

제가 드리는 팁 Blazor 기본, 아키텍처 선택, 유지보수 가능한 컴포넌트 설계를 실습 영상으로 배웠습니다.

  • Razor 컴포넌트, 상태 관리, 의존성 주입 단계별 실습
  • 호스팅, 성능, 배포 워크플로우 실무 가이드
  • Blazor 코드 유지보수에 좋은 깔끔한 UI 기법
Blazor 강좌 보기

Blazor에서 SEO 친화적 문화별 URL이 중요한 이유

  • 검색 노출 개선: 문화별 URL은 검색 엔진이 언어별 콘텐츠를 이해하고 올바르게 인덱싱하도록 돕습니다.
  • 사용자 신뢰 향상: 사용자는 /en-us/ 또는 /de-de/를 즉시 인식해 불편함을 줄이고 참여도를 높입니다.
  • 내비게이션 일관성 유지: 사이트 전반에 단일 URL 패턴을 적용해 혼합 언어 내비게이션을 방지합니다.
  • 다국어 콘텐츠 확장: 경로 재설계나 페이지 중복 없이 새 언어를 추가할 수 있습니다.
  • 사이트 미래 대비: 신규 페이지도 자동으로 동일한 SEO 친화적 문화 라우팅 규칙을 따릅니다.
  • 글로벌 도달 범위: 문화별 URL은 지역과 언어 선호도별 타깃팅을 용이하게 합니다.

Blazor Server를 공개 배포할 계획이라면 다음 호스팅 참고 사항이 도움이 됩니다: UpCloud Blazor 서버 호스팅.

자주 묻는 질문

문화 URL과 Blazor 현지화 관련 주요 질문 답변

완료되었습니다. 향후 페이지는 경로 + 문화 매개변수 단계를 반복하고, 코드 내 링크 생성 시 항상 문화 세그먼트를 포함해 내비게이션 오류를 방지하세요.