Breadcrumps Navigation : 사용자와 Google을 모두 돕는 Breadcrumb

인생의 실제 문제

웹 사이트를 즐기고 "잃어버린"것처럼 느껴본 적이 있습니까? 나는 당신이 웹 사이트에서 어디에 있는지 모르겠습니다. 그리고 메인 페이지로 돌아가거나 관심이있는 방법은 무엇입니까? 또는 Google 검색 결과에서 웹 사이트에서 직접 한 페이지로 클릭 할 수도 있습니다. 그리고 "부동"얼굴만으로도, 상황이 없으며, 무엇이 관련되어 있는지 또는 더 큰 페이지가 있습니까?

이 문제는 단지 우리와 같은 사용자가 아닙니다. 웹 사이트 소유자 디지털 마케팅 또는 SEO에게만이 문제는 웹 사이트의 효율성에 직접적인 영향을 미치는 "악몽"입니다. 그것이 :

• 사용자는 혼란스럽고 좌절합니다. 사용자가 길을 찾을 수없는 경우. 또는 웹 사이트 구조를 이해하지 못할 가능성이 높습니다. 높은 바운스 속도라고도합니다
• 전환율이 떨어집니다. 고객이 제품 정보, 서비스 또는 전화 버튼을 찾으면 복잡한 탐색으로 인해 찾을 수 없습니다. 구매 또는 연락 결정은 거의 아닙니다.
• Google은 혼란스러워합니다. 웹 사이트의 TEK : Google Bot이 크롤링에 들어오고 데이터를 수집하고 어느 페이지가 중요한지 이해하지 못하는 경우. 아이의 얼굴은 어느 페이지입니까? 웹 사이트가 잘 순위가 어렵다는 카테고리는 어느 페이지입니다.

이와 같은 상황을 만나면 혼자가 아닙니다. 이것은 많은 웹 사이트가 직면하고있는 전형적인 문제입니다. 그러나 좋은 소식은 매우 간단하지만 강력한 "출구"가 있다는 것입니다. 이는 사용자와 Google, "Breadcrumps Navigation"또는 "Bread Frake"와 같은 "두 개의 승마 건"과 같은이 문제를 해결하는 데 도움이됩니다.

삽화를위한 프롬프트 : 사용자 이미지는 컴퓨터와 혼란스러운 표현이있는 휴대폰을 사용하고 있습니다. 화면의 미로와 같은 방해 경로로

그 문제가 발생한 이유는 무엇입니까?

많은 웹 사이트가 엄청난 이점이 있지만 빵 부스러크 내비게이션을 소홀히하거나 설계하는 이유는 무엇입니까? 주된 이유는 종종 오해에서 비롯된 것입니다. 또는 다른 것들을 더 중요하게 생각합니다

• 중요성이 내려다 보입니다. 어떤 사람들은 빵 부스러기가 불필요하게 또는 그것이 가능한 "장식"이라고 생각하는 작은 요소라고 생각합니다.
• 너무 많은 디자인을 강조하십시오 : 일부 디자이너는 디자인의 아름다움이나 단순성에 너무 집중할 수 있습니다. 빵 부스러기를 숨기거나 너무 작은 문자 사용과 같은 사용자를 안내하는 데 도움이되는 기본 기능을 무시할 때까지
• 웹 사이트 구조는 처음부터 명확하지 않습니다. 웹 사이트의 정보 아키텍처 (IA)가 처음부터 잘 계획되지 않은 경우. 구조를 복잡하게 만드는 것은 명확한 계층 구조를 만들지 않습니다. 효과적인 빵 부스러기를 만들기가 어렵습니다. SEO와 UX 가이를 이해할 수 에서 어떻게 더 많이 공부할 수 있습니까
• SEO 기술 무지 : 일부 웹 사이트 소유자 또는 개발자는 BreadCrump가 사용자에게만 유용하지 않다는 것을 알지 못할 수 있습니다. 또한 SEO에서 중요한 역할을합니다. 특히 Google은 Breadcrumb의 스키마 마크를
• 일관성이없는 웹 사이트 업데이트 : 때로는 새 페이지가 추가되거나 콘텐츠를 개선하지만 빵 부스러기 구조를 일관성있게 업데이트하지 않으면 빵 부스러기가 오류를 표시 할 수 있습니다. 또는 불완전합니다

