본문 바로가기
  • Life in Australia

Breadcrumbs issues 블로그 초보의 브레드크럼 문제 해결하기

by thegrace 2020. 7. 28.

※ 이 글을 보시는 분들께:

저는 코드에 대해서 전혀 모르기 때문에 다른 블로거님들의 글을 통해 도움을 받았습니다. 제가 어떻게 브레드 크럼 문제를 해결했는지에 대한 과정을 자세히 기록하였습니다. 훗날, 까맣게 잊여 버릴 제 자신을 위해서입니다. 그리고 저와 같은 완전 초보님들이 고생하시지 않게 제 경험을 바탕으로 좀 더 부연 설명들을 넣었습니다. 아래에 제가 도움을 받았던 블로거님들의 링크도 있습니다. 절 도와주신 분들께 다시 한번 감사드립니다.

 

Key point

1. 브레드크럼 문제점에 대해서 이해하기 (itemListElement 누락)

2. 브레드크럼 코드 적용하기

3. css 코드 적용하기

4. 문제는 해결되었지만, 왜 아직 사이트 검색에서는 변화가 나타나지 않는 걸까?

5. 도와주신 블로거님들(Avada, 검소한 Charlie 253, 와칸)

 


사건 발생과 문제점 해결 요약


두 번째의 구글 애드센스 광고 게재 제한을 받기 약 3일 전, 제 이메일에 반갑지 않은 소식이 하나 전달되었습니다. 뭔지는 몰라도 문제(issues)가 생겼다는 것은 그만큼 신경을 쓰고 시간을 들여 해결을 해야 하기 때문에 꽤 귀찮은 일입니다. 이메일에는 아래와 같은 글이 있었습니다.

 

구글 서치 콘솔에 브레드 크럼(Breadcrumbs) 문제가 있다는 내용과 Top Errors라는 단어가 눈에 띄었습니다. 

 

"Errors can prevent your page or feature from appearing in Search results."

☞ 오류로 인해 페이지나 기능이 검색 결과에 나타나지 않을 수 있답니다. 

 

"The follwing errors were found on your site:

Missing filed "itemListElement"

☞ 제 사이트에 발생한 오류는: "itemListElement" 부분이 누락이 되어있답니다.

 

구글 검색에서 최상의 서비스를 제공할 수 있도록 오류를 고치라는 내용이었습니다. 그리고 고친 후의 모습은 아래의 사진과 같습니다.

브레드크럼 적용 후(문제 해결)


첫 번째, 용어에 대해서 이해하기

브레드크럼(Breadcrumbs)과 itemListElement


그렇다면, "itemListElement"는 무엇일까요? 한국말로 그대로 옮기자면 '아이템 리스트 요소'인데, 이게 누락이 되었다는 것은, 제가 여기저기 뒤져본 결과 카테고리와 연관이 있을 수 있다는 뜻으로 대략 이해를 했습니다. 로봇이 제 글을 서치 해서 찾아 들어오려면 어떤 길을 만들어 줘야 하는데, 그게 문제가 있다는 말인 거 같았습니다.

 

구글 서치 콘솔에 보니, 특정 카테고리가 들어있는 url주소가 문제가 있다고 빨간색 표시가 있었습니다. 문제가 있다는 카테고리 목록은 현재 존재하지도 않는 주소였습니다. 과거에 잠시 사용한 카테고리였지만, 지금은 변경했기 때문에 사용하지 않는 것이었습니다. 한참 지난 후에 왜 이게 갑자기 뜬것인지 모르겠지만, 일단 일시적 삭제를 시키고 변화를 지켜보면서 해결방안을 모색해 보았습니다. 그 url주소를 지운다고 해서 문제가 완전히 사라지는 게 아니라는 여러 경우들도 보게 되었습니다.

 

하지만, 프로그램이나 용어들에 대해서는 무지인 저에게는 뭘, 어떻게 하라는 건지 전혀 짐작조차도 할 수가 없었죠. 일단은 브레드 크럼(Breadcrumbs)이 뭔지에 대해서 찾아보았습니다. 

 

