티스토리 신에디터의 썸네일 문제의 원인을 알아냈습니다.

 티스토리에 잔뼈가 굵은 분들이라면 새로운 글쓰기로 나온 신에디터 기능의 문제를 알 겁니다.

 바로 다음을 제외한 검색엔진에서 썸네일 반영이 안되고, 심지어 다음에서조차 썸네일이 업데이트 되는 데 시간이 걸립니다.

 

 여러 사람이 고객센터에 문의해봐도 문제가 없다는 답변만 오는 와중에 제가 원인을 찾아낸 것 같습니다.

 

찾아낸 계기

 

 구글에선 모바일 친화성 테스트를 제공합니다. 그런데 검사를 해보니 이상한 결과가 나왔습니다.

 구글로봇이 제 사진을 긁어가지 못했다는 결과가 나온겁니다.

 당황해서 살펴봤는데 곧 원인을 알아냈습니다.

 

 

 눈썰미가 있으신 분들이라면 차단된 이미지의 주소가 kakaocdn으로 시작된다는 걸 아셨을 겁니다.

 즉 kakaocdn이 문제였던거죠.

 느낌이 쌔해서 kakaocdn의 로봇정보를 확인했습니다.

 

 

 아니나다를까, 모든 로봇 크롤링을 금지해놨습니다.

 User-agent: * Disallow로 광역금지를 해놨네요.

 

 구체적인 문제

 

 티스토리를 하신 분들이라면 로봇의 개념은 아실 겁니다. 이 녀석이 접근을 해서 검색엔진에 결과를 반영하는데, 위와 같이 설정되어 있다면 당연히 로봇이 긁어갈 수 없습니다.

 심지어 이건 다음로봇까지도 긁어가지 못하는 원인이 됩니다. (그래도 후에 업데이트 되는 이유는 뒤에서 다루겠습니다.)

 

 

 신에디터로 이미지를 업로드하면 주소가 kakaocdn으로 시작합니다.

 반면 위의 사진을 보면 아시다시피 구에디터로 이미지를 업로드하면 주소가 daumcdn으로 시작합니다. 혹시나해서 daumcdn의 로봇 정보를 봤습니다.

 

 꽤나 심플하게 작성되어 있었는데, User-agent: * , Disallow: 입니다.

 모든로봇을 허용하고 거부하는 로봇은 없는 것이지요.

 결국 업로드 주소 차이가 썸네일 누락이라는 결과를 불러온 것입니다.

 

 신에디터와 구에디터의 차이?

 

 또 한가지 더 있습니다.

 kakaocdn이 모든 로봇을 차단하는데, 왜 다음에선 이후에라도 업데이트가 될까요?

 답은 srcset 태그 때문입니다.

 

 신에디터로 사진을 올리면 태그가 이렇게 됩니다.

 

<img src="kakaocdn" srcset="daumcdn">

 

 눈치 채셨나요? srcset에 daumcdn으로 시작하는 주소가 있기 때문입니다.

 그래서 국내 포탈사이트들은 크롤링을 할때 img src부터 색인하고서 이미지가 없다고 결론을 내립니다.

 반면 다음은 바로 반영하진 못해도 srcset을 후에 읽고 그 이미지를 달아줍니다.

 

 여기에 증거가 하나 더 있습니다.

 태그로 봐선 신에디터로 썼을 가능성이 높은 블로거의 글입니다.

 그런데 네이버에서 썸네일이 나오고 계셨습니다.

 

 원인을 알고보니 실소를 금할 수가 없었습니다.

 srcset과 src의 자리가 바껴서, daumcdn이 앞으로 나와 있어서 색인을 했던 겁니다.

<img srcset="daumcdn" src="kakaocdn">

 실제로 같은 블로거가 올린 글을 검색해보면 똑같은 사람이 썼는데도 순서에 따라 누락이 되느냐가 결정되었습니다.

 

 그래서 해결책은?

 

 신에디터를 쓰면서도 누락을 당하지 않을 방법을 찾으실 겁니다.

 해결책은 있습니다.

 신에디터로 이미지를 업데이트 한 후 html모드로 바꿔보면 이미지가 [##_Image|kage@라는 태그로 시작한다는 걸 알 수 있습니다.

 

 이런 부분들을 모두 바꿔서 daumcdn주소로 치환하고 본인이 직접 img src 태그로 바꿔놓는게 좋습니다.

 겸사겸사 seo를 위해 alt태그를 작성해도 좋고요.