이러한 원인은 사용자가 "잃어버린"문제로 이어지고 Google은 웹 사이트 구조를 이해하지 못합니다. 순위 및 전환 증가에 중요한 장애물입니다.

삽화를위한 프롬프트 : 웹 사이트 디자이너는 화면에서 작은 구성 요소 또는 복잡해 보이고 규정이없는 웹 사이트의 이미지 구조를보고 있습니다.

남은 경우 어떤 영향을 미칩니 까?

좋은 Breadcrumbs Navigation의 좋은 무지와 설치는 사용자 경험과 웹 사이트의 SEO 성능 측면에서 "고통스러운"결과로 이어질 수 있습니다. 무슨 일이 일어날 지 오랫동안 남아 있는지 봅시다.

• 채권 속도가 높습니다 : 사용자가 웹 사이트에 입장하고 원하는 것을 찾을 수없는 경우. 또는 계속할 방법을 찾을 수 없으며 웹 사이트를 빠르게 "눌러", 이탈률이 높아져 Google에게는 나쁜 신호입니다.
• 웹에서 사용자의 지속 시간 (거주 시간)이 줄어들 었습니다. 사용자가 웹 사이트에서 다른 콘텐츠를 편리하게 탐색 할 수 없으면 시간이 줄어 듭니다. Google 순위에 부정적인 영향을 미치고 다른 귀중한 콘텐츠를 발견 할 수있는 기회를 줄이는 데 부정적인 영향을 미칩니다.
• 전환율 감소 : 제품 구매, 양식 작성 또는 사용자가 대상 페이지를 원활하게 안내 할 수없는 경우 전환 가능성은 극적으로 감소합니다.
• SEO는해야 할 것만 큼 차단되지 않습니다. Google Bot은 웹 사이트의 계층 구조를 이해하는 데 문제가 있습니다. 구조가 명확하지 않으면 Google은 귀하보다 웹 사이트를 평가할 수 있습니다. 검색 순위에 영향을 미칩니다
• 잘못된 내부 링크 생성 : 좋은 빵 부스러기는 양질의 내부 링크를 만들 수있는 기회를 놓칠 수 있습니다.이 링크는 페이지 권한을 배포하고 Google을 Windows 발견하는 데 도움이됩니다. 귀하의 웹 사이트에서 더 쉽습니다
• UX (User Experience)가 열악합니다. 사용자는 좌절감을 느끼고 웹 사이트에 감동하지 않을 것입니다. 미래에 다시 사용하기 위해 돌아 오는 것을 생각하지 않으면 전혀 일어나고 싶지 않은 일입니다.

IR 웹 사이트의 UX 구조를 연구하는 데 처음부터 UX 설계에 대한 좋은 투자는 좋은 구조의 중요성을 보는 데 도움이 될 수 있습니다.

삽화를위한 프롬프트 : 물음표 및 검색 결과가 잘못된 컴퓨터 화면과 함께 증가하는 바운스 속도 그래프 및 전환율 감소를 보여주는 그래프.

해결책이 있습니까? 그리고 어디에서 시작해야합니까?

괜찮아요! Breadcrumbs Navigation의 이러한 문제를 해결하는 것은 어렵지 않습니다. 예상보다 더 가치있는 가치가 있습니다! 어디서부터 시작 해야하는지 봅시다. 그리고 어떤 기술

첫 번째 단계 : 웹 사이트 구조를 이해하십시오

빵 부스러기를 넣기 전에 웹 사이트 자체의 구조를 먼저 이해해야합니다. 어느 페이지가 어느 페이지에 있습니까? 예 : 홈> 카테고리> 제품 또는 메인 페이지> 서비스> 서브 서비스> 기사

Breadcrumps Navigation의 문제를 해결하기위한 기술

1. 명확한 빵 부스러기 디자인과 사용하기 쉬운 :
   • 위치 : 기본 콘텐츠 상단에 배치해야합니다. 메인 탐색 메뉴에서 또는 페이지의 H1에서 사용자가 쉽게 볼 수 있도록
   • 형식 : 화살표 또는 자국으로 텍스트 양식을 사용하십시오 ">"메인 페이지> 제품> T- 셔츠와 같은 얼굴을 분리하십시오.
   • 색상과 크기 : 읽기 쉬운 문자의 색상과 크기를 사용하십시오. 배경으로 삼키지 않지만 메인 콘텐츠의 관심을 끌기 위해 뛰어나지 않습니다.
