블로그스팟 X(트위터) 공유 시 썸네일이 안 나온다면? '트위터 카드' 한 방에 해결하기

블로그스팟에서 내가 작성한 글을 X(구 트위터)에 공유하면 이미지(썸네일)가 보이지 않는다. 이 문제를 해결하는 코드를 공유해 본다.


썸네일이 안보이는 이유?

썸네일이 보이지 않는 이유는 '트위터 카드(Twitter Card)'라고 불리는 메타데이터 태그가 블로그 HTML에 설정되어 있지 않기 때문이다.

티스토리(TISTORY)는 스킨 자체에서 이 태그를 기본적으로 제공하는 경우가 많지만, 블로그스팟(Blogger)은 테마에 따라 사용자가 수동으로 넣어줘야 한다고 함.


트위터 카드 메타 태그 삽입

1) 블로그스팟 관리자 화면에서 [테마] → [맞춤설정] 옆의 화살표(▼) → [HTML 편집]으로 간다.

2) <head> 태그 아래 다음의 코드를 복사해서 붙여넣는다.

HTML 

<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>

여기서 이미지를 어떤 식으로 보여줄지를 선택하면 된다. 어떻게?

  • 작은 썸네일 + 오른쪽에 제목/설명: summary
  • 상단에 큰 이미지 + 하단에 제목/설명: summary_large_image

위의 코드에서 이 부분만 바꿔주면 끝!

큰 이미지가 부담스럽거나, 리스트 형태로 보여주고 싶을 때는 summary_large_image에서 _large_image 부분만 지우면 된다.

X(구 트위터)에 공유한 글이 큰 이미지로 보여지는 사진
(예시) 블로그스팟 글 X(구 트위터)에 공유

대표 썸네일은 블로그 글의 첫 번째 이미지가 보여짐에 유의!

추가: PC에서는 사진 안에 글 제목이 보이지만, 모바일에서는 블로그 주소가 보이는데 이 현상은 정상이라고 함.


오늘의 한마디

티스토리에서 블로그스팟으로 오면서, 적응 안되는 것들을 하나씩 채워가고 있는 나를 보자니 문득 이런 생각이 든다.

'집착 쩌는데?'


Related Posts

댓글

댓글 쓰기