※이 글의 순서와 화면은 2022년 시점의 것입니다. Webflow의 현행 UI에서는 명칭이나 배치가 달라진 경우가 있습니다.
이런 궁금증에 답합니다.
Webflow에서 브레드크럼(탐색 경로)을 도입하는 방법은 3가지입니다.
- CMS를 사용해 도입하는 방법
- 커스텀 코드를 사용해 도입하는 방법
- CMS와 커스텀 코드를 함께 쓰는 방법【가장 추천】
순서대로 해설합니다.
아직 Webflow에 가입하지 않은 분은 이쪽에서↓
이 글의 요점
- 브레드크럼(탐색 경로)란?
- 브레드크럼이란 SEO 대책에도 필수로 여겨지는 내비게이션 기능입니다. Webflow에서는 3가지 방법으로 만들 수 있으며, Google에 “이 부분은 브레드크럼이다”라고 알려 주는 구조화까지 해야 SEO 대책으로서 효과를 발휘합니다.
목차
Webflow의 CMS를 사용해 브레드크럼을 도입하는 방법
Webflow 공식 페이지에 나와 있는 방법으로 브레드크럼을 만듭니다.
Webflow 공식 페이지는 “이쪽”
순서는 다음과 같습니다
- 【순서 1】쇼케이스에서 가져오기
- 【순서 2】CMS 부분을 자기 CMS로 바꾸기
【순서 1】브레드크럼을 Webflow 쇼케이스에서 가져오기
Webflow 공식 페이지 마지막에 실려 있는 쇼케이스에서
쇼케이스의 사이트를 열고, 브레드크럼 부분을 복사해 자기 사이트에 붙여 넣습니다.
【순서 2】CMS 부분을 자기 CMS로 바꾸기
보라색 부분을 변경합니다.
링크와 글자를 자기 CMS로 바꿔 주세요.
장점·단점
장점은 간단하다는 것입니다. 단점은 SEO 대책이 되지 않는다는 것입니다.
이유는 구조화가 되어 있지 않기 때문입니다.
구조화란 Google에 “이 부분은 브레드크럼이다”라고 알려 주는 기능입니다.
구조화된 브레드크럼을 만들려면 커스텀 코드를 사용합시다.
Webflow의 커스텀 코드를 사용해 브레드크럼을 만드는 방법
커스텀 코드를 사용해 브레드크럼을 만듭니다.
CMS를 사용하지 않는 분은 이 방법으로 브레드크럼을 추가합시다.
순서는 다음과 같습니다
- 【순서 1】브레드크럼 코드를 Webflow에 복사해 붙여 넣기
- 【순서 2】붙여 넣은 브레드크럼 코드 편집하기
- 【순서 3】커스텀 코드에 스타일 적용하기
【순서 1】브레드크럼 코드를 Webflow에 복사해 붙여 넣기
사루와카 씨의 블로그(일본어)를 참고해 브레드크럼 코드를 복사하고,
Webflow의 커스텀 코드에 붙여 넣읍시다.
구조화된 코드를 소개하고 있으므로 복사해 붙여 넣기만 하면 구조화가 끝납니다.
【순서 2】Webflow의 커스텀 코드 안에서 브레드크럼 코드를 편집합니다.
스타일을 바꾸기 쉽도록, 복사한 CSS 코드 안의 “글자색”과 “margin”을 삭제합니다.
코드 안의 해당 위치에 “URL”과 “이름”을 넣읍시다.
※이모지 폰트를 쓸 수 없는 경우에는 글 안의 “FontAwesome을 쓰지 않는 경우”에서 코드를 복사합니다.
【순서 3】커스텀 코드에 스타일 적용하기
Webflow에 넣은 커스텀 코드 위에 Div 블록을 넣어 브레드크럼의 스타일을 원하는 대로 바꿉시다.
※링크의 글자색만은 “ALL LINK” 또는 커스텀 코드 안에서 편집할 수 있습니다.
장점·단점
장점은 구조화가 된다는 것. CMS가 없으므로 관리비가 싸집니다
단점은 모든 페이지에 수동으로 써 넣어야 한다는 점입니다
Webflow의 CMS와 커스텀 코드를 사용해 브레드크럼을 자동 생성하는 방법【가장 추천】
커스텀 코드 안에서 CMS를 사용하는 방법입니다.
하나만 만들어 두면 모든 페이지에서 한 번에 생성되고, 구조화도 가능합니다.
순서는 다음과 같습니다.
- 【순서 1】브레드크럼 코드를 Webflow에 복사해 붙여 넣기
- 【순서 2】붙여 넣은 브레드크럼 코드 편집하기
- 【순서 3】브레드크럼 안의 “이름”과 “URL”을 CMS로 표시하기
- 【순서 4】브레드크럼의 스타일 변경하기
순서대로 해설합니다.
※Webflow의 커스텀 코드를 사용해 브레드크럼을 도입하는 방법과 거의 같습니다.
【순서 1】브레드크럼 코드를 Webflow에 복사해 붙여 넣기
사루와카 씨의 블로그(일본어)를 참고해 브레드크럼 코드를 복사합시다.
구조화된 코드를 소개하고 있으므로 커스텀 코드에 붙여 넣기만 하면 구조화가 끝납니다.
【순서 2】붙여 넣은 브레드크럼 코드 편집하기
복사한 CSS 코드 안의 “글자색”과 “margin”을 삭제합니다.
※이모지 폰트를 쓸 수 없는 경우에는 글 안의 “FontAwesome을 쓰지 않는 경우”에서 코드를 복사합시다.
【순서 3】브레드크럼 안의 “이름”과 “URL”을 CMS로 표시하기
“URL”과 “이름”을 넣을 때 CMS를 사용합니다.
커스텀 코드 화면의 오른쪽 위에 “+Add Field”가 있으니 거기에서 해당 항목을 선택합시다. 주로 사용하는 것은 “Name”과 “Slug”입니다.
✓주의
위 이미지처럼 “Slug” 앞에 Slug 이외의 URL을 적어 줍시다.
【순서 4】브레드크럼의 스타일 변경하기
Webflow에 넣은 커스텀 코드 위에 Div 블록을 넣어 브레드크럼에 스타일을 적용합니다.
링크의 글자색만은 “ALL LINK” 또는 커스텀 코드 안에서 편집합시다.
Webflow에 만든 브레드크럼이 구조화되었는지 검사하기
Google의 검사 도구를 사용해 브레드크럼의 구조화가 잘되었는지 확인합시다.
- Webflow에서 사이트를 게시하고 URL을 복사합니다. ↓ Google의 검사 도구로 검사
이것으로 완료입니다. 잘 구조화되어 있으면 브레드크럼이 검출됩니다.
“이름 없는 항목”이라고 표시된다
“이름 없는 항목”으로 검출되지만, 이것은 특별히 문제가 없다고 하니 그대로 두어도 OK
정리: Webflow에 브레드크럼을 추가한다면 “커스텀 코드 + CMS”
Webflow에서 커스텀 코드를 추가하는 방법을 해설했습니다.
커스텀 코드 안에서 CMS를 쓸 수 있게 되면서 표현의 폭이 한층 더 넓어졌습니다.
브레드크럼은 SEO 대책에도 필수인 기능이니 꼭 추가해 보세요.
이 블로그에서는 그 밖에도 Webflow 사용법을 소개하고 있습니다.
또 Webflow 제작 대행도 맡고 있으니 꼭 살펴봐 주세요.
아직 Webflow에 가입하지 않은 분은 이쪽에서↓
제작 실적
자주 묻는 질문
Webflow에서 브레드크럼을 만드는 방법에는 무엇이 있나요?
3가지가 있습니다. CMS를 쓰는 방법, 커스텀 코드를 쓰는 방법, CMS와 커스텀 코드를 함께 쓰는 방법입니다. 가장 추천하는 것은 CMS + 커스텀 코드로, 하나만 만들어도 모든 페이지에서 한 번에 생성되고 구조화도 가능합니다.
Webflow의 CMS만으로 만든 브레드크럼은 SEO 대책이 되나요?
되지 않습니다. 구조화가 되어 있지 않기 때문입니다. 구조화란 Google에 “이 부분은 브레드크럼이다”라고 알려 주는 기능으로, 구조화된 브레드크럼을 만들려면 커스텀 코드를 사용합시다.
Webflow의 브레드크럼이 구조화되었는지 확인하는 방법은?
Webflow에서 사이트를 게시하고 URL을 복사해 Google의 검사 도구로 검사합니다. 잘 구조화되어 있으면 브레드크럼이 검출됩니다. “이름 없는 항목”이라고 표시되어도 특별히 문제가 없으니 그대로 두어도 됩니다.
커스텀 코드만으로 브레드크럼을 만들 때의 장점·단점은?
장점은 구조화가 된다는 것, 그리고 CMS가 없으므로 관리비가 싸진다는 것입니다. 단점은 모든 페이지에 수동으로 써 넣어야 한다는 점입니다. CMS를 쓰지 않는 경우에는 이 방법으로 추가합시다.
Webflow의 브레드크럼 스타일은 어떻게 바꾸나요?
커스텀 코드 위에 Div 블록을 넣어 브레드크럼의 스타일을 원하는 대로 바꿉니다. 링크의 글자색만은 “ALL LINK” 또는 커스텀 코드 안에서 편집할 수 있습니다.
