구글 블로그 스팟 썸네일 이미지를 내 마음대로 넣어보자

한국의 블로그만 하던 사람이 구글 블로그를 접하면 당황스러운 것이 기능이 너무 없다는 것이다. 그중 한 가지가 썸네일 이미지를 내 맘대로 지정할 수 없다는 것. 그래서 이번엔 썸네일 이미지에 대해 몇자 적어본다. 


1. 구글 블로그가 인식하는 썸네일용 이미지

구글 블로그는 무조건 첫 번째에 나온 이미지를 썸네일용 이미지로 인식을한다. 그리고 썸네일용 이미지로 인식했다고 해도 그게 항시 고정이 아니라 포스팅을 올리고 나서 나중에 맨 위에 (기존의 첫번째 이미지 위로) 이미지를 넣으면, 다시 그 첫 번째 이미지를 썸네일 이미지로 인식을 한다.

구체적인 내용은 모르겠지만 게시물 목록을 로딩할때 첫번째 이미지를 보고 썸네일 이미지가 없으면, 썸네일 이미지를 생성하고, 썸네일 이미지랑, 첫번째 이미지가 다른경우 새로운 첫번째 이미지로 썸네일 이미지를 재 생성해서 저장 하는것 같다.


2. 구글 블로그가 이미지를 저장하는 방식

구글 블로그에 이미지를 삽입하면 이미지는 https://blogger.googleusercontent.com/ 의 주소로 올라가는데, 우리가 알 수 없는 코드 뒤에 이미지의 크기를 접미어로 붙여서 저장을 한다.

아마도 첫 번째 이미지가 바뀌었는지의 판단은 파일 이름이 아닐까 싶다. 필자도 잘 아는것은 아니지만 뜯어보니 썸네일로 만들어진 이미지 파일이름 뒤에 "w385-h253-p-k-no-nu" 이런 접미사가 붙어 있는 것을 확인했다.

딱 봐도 385x253 픽셀이 구글 블로그가 저장하는 썸네일 이미지 크기이다. 물론 스킨에 따라 보여지는 썸네일 이미지 크기는 다를 수 있다. 아무튼 이 크기는 잘 기억해 두자

이것은 스킨마다 필요한 크기로 저장한다. 접미사도 해당 이미지 크기로 저장한다

(23.08.27 수정)


3. 썸네일용 이미지 넣기

구글 블로그는 편집기를 두가지를 제공한다. 글 쓰기에 들어가면 좌측상단 맨 왼쪽 아이콘을 눌러보자 보통 "새글 작성 보기" 모드를 사용할 것이다. 여기서 시작하면 된다.

새글 작성 보기와 HTML보기
구글 블로그의 2가지 편집기 (HTML보기와 새글 작성 보기)


글을 대충 몇 줄 넣어주고 미리 만들어 놓은 썸네일 이미지를 넣어보자. 여기서 중요한게 썸네일 이미지 크기는 위에서 봤던 385x253픽셀로 만들어 주자 어차피 썸네일용으로만 쓸 것이기 때문에 쓸데없이 크게 만들 필요가 없다.

썸네일용 이미지 밑에 본문을 작성해 나가면 된다.


4. 코드 수정

글이 작성이 다 되었다면, 게시하기 전에 편집기를 html 보기로 바꾸자 바꾸면 모든 문장이 띄어쓰기도 없이 다 뭉쳐 있는 것을 볼 수 있다. html을 잘 모르는 분은 막막할 수 도 있다.

구글 블로그는 이미지를 삽입하면 몇 가지 코드를 자동으로 생성한다. 아래와 같은 코드를 생성하는데, 물론 친절하게 저렇게 줄을 바꿔서 넣어주지는 않고 한 줄로 이어서 생성한다.

1
2
3
4
5
<div class="separator" style="clear: both; text-align: center;">
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTInw_tUOh_THjA0CgsKBohmlQ-cjTphFqiBZ8fH5v-ocIeFRmPVlBcZGFhqPS_ZkSAvk_ufeJfwQXq16O7NdqWzkoMEXwqYUqtxcn6yIegGhZT-MIYL5eT0H28LkmG1TmZux9aaX2zNkuS59I9yxtigsLTsGg7oEIUT-il4Hc1lugR4VZFVlkJdrlm46X/s350/thum_img_14.jpg" style="margin-left: 1em; margin-right: 1em;">
  <img border="0" data-original-height="230" data-original-width="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTInw_tUOh_THjA0CgsKBohmlQ-cjTphFqiBZ8fH5v-ocIeFRmPVlBcZGFhqPS_ZkSAvk_ufeJfwQXq16O7NdqWzkoMEXwqYUqtxcn6yIegGhZT-MIYL5eT0H28LkmG1TmZux9aaX2zNkuS59I9yxtigsLTsGg7oEIUT-il4Hc1lugR4VZFVlkJdrlm46X/s16000/thum_img_14.jpg" />
 </a>
