[티스토리] 본문에 포함된 이미지 display:none 적용

티스토리 글 작성중에 대표 이미지를 등록하면, 검색엔진에서 썸네일이미지가 표시된다.

그런데 간혹 검색엔진에서 썸네일 이미지가 안나오는 경우가 있다.

검색을 해보니, 복불복이겠지만.. 

"문서 내부에 포함된 이미지가 아니면, 검색엔진 검색 결과에 썸네일이 표시되지 않는 경우가 있다."

 

그런데 썸네일에 사용할 이미지를 굳이 글내용에 보여주고 싶지 않은경우가 생겼다.

그래서 요리조리 방법을 찾다가 해결한 내용이 있어 공유코자 글을 남긴다.

 

우선 이미지를 에디터에 입력후 'HTML'모드로 변경한다.

이미지를 '가운데 정렬'로 했다면 아래처럼 내용에 'alignCenter' className이 보인다.

##_Image|kage@xEmt6/btqT7Ww30xA/KGcKEC9wjTNntlwVtcNvf1/img.png|alignCenter|data-origin-width="0" data-origin-height="0" data-ke-mobilestyle="widthContent"|||_##

실제 처리되는 HTML을 보면 저기 적혀있는 "alignCenter"가 <figure>객체에 클래스로 적용된다.

 

관리자의 스킨편집에서 자신만의 "display:none;" 스타일을 추가한다.

.cruxon_hidden {
	display:none;
}

 

이제 앞서 확인한 alignCenter className을 선언한 cruxon_hidden으로 변경한다.

저장해서 확인해보면, 글 내용에서는 보이지 않지만 썸네일 이미지와 검색엔진에서는 이미지가 잘 나온다.

 

참고로, 에디터화면에서는 표시된다.