브레드크럼은 사용자 경험을 개선하고 검색 엔진 최적화(SEO)에 기여하는 중요한 요소입니다.
브레드크럼의 중요성
-
사용자 경험 개선: 사용자가 현재 페이지에서 어디에 있는지 명확히 보여주고, 어떤 경로를 통해 여기까지 왔는지, 그리고 다른 경로로 어떻게 이동할 수 있는지 시각적으로 제시합니다. 이는 사용자 이탈률을 낮추고 원하는 결과를 더 빠르게 얻도록 돕습니다.
-
검색 엔진 최적화(SEO): 검색 결과에 사이트의 구조를 간략하게 보여주며, 검색 엔진이 사이트 구조를 이해하고 크롤링 방식을 개선하는 데 도움을 줍니다. 좋은 내비게이션 경험은 유기적 트래픽 증가에 기여합니다.
브레드크럼의 유형
사용자 요구에 따라 세 가지 주요 유형이 있습니다.
-
계층적 (Hierarchical): 가장 일반적인 유형으로, 홈 페이지를 루트로 하여 사이트 구조를 계층적으로 따릅니다. 예:
제품 -> 전자제품 -> 스마트 워치 -> Apple Watch. -
필터 또는 속성 기반 (Filter or attribute-based): 컬렉션 페이지에 적용된 필터를 시각적으로 보여줍니다. 계층적 브레드크럼과 보완적으로 사용되며, 사용자가 어떤 필터를 적용했는지 빠르게 파악할 수 있게 합니다.
-
기록 기반 (History-based): 계층과 관계없이 방문했던 이전 페이지를 추적하는 링크를 제공합니다. 사용자가 동일한 페이지에 여러 경로로 도달할 수 있는 대규모 사이트에 유용합니다.
Rails 애플리케이션에 브레드크럼 추가하기
본 튜토리얼에서는 다음 요구사항을 충족하는 브레드크럼 컴포넌트를 구축합니다.
-
컨트롤러 내에서 브레드크럼 목록 생성 가능
-
경로, URL 또는 일반 텍스트에 따라 링크 또는 텍스트 렌더링
-
홈 아이콘과 같은 아이콘 표시 가능
-
적절한 스키마 마크업 생성
-
turbo: false옵션 지원
구현 단계:
-
애플리케이션 설정:
ViewComponent와lucide-rails젬을 설치하고BreadcrumbsComponent를 생성합니다. -
Breadcrumb모델 정의:text,path,icon,turbo속성을 가지며, 링크 여부(link?) 및 아이콘 유무(has_icon?)를 판단하는 메서드를 포함합니다. -
컨트롤러 통합:
ApplicationController에add_breadcrumb헬퍼 메서드를 추가하거나concerns를 사용하여 브레드크럼을 동적으로 추가합니다.ruby # app/controllers/concerns/breadcrumbs.rb module Breadcrumbs extend ActiveSupport::Concern included { helper_method :breadcrumbs } def add_breadcrumb(text, path: nil, icon: nil) breadcrumbs << Breadcrumb.new(text: text, path: path, icon: icon) end def breadcrumbs @breadcrumbs ||= [] end end BreadcrumbsComponent렌더링:ViewComponent템플릿에서 반복문을 통해Breadcrumb객체를 렌더링하며, 링크 여부와 아이콘 유무에 따라 조건부 렌더링을 수행합니다. ```erb```
- 스키마 마크업 추가:
schema.org/BreadcrumbList및schema.org/ListItem을 사용하여 구조화된 데이터를 HTML에 직접 포함시켜 검색 엔진이 브레드크럼 정보를 명확하게 파악하도록 합니다.itemprop="item",itemprop="name",itemprop="position"속성을 활용합니다.