안녕하세요. 오렌지셔츠입니다. 최근에 제가 발행한 글들이 네이버와 다음 검색엔진에 썸네일 이미지가 누락이 되어서 며칠 간 궁금증을 가졌습니다. 현재는 해결을 한 상태 입니다. 제가 고민한 내용을 공유 드리겠습니다.

여러 블로그들을 왠만큼 다 따라 해봐도 잘 안되는 부분이 있었는데 그래도 명색에 프론트 개발자라서 이것저것 분석해보기 시작해서 이래저래 저만의 방법으로 찾아보았습니다.,

다음, 네이버 썸네일 이미지 누락

어느날 내 블로그의 글이 잘 검색되는지 테스트를 해보기로하고 찾아보기로 하였습니다. 그러나 이게 왠 일인가 블로그의 썸네일이 나오지 않고 있던 문제가 있었습니다. 이건 포스팅을 하는 것보다 더 중요한 문제 이었기에 글을 쓰지 않고 우선적으로 분석을 하기로 마음먹었습니다.

결론 팁 우선 공유

결론팁을 먼저 우선순위대로 말씀 말하자면

1. 티스토리 구 버전 에디터 사용하기

2. 대표 이미지 크기를 600px 정사각형으로 만들기

3. 이미지를 복사 붙여넣기가 아닌 파일 및 사진 업로드로 올리기없음

4. 대표 이미지 상단에 설정하기(가급적이면 파일명을 숫자 0 혹은 1로) png, jpg 상관

5. 서치어드바이저 등록하기

1. 티스토리 구 버전 에디터 사용하기

다른 블로그를 아무리 찾아봐도 왜 구 버전을 사용해야 하는지 이유가 나오지 않았습니다. 그래서 구버전 에디터와 신버전 에디터에 대해서 나름 스스로 이미지에 대해 찾아보았습니다. (신버전 맞춤범 검사해주는게 좋았는데..)

일단 구버전과 신버전의 작성 완료후 가장 큰 차이는 이미지를 저장하는 CDN의 주소가 다르게 설정 되어 있었습니다. 다음이 카카오랑 합병이 되면서 URL 체계가 많이 변경된 것이 가장 큰 원인이며 네이버의 크롤러가 카카오의 새로운 CDN 주소를 수집하지 않는 것이 가장 큰 이유로 추측 됩니다.

CDN 이란 Content Delivery Network 의 약자이며 글로벌로 플랫폼을 운영하기 위해서 인프라구축의 핵심 중의 하나 입니다. 이미지 파일을 가까운 지역에 두어서 캐싱해서 쓰기 때문에 이미지 로딩이 빨라지는 효과가 있습니다.

구버전 에디터 URL 주소	https://t1.daumcdn.net
신버전 에디터 URL 주소	https://k.kakaocdn.net

아래의 이미지는 구버전 에디터의 이미지 주소 입니다.

아래의 이미지는 신버전 에디터의 이미지 주소입니다.

확연히 다른 것을 알 수가 있습니다. 신버전 에디터를 이용하면 다음 검색엔진 시에 바로바로 적용이 되지만 구버전 에디터를 사용할 경우에는 블로그 탭에는 바로 적용이 되지만 통합검색의 탭에는 약 30~1시간 정도의 시간이 걸리는 것을 알 수 있었습니다. 또한 제가 원하는 이미지로 썸네일이 출력 되는 것도 확인 할 수 있었습니다.

	신버전 에디터	구버전 에디터
네이버 검색엔진	썸네일 X	썸네일 O
다음 검색엔진	바로 적용	통합검색은 약 1시간 후 적용 블로그 탭은 바로 적용

여튼 결론을 말씀드리자면 신버전 에디터를 사용하면서 네이버에 썸네일이 노출되는 티스토리는 아직 단 한 건도 본 적이 없습니다. 만약에 찾으시면 댓글 부탁드립니다.

네이버에 썸네일이 노출되는 티스토리는 전부 구버전에디터 이었으며 썸네일 주소가(t1.daumcdn.net)으로 시작합니다.

대표 이미지 크기를 600px 정사각형으로 만들기