2. Hierachy를 기반으로 한 빵 부스러기를 사용하십시오 (계층에 따라) :
   • 이것은 SEO의 가장 일반적이고 권장되는 양식으로, 홈> 카테고리> 하위 범주> 현재 페이지와 같은 실제 웹 사이트 구조에 따라 경로를 표시합니다.
   • 이를 통해 사용자와 Google은 웹 사이트의 계층 구조를 명확하게 이해할 수 있습니다.
3. 모든 페이지에 올바른 빵 부스러기가 있는지 확인하십시오.
   • 홈페이지 (홈페이지)를 제외하고 모든 페이지에는 빵 부스러기가 있어야합니다.
   • Breadcrumbs의 링크는 클릭 가능한 링크 여야하며 사용자를 올바른 대상으로 사용해야합니다.
4. 사용 Breadcrumblist 스키마 마크 업:
   • 이것은 "Seo", 가장 중요한 빵 부스러기입니다! 웹 사이트 코드로 구조화 된 Breadcrumblist (JSON-LD 형태)를 늘리면 Google이 웹 사이트 구조를 더 잘 이해하고 검색 결과 (Rich Snippet)에 빵 부스러기를 표시 할 수있어 링크를 클릭 할 수 있습니다.
   • Google Search Central과 같은 다양한 도구를 사용하여 스키마 마크 업이 올바른지 확인할 수 있습니다.
5. 모바일 친화적 인 만들기 :
   • 많은 사용자가 모바일을 통해 웹 사이트에 액세스한다는 것을 잊지 마십시오. 빵 부스러기가 작은 화면에 잘 표시되어 있는지 확인하십시오. 읽기가 어려워 질 때까지 너무 크거나 복잡하지 않습니다
   • 모바일에 계층이 너무 많으면 숨겨진 것을 고려하거나 JavaScript를 사용하여 메인 및 현재 기본 페이지 사이의 "..."를 단축 할 수 있습니다. 공간을 절약합니다
6. 내부 링크를 적절하게 묶습니다.
   • 빵 부스러기는 훌륭한 내부 링크 도구입니다. 페이지 권한을 배포하고 Google에 어떤 페이지가 어떤 페이지에 연결되어 있는지 알려줍니다.
   • 구조를 강화하기 위해 SEO에 중점을 둔 Mega 메뉴에 빵 부스러기를 연결하는 것을 고려하십시오. WebFlow SEO Friendly Mega 메뉴 에서 샘플을 볼 수 있습니다 .

"웹 사이트 설문 조사"에서 시작하는 것이 가장 중요한 요점입니다. 그 후,이 기술을 단계별로 조정하기 시작했습니다.

삽화를위한 프롬프트 : 명확한 웹 사이트 다이어그램에서 Breadcrumbs의 직소 퍼즐의 손 이미지. 구조를 나타냅니다

성공했던 실제의 예

Breadcrumbs Navigation이 실제로 실질적인 결과를 만들 수 있음을 명확하게 알기 위해. 전자 장치를 판매하는 "전자 상거래 웹 사이트"중 하나의 예를 공유하고 싶습니다. 사용자 및 전환율에 문제가있는

원래 문제 : 사용자는 혼란스럽고 Google은 이해하지 못합니다.

그들의 원래 웹 사이트에는 명확한 빵 부스러기가 없거나 정상적인 메시지 일뿐입니다. 사용자가 Google에서 직접 제품을 입력 할 때 클릭 할 수는 없으며,이 제품의 어떤 범주에 있는지 혼란스러워하거나 결과적으로 같은 범주의 다른 제품을 보러 돌아갑니다. 웹 사이트의. Google 자체는 기어 다니는 데 오랜 시간이 걸리는 것 같습니다. 그리고 일부 페이지는

방법 : 스키마 마크 업으로 BreadCrumps Navigation을 설치하십시오

