브레드크럼

페이지에 브레드크럼 경로를 추가하고, 표시 위치를 제어하며, 화면 경로와 브레드크럼 스키마를 일치시키세요.

개요

브레드크럼은 방문자가 현재 페이지가 사이트 구조에서 어디에 있는지 이해하도록 돕고, 검색 엔진에 더 명확한 계층 신호를 제공합니다.

설정 위치는 Airygen SEO -> 설정 -> 브레드크럼입니다.

이 모듈은 상위 페이지, 카테고리 아카이브, 검색 결과, 깊은 콘텐츠 경로를 가진 사이트에서 특히 유용합니다.

출력 방법

브레드크럼은 수동 배치와 자동 콘텐츠 삽입을 모두 지원합니다.

수동 출력

브레드크럼을 직접 배치하고 싶다면 브레드크럼 수동 출력 활성화를 켭니다.

템플릿 함수는 테마 템플릿 안에 브레드크럼을 넣고 싶을 때 사용합니다.
숏코드는 글 본문, 숏코드 블록, 또는 숏코드를 허용하는 다른 영역에 배치할 때 사용합니다.
블록은 블록 편집기에서 시각적으로 배치하고 싶을 때 사용합니다.

템플릿 함수:

<?php if ( function_exists( 'airygen_the_breadcrumbs' ) ) { airygen_the_breadcrumbs(); } ?>

숏코드:

[airygen_breadcrumbs]

블록:

<!-- wp:airygen/breadcrumb /-->

자동 삽입

Airygen SEO가 메인 콘텐츠 영역에 자동으로 넣게 하려면 브레드크럼 자동 삽입 활성화를 켭니다.

삽입 위치는 콘텐츠 이전 또는 콘텐츠 다음을 선택할 수 있습니다.
자동 삽입은 여러 글에 같은 위치로 브레드크럼을 표시하고 싶을 때 적합합니다.
수동 배치는 테마나 페이지 레이아웃에서 정확한 위치 제어가 필요할 때 더 적합합니다.

수동 출력과 자동 삽입을 동시에 켠 경우에는 실제 페이지에서 브레드크럼이 두 번 보이지 않는지 꼭 확인하세요.

설정

이 페이지는 설정, 레이아웃, 미리보기로 구성됩니다.

설정 탭

이 탭에서는 브레드크럼을 어떻게 렌더링할지와 어떤 항목을 경로에 포함할지 결정합니다.

출력 제어

브레드크럼 수동 출력 활성화는 브레드크럼 렌더링용 템플릿 함수, 숏코드, 블록 스니펫을 활성화합니다.
브레드크럼 자동 삽입 활성화는 선택한 위치에 따라 글 본문에 브레드크럼을 삽입합니다.
삽입 위치는 자동 출력이 콘텐츠 이전 또는 콘텐츠 다음에 표시될지 제어합니다.

계층 구조

이 제어들은 브레드크럼 체인에 어느 정도 구조를 표시할지 결정합니다.

홈 링크 표시는 경로를 홈페이지 라벨과 홈페이지 URL로 시작합니다.
아카이브에서 블로그 링크 표시는 사이트가 고정 글 페이지를 사용할 때 아카이브 항목 앞에 글 목록 페이지를 넣습니다.
상위 페이지 표시는 페이지와 계층형 사용자 정의 글 유형에 상위 페이지를 추가합니다.
택소노미 상위 항목 숨기기는 더 짧은 경로를 원할 때 카테고리와 택소노미 경로에서 상위 용어를 숨깁니다.
현재 페이지 표시는 현재 페이지를 마지막 브레드크럼으로 포함하며 JSON-LD 브레드크럼 목록에도 영향을 줍니다.
페이지 번호 표시는 페이지가 나뉜 아카이브에서 현재 페이지 번호를 덧붙입니다.
구분자는 브레드크럼 항목 사이에 표시할 기호를 정의합니다.
접두어는 짧은 “현재 위치” 같은 문구를 경로 앞에 추가합니다.

레이블

이 필드들은 브레드크럼 문구를 사이트 톤에 맞추는 데 사용합니다.

홈 레이블은 홈페이지 브레드크럼 텍스트를 바꿉니다.
아카이브 레이블은 아카이브 보기에서 사용할 라벨을 바꿉니다.
검색 결과 레이블은 검색 결과 페이지에서 보일 라벨을 바꿉니다.
404 레이블은 찾을 수 없는 페이지에서 표시할 문구를 바꿉니다.

레이아웃 탭

이 탭에서는 브레드크럼 컨테이너와 경로 텍스트 자체의 스타일을 조정합니다.

컨테이너 스타일

테두리 두께는 브레드크럼 컨테이너 테두리 두께를 바꿉니다.
테두리 색상은 테두리 색상을 바꿉니다.
안쪽 여백은 경로 주변 내부 여백을 바꿉니다.
컨테이너 배경색은 브레드크럼 뒤 배경색을 바꿉니다.

경로 스타일

글자 크기는 브레드크럼 텍스트 크기를 바꿉니다.
텍스트 색상은 링크가 아닌 텍스트 색상을 바꿉니다.
링크 색상은 링크된 브레드크럼 색상을 바꿉니다.
링크 밑줄은 링크 밑줄 표시 여부를 제어합니다.

사용 방법

