링크 공유 시 미리보기 썸네일 설정하기 (meta 태그)
프로젝트를 하던 중, SNS로 링크 공유 시 미리보기 화면을 꾸미고 싶다는 기획자의 의견을 받아 이를 반영하게 되었다.
넣을 수 있는 것들은 크게 4가지가 있다.
1. 썸네일 이미지
2. 썸네일 제목
3. 썸네일 설명
4. 썸네일 링크
이것들은 html 파일의 <head> 태그 안에 작성해주면 된다.
<head>
<meta property="og:image" content="이미지 경로" />
<meta
property="og:title"
content="미래의 당신에게 편지가 도착할 예정이에요!"
/>
<meta
property="og:description"
content="💌 이메일을 남기고 편지를 받아보세요😊"
/>
<meta
property="og:url"
content="링크"
/>
</head>
잘 적용되었는 지는 페이스북에서 제공하는 공유 디버거를 통해서 확인해볼 수 있다. 그런데 이걸 확인하려면 일단 배포를 해야 한다. (당연한 이야기... localhost:3000 이 될리가 없으니까)
https://developers.facebook.com/tools/debug/
공유 디버거 - Meta for Developers
공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요.
developers.facebook.com
처음 적용하면 나머지는 잘 뜨는 데 이미지가 잘 안보이는 경우가 있는데, 조금 기다리면 적용되더라... 이유는 모르겠다. (검색해보면 캐시 문제인듯 하다.) 아무튼 나는 이미지 경로를 이렇게 하긴 했다.
<meta property="og:image" content="%PUBLIC_URL%/sharethumbnail.png" />
참고한 글
Meta Tag , OG(오픈그래프) 사용하기
오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓
velog.io