</div>
cs


여기서 우리가 지울것은 <div ------------> 부분을 전부 지우고 세트인 </div>지우고, <a --------->와 세트인</a>를 지운다. 

즉 3행에 해당하는 <img --------->만 남겨두고  다 지우면 된다.

그리고 <img 태그에서도 불필요한 부분이 있는데 border="0" data-original-height="230" data-original-width="350" 이라고 된 것도 다 지우자 불필요 하지만 안지워도 상관없다(23.08.27 수정)

그러면 순수하게 <img>태그 안에는 src=" 로 시작하는 이미지 주소만 남았을 것이다.

이제 하나 남았다 <img> 태그 맨 뒤에는 "/>"로 마감이 되어 있는데 이 슬레시(/) 앞에 코드 하나만 추가하자

style="display: none;"


이 태그는 화면상에 표시하지 말라는 CSS로 화면상에는 보이지 않지만 구글 블로그는 코드를 보기 때문에 첫 번째 이미지로 인식을 한다.


뭔가 좀 복잡해 보이지만 정리하면

  1. 구글블로그는 이미지를 넣으면 이미지를 정렬하기 위한 <div> 태그, 이미지를 클릭했을 때 이미지를 확대해서 보여주기 위한 <a>태그, 본문에 이미지를 보여주기 위한 <img> 태그를 자동으로 생성한다.
  2. <img> 태그를 제외한 두 태그는 모두 지운다.
  3. <img> 태그 안에 있는 이미지 설정 태그를 지운다. 안지워도 된다. (23.08.27 수정)
  4. <img> 태그 맨 뒤에 style="display: none;" 코드를 넣는다.

<img src="파일주소" style="display: none;" /> 형태로 코드가 만들어 진다.


5. 마치며

사실 알고 보면 간단한 건데 장황하게 설명한 건 혹시라도 완전 초보 블로거가 볼 수도 있다는 생각 때문이다. 그리고 구글 블로그에 조금이라도 익숙해지셨으면 하는 바람에서 구글이 어떤 식으로 인식하는지 장황하게 늘어놨다.

정말 자료가 별로 없어서 구글 블로그를 운영한다는 게 참 쉽지 않은 것 같다.

7 댓글

  1. 전 썸네일 지정은 포기했습니다. 순응하고 구글이 쓰라는 대로 쓰는 중입니다.. 구글 블로그 기능이 너무 빈약한 것은 불만이긴 하네요.

    이른바 '티스토리 사태' 이후 구글 블로그에 관심을 가지는 분이 많아진 것 같기는 합니다만, 과연 대안이 될 수 있을지는...

    답글삭제
    답글
    1. 유입이 확실히 힘들긴 하네요, 전문블로그에 점수를 더 준다고 해서 사진이랑 블로그스팟 두개만 파는 블로그를 만들었는데, 포스팅 하기가 너무 힘들어요 ㅎㅎ 참 그리고 도메인을 파서 하는게 유입에 더 유리할까요? 도메인을 바꾸셨길래 궁금해서요

      삭제
    2. 도메인을 파면 유입에 더 유리한지는 모르겠습니다. 그런데 도메인을 바꾸면 단기적으로 방문자 감소는 피할 수 없는 것 같네요. 도메인 바꾸고 방문자가 반토막났습니다.

      최신 문서 색인은 더 잘 되는 만큼 앞으로 늘지 말지 더 지켜보려고 합니다.

      삭제
    3. 아... 최신문서 색인이 더 잘 되나요? 지금 저는 최근에 올린 글 4개가 크롤링됨 - 현재 색인이 생성되지 않음 으로 나와서 스트레스 받고 있네요 ㅠㅠ 정말 정성스럽게 쓴 글인데

      삭제
    4. 색인까지는 잘 되는 것 같은데 노출은 잘 안 되는 것 같습니다. 특이한 점은 에전 블로그 주소로 발행한 글은 아직도 100% 색인이 안 되는데, 주소 바꾸고 올린 글들은 색인이 비교적 잘 되는 것 같네요.

      색인 여부 살펴보실 때, 포스트 주소 뒤 '?m=1"이 붙은 주소로 색인된 것은 아닌지 점검해 보시기 바랍니다. 이 주소로 색인이 생성된 문서도 꽤 있더라구요. 그리고 " 발견됨 - 현재 색인이 생성되지 않음"도 20개인가 있는데 그냥 신경쓰지 않고 블로그 하고 있습니다..

      삭제
  2. 아하 섬네일 이미지 크기가 385x253픽셀이네요 이제 알았습니다.

    답글삭제
    답글
    1. 내용에 오류가 있어 일부 수정했습니다.

      삭제
다음 이전