Webflow를 사용하여 경로 목록을 만드는 방법 [SEO 측정/분류]

Webflow의 CMS를 사용하여 탐색경로 목록을 도입하는 방법

공식 Webflow 페이지에 설명된 방법을 사용하여 이동 경로 목록을 만드세요.
공식 웹플로우란 무엇인가요?”여기”

절차는 다음과 같습니다.

• [1단계] 쇼케이스 인용문
• [2단계] CMS 부분을 자체 CMS로 변경
  

[1단계] Webflow 쇼케이스에서 이동 경로 목록 인용하기

Webflow 공식 페이지 끝에 있는 쇼케이스에서
사이트를 복사하고 이동 경로 목록을 복사하여 자신의 사이트에 붙여넣습니다.

[2단계] CMS 부분을 자체 CMS로 변경

보라색 부분을 변경하십시오.
링크와 텍스트를 자체 CMS로 바꾸세요.

장점/단점

장점은 간편하다는 것입니다.단점은 SEO 측정이 아니라는 것입니다.
그 이유에 대해서는구조화되지 않았어요에서.
구조화는 구글에 '이 부분은 탐색목록 (Breadcrumb list) '이라고 알려주는 함수입니다.
구조화된 탐색경로 목록을 만들려면 사용자 지정 코드를 사용하세요.

Webflow 사용자 지정 코드를 사용하여 이동 경로 목록을 만드는 방법

사용자 지정 코드를 사용하여 탐색경로 목록을 만드세요.
CMS를 사용하지 않는 경우 이 방법을 사용하여 이동 경로 목록을 추가하세요.

절차는 다음과 같습니다.

• [1단계] 탐색경로 목록 코드를 복사하여 Webflow에 붙여넣기
• [2단계] 탐색경로 목록 사본 편집
• [3단계] 사용자 지정 코드 스타일 지정
  

[1단계] 탐색경로 목록 코드를 복사하여 Webflow에 붙여넣기

사루와카 블로그를 참조하여 이동 경로 목록의 코드를 복사합니다.
Webflow의 사용자 지정 코드에 붙여넣겠습니다.
구조화된 코드가 도입되었으므로 복사하여 붙여넣기만 하면 구조화가 완료됩니다.

[2단계] Webflow 사용자 지정 코드 내에서 이동 경로 목록 코드를 편집합니다.

스타일을 쉽게 변경할 수 있도록 복사한 CSS 코드에서 “문자 색상”과 “여백”을 제거했습니다.
코드의 적절한 위치에 “URL”과 “이름”을 입력해 보겠습니다.
※이모티콘 글꼴을 사용할 수 없는 경우 문서의 “FontAwesome 사용하지 않는 경우”의 코드를 복사하세요..

[3단계] 사용자 지정 코드 스타일 지정

Webflow에 입력한 사용자 지정 코드 위에 Div 블록을 추가하여 이동 경로 목록 스타일을 원하는 대로 변경할 수 있습니다.
※ “ALL LINK” 또는 사용자 지정 코드에서는 링크의 텍스트 색상만 편집할 수 있습니다.

장점/단점

장점은 구조화가 가능하다는 것입니다.CMS가 없기 때문에 관리 비용이 적게 듭니다.
단점은 모든 페이지에 수동으로 작성해야 한다는 것입니다.

Webflow의 CMS 및 사용자 지정 코드를 사용하여 이동 경로 목록을 자동으로 만드는 방법 [가장 권장됨]　

이것은 사용자 지정 코드 내에서 CMS를 사용하는 방법입니다.
하나 만들면모든 페이지를 한 번에 만들 수 있으며 구조화가 가능합니다.그거야.

단계는 다음과 같습니다.

• [1단계] 탐색경로 목록 코드를 복사하여 Webflow에 붙여넣기
• [2단계] 탐색경로 목록 사본 편집
• [3단계] CMS를 사용하여 이동 경로 목록에 “이름”과 “URL” 표시
• [4단계] 탐색경로 목록 스타일 변경

순서대로 설명하겠습니다.
※Webflow의 사용자 지정 코드를 사용하여 탐색경로 목록을 도입하는 방법과 거의 같습니다.

[1단계] 탐색경로 목록 코드를 복사하여 Webflow에 붙여넣기

사루와카 블로그를 참조하여 이동 경로 목록의 코드를 복사해 보겠습니다.
구조화된 코드가 도입되었으므로 사용자 지정 코드에 복사하여 붙여넣기만 하면 구조화가 완료됩니다.

[2단계] 탐색경로 목록 사본 편집

복사한 CSS 코드에서 “문자 색상”과 “여백”을 제거했습니다.
※이모티콘 글꼴을 사용할 수 없는 경우 문서의 “FontAwesome 사용하지 않는 경우”의 코드를 복사하세요.

[3단계] CMS를 사용하여 이동 경로 목록에 “이름”과 “URL” 표시

“URL”과 “이름”을 입력할 때우리는 CMS를 사용할 것입니다.
사용자 지정 코드 화면의 오른쪽 상단에 “+ Add Field”가 있는데, 거기서 적절한 것을 선택해 봅시다.주로 “이름”과 “슬러그”가 사용됩니다.

✓ 노트

위 그림처럼 '슬러그' 앞에 slu가 아닌 다른 URL을 써 보겠습니다.

[4단계] 탐색경로 목록 스타일 변경

Webflow에 입력한 사용자 지정 코드 위에 Div 블록을 추가하여 탐색경로 목록의 스타일을 지정합니다.
“ALL LINK” 링크의 텍스트 색상만 편집하거나 사용자 지정 코드 내에서 편집합니다.

Webflow에서 생성한 탐색경로 목록이 구조화되어 있는지 확인

구글 검사 도구탐색경로 목록이 성공적으로 구성되었는지 확인하는 데 사용합니다.

• Webflow에 사이트를 게시하고 URL을 복사합니다.
  ↓
  구글 검사 도구로 테스트하기

그게 다야.구조가 잘 잡혀 있으면 탐색경로 목록이 탐지됩니다.

“이름 없는 항목”이 표시됩니다.

“이름 없는 항목”이 감지되지만 여기에는 특별히 문제가 있는 것 같지 않으므로 그대로 두어도 괜찮습니다.

요약: Webflow에 탐색경로 목록을 추가하려면 “사용자 지정 코드+CMS”를 선택하세요.

Webflow로 사용자 지정 코드를 추가하는 방법을 설명했습니다.
이제 사용자 지정 코드 내에서 CMS를 사용할 수 있으므로 표현의 범위가 더욱 확장되었습니다.
탐색경로 목록은 SEO 측정에 필수적인 기능이므로 반드시 추가해야 합니다.

이 블로그에서는 Webflow를 사용하는 다른 방법도 소개합니다.
Webflow 등에서도 제작 서비스를 받고 있으므로 꼭 참조하십시오.

아직 Webflow에 가입하지 않으셨다면 여기를 클릭하세요 ↓

‍