한국의 블로그만 하던 사람이 구글 블로그를 접하면 당황스러운 것이 기능이 너무 없다는 것이다. 그중 한 가지가 썸네일 이미지를 내 맘대로 지정할 수 없다는 것. 그래서 이번엔 썸네일 이미지에 대해 몇자 적어본다.
1. 구글 블로그가 인식하는 썸네일용 이미지
구글 블로그는 무조건 첫 번째에 나온 이미지를 썸네일용 이미지로 인식을한다. 그리고 썸네일용 이미지로 인식했다고 해도 그게 항시 고정이 아니라 포스팅을 올리고 나서 나중에 맨 위에 (기존의 첫번째 이미지 위로) 이미지를 넣으면, 다시 그 첫 번째 이미지를 썸네일 이미지로 인식을 한다.
구체적인 내용은 모르겠지만 게시물 목록을 로딩할때 첫번째 이미지를 보고 썸네일 이미지가 없으면, 썸네일 이미지를 생성하고, 썸네일 이미지랑, 첫번째 이미지가 다른경우 새로운 첫번째 이미지로 썸네일 이미지를 재 생성해서 저장 하는것 같다.
2. 구글 블로그가 이미지를 저장하는 방식
구글 블로그에 이미지를 삽입하면 이미지는 https://blogger.googleusercontent.com/ 의 주소로 올라가는데, 우리가 알 수 없는 코드 뒤에 이미지의 크기를 접미어로 붙여서 저장을 한다.
아마도 첫 번째 이미지가 바뀌었는지의 판단은 파일 이름이 아닐까 싶다. 필자도 잘 아는것은 아니지만 뜯어보니 썸네일로 만들어진 이미지 파일이름 뒤에 "w385-h253-p-k-no-nu" 이런 접미사가 붙어 있는 것을 확인했다.
딱 봐도 385x253 픽셀이 구글 블로그가 저장하는 썸네일 이미지 크기이다. 물론 스킨에 따라 보여지는 썸네일 이미지 크기는 다를 수 있다. 아무튼 이 크기는 잘 기억해 두자
이것은 스킨마다 필요한 크기로 저장한다. 접미사도 해당 이미지 크기로 저장한다
(23.08.27 수정)
3. 썸네일용 이미지 넣기
구글 블로그는 편집기를 두가지를 제공한다. 글 쓰기에 들어가면 좌측상단 맨 왼쪽 아이콘을 눌러보자 보통 "새글 작성 보기" 모드를 사용할 것이다. 여기서 시작하면 된다.
구글 블로그의 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로 화면상에는 보이지 않지만 구글 블로그는 코드를 보기 때문에 첫 번째 이미지로 인식을 한다.
뭔가 좀 복잡해 보이지만 정리하면
- 구글블로그는 이미지를 넣으면 이미지를 정렬하기 위한 <div> 태그, 이미지를 클릭했을 때 이미지를 확대해서 보여주기 위한 <a>태그, 본문에 이미지를 보여주기 위한 <img> 태그를 자동으로 생성한다.
- <img> 태그를 제외한 두 태그는 모두 지운다.
<img> 태그 안에 있는 이미지 설정 태그를 지운다.안지워도 된다. (23.08.27 수정)- <img> 태그 맨 뒤에 style="display: none;" 코드를 넣는다.
즉 <img src="파일주소" style="display: none;" /> 형태로 코드가 만들어 진다.
5. 마치며
사실 알고 보면 간단한 건데 장황하게 설명한 건 혹시라도 완전 초보 블로거가 볼 수도 있다는 생각 때문이다. 그리고 구글 블로그에 조금이라도 익숙해지셨으면 하는 바람에서 구글이 어떤 식으로 인식하는지 장황하게 늘어놨다.
정말 자료가 별로 없어서 구글 블로그를 운영한다는 게 참 쉽지 않은 것 같다.
전 썸네일 지정은 포기했습니다. 순응하고 구글이 쓰라는 대로 쓰는 중입니다.. 구글 블로그 기능이 너무 빈약한 것은 불만이긴 하네요.
답글삭제이른바 '티스토리 사태' 이후 구글 블로그에 관심을 가지는 분이 많아진 것 같기는 합니다만, 과연 대안이 될 수 있을지는...
유입이 확실히 힘들긴 하네요, 전문블로그에 점수를 더 준다고 해서 사진이랑 블로그스팟 두개만 파는 블로그를 만들었는데, 포스팅 하기가 너무 힘들어요 ㅎㅎ 참 그리고 도메인을 파서 하는게 유입에 더 유리할까요? 도메인을 바꾸셨길래 궁금해서요
삭제도메인을 파면 유입에 더 유리한지는 모르겠습니다. 그런데 도메인을 바꾸면 단기적으로 방문자 감소는 피할 수 없는 것 같네요. 도메인 바꾸고 방문자가 반토막났습니다.
삭제최신 문서 색인은 더 잘 되는 만큼 앞으로 늘지 말지 더 지켜보려고 합니다.
아... 최신문서 색인이 더 잘 되나요? 지금 저는 최근에 올린 글 4개가 크롤링됨 - 현재 색인이 생성되지 않음 으로 나와서 스트레스 받고 있네요 ㅠㅠ 정말 정성스럽게 쓴 글인데
삭제색인까지는 잘 되는 것 같은데 노출은 잘 안 되는 것 같습니다. 특이한 점은 에전 블로그 주소로 발행한 글은 아직도 100% 색인이 안 되는데, 주소 바꾸고 올린 글들은 색인이 비교적 잘 되는 것 같네요.
삭제색인 여부 살펴보실 때, 포스트 주소 뒤 '?m=1"이 붙은 주소로 색인된 것은 아닌지 점검해 보시기 바랍니다. 이 주소로 색인이 생성된 문서도 꽤 있더라구요. 그리고 " 발견됨 - 현재 색인이 생성되지 않음"도 20개인가 있는데 그냥 신경쓰지 않고 블로그 하고 있습니다..
아하 섬네일 이미지 크기가 385x253픽셀이네요 이제 알았습니다.
답글삭제내용에 오류가 있어 일부 수정했습니다.
삭제