탐색경로 문제 'itemListElement' 입력란 누락, 원인 구조화된 데이터

구글 서치콘솔 탐색경로 문제 "itemListElement 입력란이 누락되었습니다" 1편에 이어 2편으로 미흡하지만 조금 더 깊이 있는 내용을 다루어볼까 합니다.

단순한 원인과 문제 해결만을 원한다면 1편 내용으로 충분합니다. 아래 내용을 몰라도 되는 내용이니 그저 참고만 하시길 바랍니다.

1편 구글 서치콘솔 'itemListElement' 입력란 누락 원인과 해결방법

 

구글 서치콘솔 'itemListElement' 입력란 누락 원인과 해결방법

구글 서치콘솔 탐색경로 오류 'itemListElement' 입력란 누락 문제 원인이 무엇일까요? "itemlistelement" 오류 문제가 발생하면 빈 카테고리 문제라고 해서 카테고리만 생각하지만 정확하게는 빈 목록 페

wonderbout.tistory.com

구조화된 데이터
구조화된 데이터

구조화된 데이터 브레드크럼 요약

1편에서 말씀드린 것처럼 원인은 오직 "빈 목록 페이지" 때문입니다. 그러면 왜 빈 목록 페이지에서만 이러한 현상이 나타나는 것일까요?

티스토리에서는 구글 검색엔진을 위해 각 페이지에 맞는 구조화된 데이터를 제공하고 있습니다. 그중에서 "itemListElement" 입력란 누락 즉, 탐색경로 오류 문제를 일으키는 구조화된 데이터의 타입은 "BreadcrumbList"로 목록 페이지에만 설치돼 작동됩니다.

브레드크럼이라고 들어 보신 적 있으신가요? 탐색 경로를 알려주는 내비게이션이라고도 합니다. 웹사이트 중에서 현재 위치를 표시해주는 아래와 같은 형태를 본 적이 있을 것입니다.

브레드크럼

현재 보고 있는 글의 위치 즉, 어떤 카테고리에 속해있는 글인지 알려주는 역할을 하는 것이 브레드크럼입니다.

브레드크럼은 위처럼 간략하게 현재 위치만을 표시할 수도 있지만 좀 더 구체적인 정보를 담아 제공할 수도 있습니다.

예를 들어 티스토리에서 제공하고 있는 데이터에는 해당 경로 즉, 목록이 있는 페이지에 어떤 아이템들이 있는지 자세한 사항으로 각 글의 제목, 글의 주소, 해당 게시글의 목록 위치 등이 입력되어 있어 있습니다.

입력은 사람이 수동으로 하는 것이 아니라 서버 측에서 해당 목록 페이지를 분석해 자동으로 입력을 합니다.

아무것도 없는 목록 페이지일 경우 아무것도 없기 때문에 아무것도 입력되지 않아 오류가 발생하게 됩니다.

이 근본적인 문제를 해결하기 위해서는 티스토리 측에서 목록 페이지가 비어있는 경우 구조화된 데이터를 표시하지 않는 것이 가장 좋은 해결방법이지만 언제까지 기다릴 수는 없기 때문에 사용자가 빈 페이지를 만들지 않는 것도 중요합니다.

구조화된 데이터란

구글 웹마스터 가이드를 보면 "구조화된 데이터에 관한 Google의 권장사항을 준수합니다."라는 내용이 있습니다.

구글가이드

Google 검색은 페이지의 콘텐츠를 파악하기 위해 노력합니다. 페이지에 구조화된 데이터를 포함하면 Google에 페이지의 의미에 관한 확실한 단서를 제공하여 내용을 파악하는 데 도움이 됩니다. 구조화된 데이터는 페이지에 관한 정보를 제공하고 페이지 콘텐츠를 분류하기 위한 표준화된 형식으로, 예를 들어 레시피 페이지의 경우 재료, 조리 시간, 온도, 칼로리 등이 여기에 해당합니다.

사용자 화면에서는 보이지 않은 구조화된 데이터를 제공하는 것은 검색엔진에 조금 더 구체적인 정보를 담아 알려주어 검색 결과에 반영하기 위한 것으로 이해하시면 될 것 같습니다.

티스토리 목록 페이지 구조화된 데이터는 구글 검색 결과 아래와 같이 보이게 됩니다.

구글 검색결과 카테고리목록

주소 뒷부분을 보시면 경로가 표시되어 보입니다. 구조화된 데이터를 이용하면 보다 다양한 검색 결과를 만들어 낼 수 있습니다.

구글 가이드 구조화된 데이터 작동 방식 이해 을 보시면 조금 더 이해가 쉬울 것입니다.

구조화된 데이터 제출

구조화된 데이터를 표현하는 방식으로 구글에서는 자바스크립트 형식인 JSON-LD 방식으로 제공해 줄 것을 권장하고 있습니다.

구조화된 데이터

그럼 이 구조화된 데이터를 어떻게 제출할까요? 이 JSON-LD 데이터는 티스토리 서버 측에서 자동으로 생성 제공해 주고 있습니다.

브라우저에서 개발자 도구를 열어 html의 <head> 영역을 보면 <!-- BEGIN STRUCTURED_DATA--> 아래 <script type="application/ld+json"> 구조화된 데이터 코드를 확인해 볼 수 있습니다.

구조화된 데이터는 블로그 메인 페이지와 본문 페이지 그리고 카테고리 목록 등등에 표시가 되고 그 내용이 각각 다릅니다.

티스토리에서 제공해 주고 있는 구조화된 데이터 외에도 개별적으로도 만들어 스킨 헤드 부분에 넣어 적용할 수 있습니다.

제 블로그의 경우 별도의 구조화된 데이터를 설치해 구글 검색 결과 각 게시글에도 블로그 주소 뒤에 카테고리 명이 붙도록 했습니다.

구글 검색결과 게시글

차후에 화면에는 보이지 않는 브레드크럼 적용 방법에 대한 포스팅을 하도록 하겠습니다.

반응형