팀은 새로운 내비게이션을 "정비"하기로 결정했습니다. 키 중 하나는 올바른 Breadcrumbs Navigation을 설치하는 것입니다. 그들은 다음과 같이 진행합니다.

• 웹 사이트 구조 분석 : 새로운 웹 사이트 계획 작성 명확한 계층 구조가 있는지 확인하십시오 (예 : 기본 페이지> 컴퓨터> 노트북> MacBook Pro)
• Clear Breadcrumbs Design : 빵 부스러기를 제품 상단과 페이지의 명확한 위치에 놓습니다. 글꼴 크기와 대조적 인 색상을 사용하십시오. 빵 부스러기의 모든 링크가 클릭 할 수 있습니다
• 스키마 마크 업이있는 파일럿 : 모든 기능에 빵 크럼 블리스트 스키마 마크 업 (JSON-LD)을 추가하십시오 Google에게 이것이 웹 사이트의 구조임을 분명히 알리는 빵 부스러기가 있습니다.
• 모바일 경험 향상 : 빵 부스러기가 모바일 사용에 방해가되지 않도록하십시오. 여전히 읽기 쉽고 클릭하기가 쉽습니다

결과 : 판매, SEO는 눈에 띄게 더 좋습니다!

단 몇 개월 동안 Breadcrumbs Navigation을 사용한 후 결과는 다음과 같습니다.

• 전환율이 15%증가했습니다. 사용자는 관련 제품과 범주를 쉽게 찾을 수 있습니다. 구매 결정을 더 빨리 만듭니다
• Bookce 비율은 8%감소했습니다. 사용자는 웹 사이트에서 더 오랫동안 소비되었습니다. 더 많은 창문을 탐색하십시오
• SEO 순위가 더 좋다 : Google의 검색 결과 (링크 이름 아래에 breadcrumbs를 표시)에서 많은 제품 페이지가 풍부한 스 니프로 나타나기 시작하여 링크가 더 흥미롭고 클릭 할 가능성이 높아졌습니다. 유기적 검색으로 인한 트래픽이 명확하게 증가했습니다.
• 카트 포기 율은 10%감소했습니다. 사용자는 제품을보다 쉽게 선택하는 과정을 여행합니다. 바구니를 버릴 기회를 줄입니다

이것은 Breadcrumbs가 단순한 "breadcrum"이 아니라 웹 사이트 효율성에서 강력한 "도구"라는 증거입니다.

삽화를위한 프롬프트 : 판매 그래프가 증가한 명확한 빵 부스러기와 풍부한 스 니펫을 보여주는 Google 검색 결과 아이콘이있는 전자 상거래 웹 사이트.

따르고 싶다면 어떻게해야합니까? (즉시 사용할 수 있음)

Breadcrumps Navigation으로 웹 사이트를 업그레이드 할 준비가되었습니다. 이것은 즉시 따라갈 수있는 간단한 점검 목록입니다.

1. 현재 웹 사이트 구조 평가 :
   • 간단한 웹 사이트 계획을 그립니다. 전체 계층 구조를보기 위해 (기본 페이지> 카테고리> 페이지/기사)
   • 어머니와 아이 앞의 메인 페이지인지 페이지를 지정하십시오.
2. 빵 부스러기의 위치를 선택하십시오.
   • 가장 좋은 위치는 "기본 콘텐츠의 상단"입니다 (H1 이상 또는 내비게이션 메뉴 아래)
   • 친숙한 사용자를위한 권장 관행에 따라
3. 설계 및 만든 빵 부스러기 :
   • 쉽게 사용하십시오 -이해 텍스트 : 빵 부스러기의 페이지 이름은 실제 이름과 동일한 이름이어야합니다.
   • 올바른 분리를 사용하십시오 : 예 : > 또는 /
   • 링크를 만드십시오. 클릭 : 현재 페이지를 제외한 빵 부스러기의 모든 부분. 어머니의 얼굴이나 메인 페이지로 다시 클릭 할 수있는 링크 여야합니다.
   • 스타일 조정 : CSS를 사용하여 크기, 색상 및 거리를 제어하여 깨끗하고 쉽게 읽을 수 있습니다. 주요 내용을 방해하지 마십시오
