Webflow에서 브레드크럼을 만드는 방법【SEO 최적화/구조화】

브레드크럼

브레드크럼이란 SEO 최적화에도 필수로 여겨지는 기능입니다. Google에 “이 부분은 브레드크럼이다”라고 전하는 구조화까지 하면 SEO 최적화로 효과를 발휘합니다.

이런 궁금증에 답합니다.

Webflow에서 브레드크럼을 도입하는 방법은 3패턴 있습니다.

• CMS를 사용해 도입하는 방법
• 커스텀 코드를 사용해 도입하는 방법
• CMS와 커스텀 코드를 사용하는 방법【가장 추천】

순서대로 해설합니다.
아직 Webflow에 등록하지 않은 분은 이쪽에서↓

Webflow의 CMS로 브레드크럼을 도입하는 방법

Webflow 공식 페이지에 기재된 방법으로 브레드크럼을 만듭니다.
Webflow 공식은 “이쪽”

순서는 다음과 같습니다.

• 【순서 1】쇼케이스에서 인용
• 【순서 2】CMS 부분을 자신의 CMS로 바꾼다
  

【순서 1】브레드크럼을 Webflow 쇼케이스에서 인용

Webflow 공식 페이지 마지막에 기재된 쇼케이스에서 사이트를 열고, 브레드크럼 부분을 복사해 자기 사이트에 붙여넣읍시다.

【순서 2】CMS 부분을 자신의 CMS로 바꾼다

보라색 부분을 변경합니다. 링크·글자를 자신의 CMS로 치환합시다.

장점·단점

장점은 간단하다는 것. 단점은 SEO 최적화가 되지 않는다는 것. 이유는 구조화가 안 되어 있기 때문입니다. 구조화란 Google에 “이 부분은 브레드크럼이야”라고 전하는 기능입니다. 구조화된 브레드크럼을 만들려면 커스텀 코드를 사용합시다.

커스텀 코드로 브레드크럼을 만드는 방법

커스텀 코드로 브레드크럼을 만듭니다. CMS를 쓰지 않는 분은 이 방법으로 추가합시다.

• 【순서 1】브레드크럼 코드를 Webflow에 붙여넣기
• 【순서 2】복사한 코드를 편집
• 【순서 3】커스텀 코드를 스타일링
  

【순서 1】브레드크럼 코드를 Webflow에 붙여넣기

사루와카 님의 블로그(일본어)에서 구조화된 브레드크럼의 HTML/CSS 예제 코드(BreadcrumbList 구조화 데이터 포함)를 복사해 Webflow의 커스텀 코드에 붙여넣읍시다. 구조화된 코드를 쓰면 붙여넣기만으로 구조화 완료입니다.

【순서 2】커스텀 코드 안에서 브레드크럼 코드를 편집

스타일을 바꾸기 쉽게 복사한 CSS 코드 안의 “글자색”“margin”을 삭제. 코드 안 해당 부분에 “URL”“이름”을 넣읍시다.

【순서 3】커스텀 코드를 스타일링

Webflow에 넣은 커스텀 코드 위에 Div 블록을 넣어 브레드크럼 스타일을 원하는 대로 바꿉시다.
※링크 글자색만 “ALL LINK” 또는 커스텀 코드 안에서 편집 가능.

장점·단점

장점은 구조화할 수 있다는 것, 그리고 CMS를 쓰지 않으니 관리비가 싸진다는 것.
단점은 전 페이지에 수동으로 써넣어야 한다는 것.

CMS와 커스텀 코드로 브레드크럼을 자동 생성하는 방법【가장 추천】

커스텀 코드 안에서 CMS를 쓰는 방법입니다. 하나 만들면 전 페이지에서 한 번에 만들 수 있고 구조화도 가능합니다.

• 【순서 1】브레드크럼 코드를 Webflow에 붙여넣기
• 【순서 2】복사한 코드를 편집
• 【순서 3】브레드크럼 안의 “이름”“URL”을 CMS로 표시
• 【순서 4】스타일 변경

순서대로 해설합니다. ※커스텀 코드로 브레드크럼을 만드는 방법과 거의 같습니다.

【순서 1】브레드크럼 코드를 Webflow에 붙여넣기

사루와카 님의 블로그(일본어)를 참고해 브레드크럼 코드를 복사합시다. 구조화된 코드를 소개하고 있으므로 커스텀 코드에 붙여넣는 것만으로 구조화가 끝납니다.

【순서 2】브레드크럼 코드를 편집

복사한 CSS 코드 안의 “글자색”과 “margin”을 삭제합니다.

※이모지 폰트를 쓸 수 없는 경우에는 해당 글의 “FontAwesome을 쓰지 않는 경우”에서 코드를 복사합시다.

【순서 3】브레드크럼 안의 “이름”“URL”을 CMS로 표시

“URL”“이름”을 넣을 때 CMS를 사용합니다. 커스텀 코드 화면 오른쪽 위의 “+Add Field”에서 해당하는 것을 선택합시다. 주로 쓰는 것은 “Name”“Slug”입니다.

✓주의

위 이미지처럼 “Slug” 앞에 Slug 이외의 URL을 기재합시다.

【순서 4】스타일 변경

커스텀 코드 위에 Div 블록을 넣어 브레드크럼을 스타일링합니다. 링크 글자색만 “ALL LINK” 또는 커스텀 코드 안에서 편집합시다.

브레드크럼이 구조화됐는지 검사하기

Google의 리치 결과 테스트로 브레드크럼 구조화가 성공했는지 확인합시다.

• Webflow에서 사이트를 공개하고 URL 복사
  ↓
  Google 검사 툴에서 검사

잘 구조화되어 있으면 브레드크럼이 검출됩니다.

“이름 없는 아이템”이라고 표시된다

“이름 없는 아이템”으로 검출되지만 특별히 문제없다고 하니 방치해도 OK.

정리: Webflow에 브레드크럼을 추가한다면 “커스텀 코드＋CMS”

커스텀 코드 안에서 CMS를 쓸 수 있게 되면서 표현의 폭이 더 넓어졌습니다. 브레드크럼은 SEO 최적화에도 필수 기능이니 꼭 추가해 보세요.

이 블로그에서는 그 밖에도 Webflow 사용법을 소개하고 있습니다. Webflow 제작 대행도 받고 있으니 관심 있다면 문의해 주세요.

아직 Webflow에 등록하지 않은 분은 이쪽에서↓

‍