브레드 크럼은 특정 코드의 이름입니다. 제 블로그의 페이지나 기능이 검색 결과에 잘 나타날 수 있도록 도와주는 코드랍니다. '빵부스러기'라는 이 코드의 이름은, 빵부스러기를 떨어트려 자신들이 집을 찾아갈 수 있게 했다는 헨젤과 그레텔 동화에서 따왔다고 합니다. 일종의 '추적 경로'를 만들어 주는 것입니다. 갑자기 왜 이게 문제가 됐다고 연락이 온 건지는 모르겠지만, 아마도 블로그의 최적화를 위해 해 두면 좋을 기능을 미리 설치하지 않았기 때문인 거 같습니다. 무료인 스킨을 쓰고 있기에 아무래도 기능면에서는 떨어지겠죠. 그렇다면 제가 직접 적절한 코드를 넣어 업그레이드를 시켜줘야 하는데, 그건 저에게는 불가능한 일이기에 그냥 방치한 탓에 이러한 일이 발생한 거 같습니다. 

 

아무튼, 저의 시련은 여기부터 시작입니다. 분명 어떤 마음 착하신 프로 블로거님들이 이 부분에 대한 해결방법을 올리셨을 거라 믿고 폭풍 검색에 들어갔습니다. Top Issue는 내버려 두면 안 되니까요. 브레드크럼 코드 적용은 HTML뿐만이 아니라,  css에도 맞는 코드를 적용시켜야 완성이 됩니다. 브레드크럼 코드를 적용하는 방법 설명 뒤에는 css 코드를 적용하는 방법도 있으니 인내심을 가지고 읽어 보십시오.


두 번째, 브레드 크럼 코드를 입력하기

(북클럽 스킨에 적용하기)


※ 저는 코드를 모르기때문에 Avada님이 올려 놓으신 코드를 저에 맞게 몇 가지만 수정하여 사용을 했습니다. 그것에 관한 출처는 아래에 자세히 안내되어 있습니다. 제 설명이 부족하다면, 그 블로그를 이용하시기 바랍니다. 그리고 Avada님의 허락을 받고 이 글을 올린것을 알려드립니다. 무단 복제는 범죄입니다. 찌릿!(날카롭게 째려보는 이모티콘)

 

1. 브레드크럼 코드 만들기 (출처: Avada님의 블로그에서 따온 코드입니다.)

 브레드크럼 코드

▼바로 아래에 첨부한 브레드크럼 코드를 다운로드하여 사용하세요.

브레드크럼 코드.docx
0.01MB

설명: 위 사진의 연두색으로 표시한 세 군데에는 본인의 블로그 주소(url)를 입력하시면 됩니다. 첨부해 드린 브레드크럼 코드를 보시면, 그 위치에 제 주소가 보이실 겁니다. 그곳에 본인의 주소를 넣으세요. 참고로, https://가 아닙니다. http://입니다. 저는 처음에 제 블로그 주소를 복사해다 그대로 넣었었고, 나중에야 이 차이를 발견하고는 다시 수정을 했습니다. 

 

참고: HTTP(hypertext transfer protocol), HTTPS(hypertext transfer protocol secure socket)

http는 보안에 취약하지만 우리가 티스토리 블로그에서 쓰는 https에 비해 빠르다고 합니다. https는 열람 수정이 불가능해서 보안상 더 안전하다고 하고요. 제가 아는 것은 이 정도뿐입니다. 왜 브레드크럼에 http를 입력하는지에 대한 정확한 이유는 모릅니다. 혹시 아시는 분이 있으면 댓글로 남겨주시면 감사하겠습니다.


2. 브레드크럼 코드를 내 블로그에 적용하기

 

본인 블로그의 스킨 편집으로 들어가 HTML을 오픈하세요. 수정하신 브레드크럼 코드를 입력하시면 되는데, 스킨마다 적용 방식에 차이가 있습니다. 저는 북클럽 스킨을 사용하고 있어서 제 스킨에 맞는 적용 방식을 소개하겠습니다. 매거진 스킨과 #1 스킨에 대한 적용 법Avada님의 블로그로 가시면 있습니다.

 