4. 설치하다 Breadcrumblist 스키마 마크 업 (JSON-LD):
   • 이것은 SEO에게 중요한 단계입니다.
   • WordPress와 같은 CMS를 사용하는 경우 스키마 마크 업을 자동으로 생성하는 데 도움이되는 플러그인 (예 : Yoast SEO)이있을 수 있습니다.
   • 웹 플로우 또는 사용자 정의 코드 인 경우 JSON-LD 코드를 넣어야합니다. 각 페이지의
   • 예제 코드 :
     {
"@context": "https://schema.org/",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "หน้าหลัก",
"item": "https://www.yourwebsite.com/"
},{
"@type": "ListItem",
"position": 2,
"name": "หมวดหมู่",
"item": "https://www.yourwebsite.com/category/"
},{
"@type": "ListItem",
"position": 3,
"name": "หน้าปัจจุบัน",
"item": "https://www.yourwebsite.com/category/current-page/"
}]
}
     
5. 테스트 및 개선 :
   • 데스크톱 및 모바일 테스트 : Breadcrumbs가 모든 장치에서 결과를 올바르게, 아름답고 아름답고 사용하기 쉬운 지 확인하십시오.
   • Google Rich 결과 테스트 사용 : 스키마 마크 업이 정확하고 Google을 읽을 수 있는지 확인하십시오.
   • 깨진 링크 확인 : 빵 부스러기의 링크가 깨지지 않았는지 확인하십시오.
6. 관련 내부 링크 :
   • 빵 부스러기를 사용하는 것 외에도 기사 컨텐츠에서 좋은 내부 링크를 만들면 SEO를 향상시키는 데 도움이됩니다. 예를 들어, 독자는 웹 사이트 구조의 일부인 친숙한 FAQ 페이지를 만드는 것에

이 점검표는 사용자와 Google과 함께 친절한 Breadcrumbs Navigation을 제공합니다! 그리고 UX/UI 전문가의 도움이 필요한 경우 복잡한 구조를 설계하거나 웹 사이트를 가장 효과적으로 만들기 위해 주저하지 마십시오. X Brain UX/UI 전문가에게 최상의 결과를

그림을위한 프롬프트 : 올바른 마크가 모두있는 체크리스트 이미지는 단계를 쉽게 나타냅니다.

사람들이 궁금해하는 경향이있는 질문과 정해진 답변

Breadcrumbs Navigation을 만드는 중요성과 방법에 대해 배운 후에도 많은 사람들이 여전히 몇 가지 질문이있을 수 있다고 생각합니다. 명확한 답변으로 인기있는 질문을 작성했습니다.

Q1 : 빵 부스러기, 모든 유형의 웹 사이트에 필요합니까?

A : 원칙적으로 "매우 필요하다", 특히 복잡한 구조가있는 웹 사이트의 경우 전자 상거래 웹 사이트, 뉴스 웹 사이트, 다양한 카테고리가있는 블로그 또는 콘텐츠가 많은 대형 웹 사이트와 같은 많은 하위 범주가 있습니다. 몇 페이지가있는 작은 웹 사이트의 경우 Breadcrumbs는 그리 많지 않을 수 있습니다. 하지만 항상 UX에 도움이되기 때문에 여전히 아무것도 아닌 것보다 낫습니다.

Q2 : 빵 부스러기를 사용하면 내부 링크가 "중복"으로 만들어집니다. 그리고 구글은 그 스팸을 생각할 것인가?

A : 전혀 아닙니다! Breadcrumbs는 Google이 이해하고 좋아하는 내부 링크 중 하나입니다. 손상된 방식으로 복제를 유발하지 않습니다. 그러나 Google은 Windows 간의 계층 구조와 관계를 이해하는 데 도움이됩니다. 또한 웹 사이트에서 Breadcrumblist Schema Markup을 이것이 사용자에게 올바른 유용한 내비게이션 구조임을 Google에 더욱 확인하는 것입니다.

Q3 : 웹 페이지에 빵 부스러기를 어디에 넣어야합니까?

A : 가장 적합한 위치는 "기본 콘텐츠의 상단"또는 "기본 탐색 메뉴 아래"입니다. 일반적으로 웹 사이트의 헤더 또는 내비게이션 바 아래에 있습니다. 사용자가 익숙한 위치이므로 웹 사이트의 위치를 이해하고 있기 때문입니다. 이 위치에있는 배치는 또한 Google 봇이 크롤링하고 이해하기 쉽도록 도와줍니다.