이미지 크기에 대해서도 여러 번 테스트를 해봤습니다. 대표 이미지로 설정을 한다 하더라도 실제 검색엔진에서는 대표이미지가 썸네일로 안되는 경우가 많았습니다. 왜 그런지 나름 저만의 이유를 찾아보니 이미지 크기에 대한 우선순위가 있었습니다. 우선순위는 아래와 같습니다.

이미지가 크면 클수록 좋지만 에디터 본문 크기의 사이즈 이상(약 800 ~ 1000px)을 넘어가서는 안됩니다. 저는 250px * 250px 의 크기, 400px * 400px 의 크기 600px * 600px 크기를 전부사용하면서 테스트를 해보았었습니다.

대표 이미지를 400px * 400px로 설정하고 본문 가장 최하단에 약 700px * 690px 정도의 이미지가 있었는데 우선순위가 대표 이미지가 썸네일이 나오는게 아니라 700px * 690px 이미지가 썸네일로 되는 현상을 발견 하였습니다.

그리고 나서 700 * 690px 파일을 변경하고 대표 이미지를 600px * 600px로 최상단에 0.png 파일명으로 저장해서 다시 글을 발행하니 제가 원하는 대표이미지가 썸네일이 되었습니다. 네이버에는 현재 크롤러가 수집하기를 기다리고 있는 상태 입니다.

정사각형각형 비율이 우선순위로 적용이 되며 그 다음은 이미지 비율입니다.

1. 정사각형으로 만들기

2. 이미지 크기 설정 600px > 400px > 250px

대표 이미지를 파일 업로드로 올리기

해당 부분은 카카오의 안내 페이지에서 상세하게 설명해주고 있습니다. 파일로 첨부하지 않고 복사해온 이미지나 HTML 코드(base64)로 만든 이미지의 경우에는 목록에 표시 되지 않는다고 하네요.

대표 이미지를 상단에 설정하고 대표 체크 하기

대표이미지를 설정하지 않으면 티스토리 알고리즘이 알아서 설정을 하는 것 같습니다. 대표 이미지를 체크해줘서 검색엔진엔 안뜨더라도 목록에는 보이게 만들어 주는게 중요합니다.

구버전 에디터(좌) 신버전 에디터(우)

서치어드바이저 웹 마스터 도구 등록하기

이 부분은 네이버에 티스토리를 알리기 위한 요청 작업 입니다. 보통은 네이버의 robots 이 주기적으로 알아서 수집을 해갑니다. 중요 포스팅의 같은 경우에만 말이죠. 하지만 저희는 모든 글들을 발행하고 알리고 싶으니 수동으로라도 등록 해줘야 합니다.

일단 전 이렇게 계속 앞으로 설정을 할 계획 입니다. 그리고 이 방법이 100%라는 보장은 해주지 않습니다. 제가 몇일 간 고민해온 끝에 일시적으로 내린 결론이며 카카오나 네이버에서 수집 알고리즘을 바꾸거나 kakaocdn 네트워크를 허용해주면 자동으로 신버전 에디터에서도 썸네일을 보여줄 수 있을 것 같습니다.

당분간은 구버전으로 계속 에디터를 사용해 볼 예정이 중간에 조금씩 신버전 에디터도 같이 사용해서 테스트를 계속 해보아야겠습니다

실험 결과 보러가기

2020/05/01 - [알면 좋은 것/티스토리&애드센스] - 티스토리 다음,네이버 썸네일 노출 실험 결과(100%)

2020/04/30 - [알면 좋은 것/티스토리&애드센스] - 티스토리 네이버 애널리틱스 연동 추가하기

2020/04/30 - [알면 좋은 것/티스토리&애드센스] - 티스토리 구글 애널리틱스 설정 적용 연동 추가하기

2020/04/26 - [알면 좋은 것/티스토리&애드센스] - 티스토리 블로그 최적화(SEO) 네이버 웹 마스터도구 사용하기(1)

2020/04/26 - [알면 좋은 것/티스토리&애드센스] - 티스토리 블로그 최적화(SEO) 네이버 웹 마스터도구 사용하기(2)

2020/04/27 - [알면 좋은 것/티스토리&애드센스] - 티스토리 블로그 최적화(SEO) 구글 서치콘솔(rss, 사이트맵) 사용하기