구글 블로그스팟 원하는 사진으로 썸네일 만드는 HTML 코드 공유

구글 Blogger 블로그스팟의 대표 썸네일 사진은 그냥 첫 번째 사진으로 정해진다. 원하는 이미지로 지정하는 방법을 정리해보자. 불편한 것 같지만 하다보면 꼭 그렇지만은 않다.


대표 썸네일 사진 지정하는 방법

2장의 사진이 있다.

블로그스팟 2장의 사진이 있는 글쓰기 화면
블로그스팟 글 작성 화면

만약 글 작성 시 2장의 사진을 사용했다면, 아래처럼 첫 번째 사진이 대표 썸네일 사진으로 지정된다.

블로그스팟 첫 번째 사진이 대표로 설정된 화면
블로그스팟 첫 번째 사진이 대표로 설정된 화면

두 번째 사진을 대표 썸네일로 지정하고 싶다면, 다음의 코드를 글쓰기 HTML 편집 화면에서 제일 위에 붙여 넣는다.

HTML

<img src="https://이미지 주소 URL" style="display: none !important;" alt="포스팅 대표 이미지 설명" />
  

큰 따옴표 안 "https://이미지 주소 URL" 부분에 대표 썸네일 사진으로 지정하고자 하는 이미지의 주소를 삽입한다.

- 두 번째 사진 위에서 마우스 우측 버튼을 눌러 이미지 주소를 복사.

블로그스팟 HTML 글쓰기 모드에서 복사한 이미지 주소와 코드 입력 화면
블로그스팟 HTML 글쓰기 모드에서 복사한 이미지 주소와 코드 입력 화면

이렇게 했다면, 두 번째 사진이 대표 사진으로 지정된 걸 확인할 수 있다.

블로그스팟 두 번째 사진을 대표로 지정한 화면
블로그스팟 두 번째 사진을 대표로 지정한 화면


오늘의 한마디

설정에서 글 템플릿에 코드를 입력해 두고 사용하면, 귀찮음을 조금 줄일 수 있다.

※ 글 수정: 2025.12.28.

  • !important 추가: 테마의 다른설정 때문에 이미지가 갑자기 튀어나오는 것을 확실히 방지함.
  • alt 태그: 구글 이미지 검색 등에서 해당 이미지가 어떤 내용인지 파악하는 데 도움을 준다.

<img src="https://이미지 주소 URL" style="display: none !important;" alt="포스팅 대표 이미지 설명" />

댓글