Facebook, Twitter에서 링크 공유시 표현되는 정보 설정

SNS에서 링크를 공유할 때 나오는 정보들을 설정하는 방법

확인하기

확인하고 싶은 링크가 어떤 형태로 표현되는 지는 다음 사이트에서 미리 확인할 수 있다.

페이스북은 두 가지 형태의 thumbnail을 지원합니다.

페이스북의 이미지 요구사항, 페이스북 링크공유 FAQ 참고

만약, 의도하지 않게 thumbnail이 small로 표현될 경우, 개발자 도구에서 og:image의 content로 명시되어 있는 이미지를 직접 다운로드 해보자. 아마도 압축 설정등의 이유로 600이하로 설정되어 있을것 이다.

사실, facebook은 og:image속성이 없어도 링크의 첫 이미지를 thumbnail로 표현해주는 경우도 있다.

ex: gatsby로 만들어진 블로그 등.. 하지만, 정확하게 커스텀 하고 싶다면 og tag속성을 넣어주는 것이 좋다.

트위터는 페이스북과 다르게 og:image 속성이 없다면 절대로 thumbnail을 표현하지 않는다. 그리고, meta tag에 필수적으로 요구되는 속성이 있다.

card 위 예시는 og:image는 없고, meta tag정보가 있는 상태이다. 트위터는 두 가지 설정이 필요하다.
어떤 사진을 thumbnail로 넣을지(og:image)
'카드 형태로 표현(meta tag) 트위터 card 가이드를 살펴보면 <meta name="twitter:card" content="summary"></meta>이 meta tag가 필수로 있어야 한다는 점을 알 수 있다.
large(summary_large_image)

이렇게 large card형태로 표현하고 싶다면, twitter:card의 content를 summary_large_image로 설정하면 된다.

twitter:card의 content를 summary로 설정되어 있으면 위와같이 작게 표현된다.