구글 블로그 대표 이미지 등록 방법

포스트 썸네일 이미지

오늘은 구글 블로그의 대표 이미지를 등록해 보겠다.




구글 블로그는 대표 이미지가 없다


구글 블로그는 기본적으로 나처럼 직접 코드를 수정해서 대표 이미지를 설정하지 않으면, 블로그의 대표 이미지가 존재하지 않게 된다.

그러면 어떤 일이 일어나는가.. 하면,




티스토리 에디터에서 링크 박스를 생성해도 블로그에 대표 이미지가 없다

예전에 키웠다가 지금은 운영을 포기한 예전 블로그의 에디터다.

이런 에디터에서는 링크할 URL만 붙여 넣고 enter 키만 눌러도 자동적으로 이렇게 링크를 박스 형태로 생성해 준다.


여기에 현재 나의 블로그의 URL를 넣고 enter 키를 눌렀더니, 대표 이미지가 보이지 않는다.

이러면 뭔가 링크에서부터 '이 웹사이트는 전문적이지 않은 웹사이트인가 보네.'라는 느낌을 받게 된다.

혹은 클릭하지 말아야 할 의심스러운 사이트처럼 생각하는 사람도 있을 것이다.


그런데 블로그 포스트의 링크를 넣을 때는 포스트의 대표 이미지가 표시된다.

이 부분은 정말 다행이다.




개발자 도구를 통해 meta 태그의 property 속성이 og:image인 코드를 찾는다

블로그의 개별 포스트 페이지에서 [F12] 키를 눌러서 개발자 도구를 열었다.

화살표가 가리키는 코드가 현재 페이지의 대표 이미지를 설정하는 코드다.


개별 포스트 페이지에는 이 코드가 있는데, 블로그 첫 페이지에는 이 코드가 없다.

그러니 직접 넣어야 한다.


그런데 직접 넣을 코드는 블로그의 첫 페이지에만 적용이 돼야 한다.

블로그의 개별 포스트 페이지에는 이미 대표 이미지가 지정이 되어 있기 때문이다.





구글 블로그 첫 페이지의 대표 이미지를 넣는 코드


블로그 HTML 편집에서 블로그 첫 페이지만 대표 이미지를 넣는 코드 추가

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.


먼저 [ctrl + F] 키를 누르고 og:image를 검색한다.

기존의 관련 코드의 아래에 코드를 넣도록 하자.

네모로 표시한 부분의 코드가 블로그 첫 페이지의 대표 이미지를 지정하는 코드다.




<b:if cond='data:view.isHomepage'>
  <meta content='블로그 대표 이미지 URL' property='og:image'/>
</b:if>

새로운 <b:if> 조건문을 추가하여 블로그 첫 페이지에서만 작동하는 <meta> 태그를 넣었다.

이미지 URL은 본인이 직접 찍은 사진이나 만든 이미지, 혹은 저작권 문제가 없는 이미지 공유 사이트를 통한 이미지를 넣도록 하자.




메신저 앱에서 링크 공유 시 블로그의 대표 이미지가 뜬다

블로그 대표 이미지가 잘 등록이 되었는지 메신저 앱으로 내 블로그의 URL을 보내보았다.

대표 이미지가 제대로 잘 등록된 것을 확인할 수 있다.


오늘도 성공~~ 🎉




숲 속의 단풍으로 둘러싸인 나무 그루터기에 놓인 노트북

블로그 대표 이미지로 등록한 사진은 이 사진이다.

숲속코딩이라는 블로그 이름에 잘 어울리는 이미지 같다. 😊

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.

댓글 쓰기

0 Comments

문의하기 양식