SW/HTML

HTML : 검색 결과에 Breadcrumbs 얻는 방법 : 예제, 구현

얇은생각 2020. 8. 4. 20:00
반응형

HTML : 검색 결과에 Breadcrumbs 얻는 방법 : 예제, 구현

 

검색 엔진에서 순위가 양호하지만 검색 결과에서 발생하는 트래픽 양이 보이지 않으면 클릭률 개선에 대해 고려해야합니다. 클릭률을 높이기 위해 전통적으로 제목 태그를 개선하거나 메타 태그를 개선 할 수있는 몇 가지 방법이 있습니다.

최근 Google은 클릭률에 도움이되는 몇 가지 기능을 출시했습니다. 이제 Google 인증을 통해 콘텐츠를 Google+ 계정에 연결하여 Google+ 프로필 사진을 검색 결과에 배치 할 수 있습니다.

HTML을 변경하면 리치 스니펫이라는 기능을 추가하고 schema.org HTML에 배치 할 수 있으므로 검색 결과에 더 많은 정보를 배치 할 수 있습니다. Schema.org를 사용하면 다음과 같은 다양한 유형이 있는 페이지에서 정보를 정의 할 수 있습니다.

  • Movies
  • Books
  • Recipes
  • Video
  • Audio
  • Events
  • Organisation
  • Person
  • Place
  • Review

페이지를 정의 할 수 있는 더 많은 유형이 있으며 여기에 전체 목록이 있습니다. 전체 Schema.org 유형이 튜토리얼에서는 사람들이 검색하는 게시물뿐만 아니라 게시물 상위 페이지에 대한 클릭률을 향상시키는 schema.org 기능을 살펴 보겠습니다. 여기서 schema.org Breadcrumb 기능을 살펴보면 검색 결과에 부모 페이지를 표시 할 수 있습니다. 무언가를 검색 한 후 다음과 같은 범주 breadcrumb로 검색 결과를 본 적이 있을 수 잇습니다.

 

 

Breadcrumb

이동 경로는 웹 페이지 itemp type의 기능으로, 검색 엔진이 웹 페이지의 계층 구조를 이해할 수 있도록 여러 개의 링크를 정의 할 수 있습니다. 먼저 itemscope를 웹 페이지의 body 태그에 추가하는 것으로 시작한 다음 itemtype 속성을 사용하여 이를 웹 페이지로 정의해야합니다.

사이트 이동 경로 인페이지 영역을 정의하려면 div 또는 nav 요소를 사용하여 탐색 링크 주위에 HTML 요소를 작성한 다음 breadcrumb의 itemprop 속성을 추가해야합니다. 그런 다음 검색 엔진은 breadcrumb 속성 내에서 앵커 태그를 검색하고 이를 검색 엔진에 breadcrumb 링크로 배치합니다. 

 

<body itemscope itemtype="http://schema.org/WebPage">
...
<div itemprop="breadcrumb">
  <a href="category/books.html" itemprop="url">Books</a> >
  <a href="category/books-literature.html" itemprop="url">Literature & Fiction</a> >
  <a href="category/books-classics" itemprop="url">Classics</a>
</div>

 

이 코드가 HTML에 배치되면 Google에서 색인을 생성하고 검색 결과에 표시 할 때까지 기다려야합니다. 수행한 작업이 이동 경로 기능에 유효한지 확인하려면 Google 리치 스니펫 테스트 도구를 사용할 수 있습니다.

반응형