Airygen SEO -> 설정 -> 브레드크럼을 엽니다.
설정 탭에서 브레드크럼 수동 출력 활성화, 브레드크럼 자동 삽입 활성화, 또는 하나의 주 출력 방식만 사용할지 결정합니다.
테마 수준 배치를 원하면 브레드크럼 수동 출력 활성화를 켜고 템플릿 함수 스니펫을 원하는 템플릿 위치에 넣습니다.
편집기 수준 배치를 원하면 수동 출력을 유지한 채 콘텐츠 영역에 숏코드 또는 블록을 삽입합니다.
자동 배치를 원하면 브레드크럼 자동 삽입 활성화를 켜고 콘텐츠 레이아웃에 맞는 삽입 위치를 선택합니다.
계층 구조에서 홈 링크, 아카이브의 블로그 링크, 상위 페이지, 현재 페이지, 페이지네이션 세부 정보를 표시할지 결정합니다.
읽기 쉬운 구분자와 선택적 접두어를 설정해 사이트 톤에 맞춥니다.
레이블에서 홈, 아카이브, 검색, 404 보기용 문구를 사용자 지정합니다.
레이아웃을 열어 컨테이너 테두리, 패딩, 색상, 경로 텍스트 스타일을 조정해 테마와 맞춥니다.
미리보기를 열어 노트북, 태블릿, 휴대전화를 전환하며 샘플 경로를 확인합니다.
설정을 저장하고 실제 프런트엔드에서 글, 아카이브 페이지, 검색 페이지, 404 페이지를 테스트합니다.

저장 후 실제 사이트에서 다음 항목을 확인하세요.

브레드크럼 경로가 각 위치에 한 번만 나타납니다.
표시되는 경로가 사용자가 따라가길 원하는 페이지 계층과 일치합니다.
현재 페이지는 현재 페이지 표시가 켜져 있을 때만 경로에 포함됩니다.
테마 CSS가 적용된 후에도 실제 스타일이 올바르게 보입니다.

미리보기와 실제 출력

미리보기 탭은 현재 스타일 설정을 적용한 단순화된 브레드크럼 예시를 보여 줍니다.

미리보기에는 노트북, 태블릿, 휴대전화 장치 전환기가 포함됩니다.
미리보기는 현재 테두리, 간격, 색상, 텍스트 설정을 반영합니다.
화면에는 생성된 HTML 및 CSS 샘플도 함께 표시됩니다.

실제 사이트는 미리보기와 다를 수 있습니다.

실제 브레드크럼 경로는 실제 페이지 유형, 상위 구조, 택소노미 경로, 검색 또는 404 문맥에 따라 달라집니다.
최종 모양은 활성 테마, 사용자 지정 CSS, 주변 페이지 레이아웃의 영향을 받을 수 있습니다.
수동 배치와 자동 삽입을 함께 사용하면 미리보기는 깔끔해 보여도 실제 페이지에서는 중복으로 표시될 수 있습니다.

저장 후에는 실제 글, 실제 아카이브, 검색 결과 페이지, 404 페이지를 각각 확인해 프런트엔드의 경로와 스키마 동작을 검증하세요.

SEO 이점

브레드크럼은 검색 엔진이 페이지 계층 구조를 더 쉽게 이해하도록 돕고, 방문자가 브라우저 뒤로 가기에 의존하지 않고 깊은 콘텐츠에서 더 넓은 섹션으로 이동하게 해 줍니다.

또한 검색에서 유입된 페이지를 더 쉽게 탐색하게 만들어, 카테고리 트리, 아카이브 보기, 다단계 콘텐츠 경로가 있는 사이트에서 특히 유용합니다.

활용 사례

다층 주제 구조를 가진 콘텐츠 퍼블리셔

이전에는 카테고리, 하위 카테고리, 긴 기사 시리즈가 있어도 독자가 더 넓은 주제 페이지로 돌아가는 명확한 경로가 없었습니다.

이후에는 브레드크럼가 더 넓은 섹션으로 돌아가는 경로를 보여 주어 기사 간 관계와 탐색 흐름을 더 쉽게 이해하게 합니다.

깊은 컬렉션 구조를 가진 WooCommerce 또는 카탈로그 사이트

이전에는 검색에서 깊은 상품 또는 카테고리 페이지로 들어온 사용자가 그 페이지가 카탈로그 전체에서 어디에 속하는지 바로 이해하지 못했습니다.

이후에는 브레드크럼가 카테고리 경로를 계속 보여 주어 쇼핑객이 다시 처음부터 시작하지 않고 더 넓은 컬렉션으로 이동할 수 있습니다.

여러 고객 사이트 구조를 표준화하는 에이전시

이전에는 사이트마다 브레드크럼 배치 방식이 달라 탐색과 스키마 동작을 일관되게 유지하기 어려웠습니다.

이후에는 브레드크럼가 배치, 라벨, 레이아웃을 한곳에서 제어하게 해 주고, 사이트별로 수동 출력과 자동 삽입 중 적합한 방식을 고를 수 있게 합니다.

자주 묻는 질문

수동 출력과 자동 삽입 중 무엇을 써야 하나요?

템플릿이나 특정 콘텐츠 영역에 정확히 배치해야 한다면 수동 출력을 사용하세요. 많은 글에 같은 위치로 자동 삽입하고 싶다면 자동 삽입을 사용하세요.

브레드크럼이 두 번 보이면 어떻게 해야 하나요?

브레드크럼 자동 삽입 활성화를 켠 상태에서 같은 페이지에 숏코드, 블록, 템플릿 함수도 함께 넣었는지 확인하세요. 해당 위치에서는 실제로 필요한 한 가지 출력 방식만 남기세요.

미리보기가 실제 페이지와 정확히 같지 않은 이유는 무엇인가요?

미리보기는 스타일 설정을 단순화해 보여 주는 참고 화면입니다. 실제 출력은 페이지 계층, 현재 쿼리, 테마 CSS의 영향을 계속 받습니다.