Q4 : 우리 웹 사이트에 여러 카테고리의 페이지 나 기사가 동시에있는 경우 빵 부스러기에는 어떻게해야합니까?

A : 이것은 일반적인 상황입니다. 가장 좋은 방법은 하나의 제품이 "셔츠"카테고리 및 "프로모션"에있는 경우 사용자와 비즈니스에 가장 합리적인 "하나의 주요 경로 만 선택"하는 것입니다. "셔츠"카테고리를 "셔츠"카테고리를 주요 제품 구조이기 때문에 "셔츠"카테고리를 선택하고 너무 복잡하지 않기 때문에 내부 링크를 사용하기 때문에 내부 링크를 사용합니다.

Q5 : WordPress와 같은 CMS에서 빵 부스러기를 쉽게 만들 수있는 도구 나 플러그가 있습니까?

A : 물론! WordPress의 경우 인기있는 SEO 플러그인 인 Yoast SEO 또는 Rank Math에는 빵 부스러기를 열고 쉽게 설정하고 스키마 마크 업을 자동으로 만들 수있는 기능이 있습니다. 웹 플로우 또는 사용자 정의 코드로 만든 웹 사이트의 경우 섹션에 코드를 작성하려면 추가 코드를 사용해야 할 수도 있습니다. "따라 가고 싶다면 어떻게해야합니까?"

그림을위한 프롬프트 : Google 로고 위에 떠있는 Q & A 버블 이미지 및 답변 수신과 같은 웃는 사용자 아이콘.

이해하기 쉬운 요약 + 노력하고 싶어

어떻게 지내세요? "Breadcrumbs Navigation : 사용자와 Google을 모두 돕는 Breadcrick"이야기와 함께. 이제이 작은 내비게이션이 어떻게 "전원"을 가지고 있는지 이해하기를 바랍니다!

Breadcrumbs는 사용자와 Google의 "진정한 친구"라는 것을 기억하기 쉽습니다.

• 사용자의 경우 : 웹 사이트에서 손실되지 않는 "생명지도"입니다. 당신이 어디에 있고 다음에 어디로 갈 수 있습니까? 경험 (UX)은 머물기를 원하고 사고 싶어 할 때까지 훌륭하게 만듭니다.
• Google의 경우 : Google Bot이 웹 사이트의 계층 구조를 이해하는 데 도움이되는 "Compass"입니다. SEO (Sanking)를 효과적으로 만들고 웹 사이트도 검색 결과에 풍부한 스 니펫을 표시 할 수있는 기회를 갖도록 도와줍니다!

Breadcrumbs의 올바른 설계 및 설치를 통한 투자는 단순히 "작은"개선 사항 일뿐 만 아니라 바운스 율 감소, 거주 시간 증가, 전환율 및 더 나은 SEO 등급과 같은 웹 사이트에 대한 많은 보상을 제공하는 "투자"입니다.

더 이상 기다리지 마세요!

나는 오늘부터 당신을 초대합니다. 돌아가서 웹 사이트를 탐색하여 빵 부스러기가 있는지 알아 보겠습니다. 당신이 있다면 충분히 잘 작동합니까? 아직 설치할 시간이 없다면 진지하게 설치할 시간이 없다면!

시작 :

1. 웹 구조를 이해하십시오.
2. 분명하고 빵 부스러기 디자인
3. 가장 중요한 것은 "Breadcrumblist Schema Markup을 넣는 것을 잊지 마십시오"라는 것입니다.

직접하는 것이 복잡하거나 전문가가 처음부터 끝까지주의를 기울여 강력한 구조와 인상적인 전환 의 웹 사이트를 무료로 상담하십시오. 의무가 없습니다! 우리는 웹 사이트를 "만들"하는 데 도움이되는 "파트너"가 될 준비가되었습니다. 사용자를 목표로 삼고 지속 가능한 성공을 위해 비즈니스를 이용하는 "Guide Bread Flakes"!

그림을위한 프롬프트 : Google 로고와 웃는 사용자 아이콘을 사용하여지도의 명확한 경로에서 빵 플레이크를 뿌린 핸드 이미지.

‍