적용방법은 두 가지가 있습니다. 어디에 적용하느냐에 따라 브레드크럼이 나타나는 위치가 제목 위에 있거나 아래로 가게 됩니다. 저는 여러 번의 실험을 통해서 이해를 하게 되었고, 제가 놓고 싶은 위치에 적용하였습니다. 두 방법을 다 알려드릴 테니 원하시는 곳에 넣으세요. 저는 이 작업을 하다가 새로고침을 누르는 반복적인 과정에서 광고를 실수로 눌러 두 번째 가출(구글 애드센스 광고 게재 제한)을 한 게 아닌가 생각합니다. 단지 추측일 뿐, 두 번째 광고 게재 제한의 원인에 대해서는 정확한 이유는 모릅니다. 

 

▶먼저, control+F키를 누르면 노란색 검색창이 뜹니다. 제 MacAir는 command+F를 눌러야 합니다. 그곳에  <span class=“category”>................</span> 를 입력하여 위치를 찾습니다. 대략, 400행~450행 사이에 있을 겁니다. 

 

정확하게는 아래와 같은 코드를 찾으시면 됩니다. 

 

▷방법 A:

빨간색 네모안 코드 위에 적용하기

빨간색 네모 안의 코드 바로 위에 적용한 경우는 브레드크럼이 제목(title) 위에 나타납니다.

 

 

방법 B:

빨간색 네모안 코드 아래에 적용하기

빨간색 네모 안의 코드 바로 아래에 적용한 경우는 브레드크럼이 제목 아래에 나타납니다.


방법 A와 B 중에서 원하시는 위치에 넣으시면 되는데, 여기서 중요한 것은 <span class=“category”>................</span>를 없애버리시고 적용 버튼을 누르세요. 검소한 Charlie 253님의 설명에 따르면, 북클럽 스킨에서는 원래 있던 이 코드를 없애야 한다고 했습니다. 이걸 제거하지 않으면 끔찍한 현장을 목격하실 겁니다. 광고가 제목의 위치에 오거나, 목차 번호가 떡 하니 글 제목에 오거나... 아무튼 이상해 집니다.

 

▲ 위의 사진을 보시면, 브레드크럼 코드 적용 위치와, 없앴던 <span class=“category”>................</span> 위치가 어디인지 정확하게 보입니다. 빨간색 네모칸이 없애버린 코드의 원래 자리였습니다.

 

※ 이렇게 적용이 끝나셨다면 블로그 화면을 한번 점검해 보세요. 뭔가 완전하지 못한 모습이 보이실 겁니다. css코드까지 입력해야만 완성이 된답니다.


세 번째, CSS 코드 입력하기


1. css 코드 만들기 (출처: 이것도 역시 Avada님의 블로그에서 코드를 따왔습니다.)

css 코드

▼바로 아래에 첨부한 css 코드를 다운로드하여 사용하세요.

css 코드.docx
0.01MB

설명: 위 사진에서 보이는 연두색 부분들은 컬러 코드가 들어갈 위치입니다. 다운로드하신 css 코드에서 제가 연두색으로 표시한 부분을 찾아 원하시는 컬러 코드를 넣으세요.

 

컬러코드는 아래 링크를 참조했습니다. 

https://html-color-codes.info/Korean/

 

HTML 컬러 코드

HTML 컬러 차트 사각형 모양의 컬러버튼을 클릭하여 HTML 컬러 코드를 찾으세요. HTML 컬러 코드 이론 "이 이상한 기호와 숫자와의 조합이 어떤 의미가 있을까?" 하고 궁금하신가요. 그 답은 "예" 입��

html-color-codes.info

중요: 기본적인 css코드가 완성이 되셨다면, 그 아래에, 브레드크럼의 좌, 우, 가운데 위치를 결정짓는 코드를 더 첨가하셔서 위치를 잘 잡아주십시오. 저는 코드 응용을 못하기 때문에 처음에는 위와 같은 css 코드의 컬러코드만 수정하여 적용을 시켰더니, 브레드 크럼의 위치가 너무 이상했습니다. 완전히 왼쪽 끝으로 밀착이 되더군요. 나중에 Avada님의 도움으로 제가 원하는 위치를 잘 잡을 수 있는 코드를 완성할 수 있었습니다.

 

아래에 두 가지 다른 방법을 알려드릴 테니 원하시는 걸 선택하셔서 해 보세요. 이 추가 코드는, 방금 전 만들어 놓으신 css코드 바로 아래에 적용을 하시면 됩니다. Avada님이 주신 코드입니다.

 

