티스토리 썸네일 이미지 본문에서 숨기는 2가지 방법
티스토리 블로그 운영 시 본문 상단에 표시되는 티스토리 썸네일 이미지가 레이아웃을 방해하는 경우가 발생합니다. 특히 광고 배치나 전체적인 디자인 통일성을 고려할 때, 티스토리 썸네일 이미지 본문에서 숨기는 방법이 필요합니다.
본 가이드에서는 신구 에디터 환경에서 티스토리 썸네일 이미지를 효과적으로 숨기는 두 가지 핵심 방법을 제시합니다. 이 방법들은 검색엔진 최적화에 영향을 주지 않으면서도 깔끔한 블로그 화면을 구성할 수 있도록 도와드립니다.
1. 구 에디터 환경에서의 티스토리 썸네일 이미지 본문 제어
1) HTML 모드를 활용한 숨김 처리
구 에디터에서 티스토리 썸네일 이미지를 숨기는 방법은 HTML 직접 편집을 통해 구현됩니다.
먼저 대표 이미지로 설정할 파일을 본문에 업로드합니다. 이후 글쓰기 인터페이스 우측의 HTML 모드로 전환하여 이미지 태그를 확인합니다.
해당 이미지 코드에서 기존 스타일 속성 뒤에 display:none; 속성을 추가합니다. 구체적인 코드 형태는 다음과 같습니다:
<p style="float:none; display:none;">[이미지 관련 코드]</p>2) 적용 후 확인 사항
HTML 편집 완료 후 일반 모드로 복귀하면 티스토리 썸네일 이미지가 본문에서 보이지 않게 됩니다. 그러나 대표 이미지로서의 기능은 그대로 유지되어 검색 결과나 소셜 미디어 공유 시에는 정상적으로 표시됩니다.
2. 신 에디터에서의 티스토리 썸네일 이미지 본문에서의 관리
1) HTML 보기 기능 활용
신 에디터 환경에서는 HTML 보기 기능을 통해 티스토리 썸네일 이미지 숨김 처리가 가능합니다.
대표 이미지를 본문에 삽입한 후, 편집기 상단의 ‘기본 모드’에서 ‘HTML 보기’로 전환합니다. 이미지 태그 내부의 data-filename 속성 뒤에 스타일 속성을 추가합니다.
<figure data-filename="thumbnail.jpg" style="display:none;">[이미지 관련 코드]</figure>2) 신 에디터 특화 고려사항
신 에디터의 경우 figure 태그를 기본으로 사용하므로, 해당 태그에 직접 스타일을 적용하는 방식이 가장 효과적입니다. 편집 완료 후 기본 모드로 복귀하면 티스토리 썸네일 이미지가 본문에서 제거된 상태로 표시됩니다.
3. 티스토리 썸네일 이미지 본문 숨김 처리의 SEO 영향
1) 검색엔진 최적화 관점
티스토리 썸네일 이미지 본문에서 숨기더라도 메타데이터 정보는 그대로 유지됩니다. 따라서 구글, 네이버 등 주요 검색엔진에서는 대표 이미지로 정상 인식하여 검색 결과에 표시합니다.
이는 티스토리가 대표 이미지와 본문 이미지를 별도로 관리하는 시스템을 채택하고 있기 때문입니다. 본문 내 display:none 처리는 시각적 표현에만 영향을 미치며, 구조화된 데이터나 메타 정보에는 변화를 주지 않습니다.
2) 소셜 미디어 공유 최적화
페이스북, 트위터 등 소셜 미디어 플랫폼에서의 링크 공유 시에도 티스토리 썸네일 이미지는 정상적으로 표시됩니다. 이는 오픈 그래프 프로토콜이 HTML 내 숨겨진 이미지가 아닌 메타 정보를 기준으로 작동하기 때문입니다.
4. 추가 최적화 방안
1) 이미지 파일 최적화
티스토리 썸네일 이미지의 파일 크기 최적화는 페이지 로딩 속도 향상에 도움이 됩니다. 권장되는 이미지 규격은 1200×630 픽셀이며, 파일 용량은 100KB 이하로 유지하는 것이 적절합니다.
2) 대체 텍스트 설정
접근성 향상을 위해 티스토리 썸네일 이미지에 적절한 alt 텍스트를 설정하는 것을 권장합니다. 이는 시각 장애인을 위한 스크린 리더 지원뿐만 아니라 검색엔진 최적화에도 긍정적 영향을 미칩니다.
결론
티스토리 썸네일 이미지 본문 숨김 처리는 간단한 CSS 속성 추가만으로 구현 가능합니다. 신구 에디터 모두에서 적용할 수 있으며, SEO나 소셜 미디어 최적화에 부정적 영향을 주지 않습니다.
블로그의 전체적인 레이아웃 개선과 사용자 경험 향상을 위해 필요에 따라 이 방법을 활용하시기 바랍니다. 특히 광고 배치나 콘텐츠 집중도를 높이고자 하는 경우 효과적인 해결책이 될 수 있습니다.