▷추가 코드 A: 이 코드는 현재 제 블로그에 나타나는 브레드크럼의 위치를 잡아 주었습니다. 글 제목과 제 아이디가 있는 위치에 브레드크럼도 자리를 잡았답니다.

css 추가코드(현재 위치).docx
0.01MB

 

▷추가 코드 B: 이 코드는 브레드크럼이 가운데로 온답니다. 제 글의 제목의 위치가 왼쪽에 치우쳐져 있는데, 이 코드로 인해 브레드크럼이 가운데로 자리를 잡게 되니까 뭔가 균형이 맞지 않아 보였습니다. 그래서 저는 위의 A 방법을 사용했지만, 브레드크럼이 가운데로 오기를 원하시는 분들은 이것을 사용하십시오.

css에 넣을 추가 코드(가운데).docx
0.01MB


2. css 코드를 적용하기

 

다 만드셨다면, 스킨 편집의 HTML옆에 있는 CSS로 들어가세요. 제일 끝으로 내려가서 위에 만드신 코드를 입력하시고 적용 버튼을 누르시면 끝입니다. 이건 위치를 찾을 필요 없이 간단하죠? 제 css에 적용된 코드입니다. 참고하세요.


※ Original 출처: Avada https://avada.tistory.com/1301

※ 참고한 블로그: 검소한 Charlie 253 https://tog2001.tistory.com/67

 

처음에 검색에서 찾아들어간 검소한 Charlie 253님의 블로그에서 기본적인 것을 이해하게 되었고, 좀 더 정확한 적용을 위해 검색하다 Avada님의 블로그를 알게 되었습니다. 특히 Avada님은 제가 질문을 드렸더니, 정말 상세하게 설명을 해 주셔서 문제 해결을 하는데 많은 도움을 받았답니다. 댓글을 보면 제가 얼마나 이분을 귀찮게 했는지 보실 수 있을 겁니다. 

 

검소한 Charlie 253님의 블로그에는 북클럽 스킨에 적용하는 방법이, Avada님의 블로그에는 매거진 스킨, 북클럽 스킨, #1 스킨에 적용하는 방법이 각각 설명이 되어있습니다.

 

저 같은 경우에는, 검소한 Charlie 253님에게서 기본적 아이디어를 얻었고, Avada님의 설명과 도움으로 보안을 하며 완성할 수 있었습니다. 제 경험을 참고하시고, 자신에게 맞는 설명을 찾아 잘 따라 하시길 바랍니다. 


브레드크럼 문제 해결했습니다.


그리고 며칠 뒤, 브레드크럼 문제가 해결이 되었다는 이메일을 받았습니다.

Breadcrumbs issues successfully fixed for.....

구글 서치 콘솔에서도 문제가 깨끗이 사라졌습니다. 

 


However,

아직 끝나지 않은 미스터리가 있었습니다. 검소한 Charlie 253님의 말씀에 따르면 이 과정이 모두 끝난 후,  구글에서 site:https://thegrace20.tistory.com을 검색해보면, 제 글로 안내되는 브레드크럼의 흔적을 볼 수 있다고 했는데, 저는 아무런 변화가 없었습니다. 그래도 문제는 해결이 됐으니 안심은 되었지만, 이 부분은 여전히 알 수가 없었답니다.

 

그런데, 우연히 찾아 들어간 와칸님 https://wonderbout.tistory.com/에게 질문을 했더니, 답변을 남겨주셨습니다. 이 분은 제 블로그 생활 초반에도 저를 도와준 적이 있었던 블로거이십니다. 

와칸님의 댓글

어때요? 저는 드디어 후련함을 느낍니다. 궁금했던 점이 풀리니 마음이 놓이네요. 이제는 그냥 기다리면 되는 거 같습니다. 혹시 제가 잘못 이해를 하고 있거나 틀린 점이 있다면 꼭 지적해 주십시오. 이렇게 도와주시는 분들이 있기에 간단하지 않은 블로그 운영을 해 나갈 수 있는 거 같습니다. 다시 한번 감사드립니다. 꾸벅!

 

댓글56