https://devtalk.kakao.com/t/url/18780 글을 참고로
이미지 중앙에 내용을 넣어 이미지 제작하였으나 중앙이 아닌 상단부터 크롭되어 표시됩니다.
별도 설정이 필요한건지요?
<meta property="og:image:url" content="https://d3m7so2s2yecjy.cloudfront.net/logo/hicharis-1024.png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
<meta property="og:image" content="https://d3m7so2s2yecjy.cloudfront.net/logo/hicharis-1024.png">
공유이미지
안녕하세요?
카카오톡 미리보기에서 사용하는 스크랩 api 에서는 이미지에 대한 정보를 아래처럼 오리지널 이미지를 내려주고 있으나
카톡 클라쪽에서 해당 이미지를 중앙을 크롭해서 보여주는 기능이 없습니다. (우상단 기준으로 짤라서 보여줍니다.)
중앙에 있는 특별한 문자나 패턴을 인식해서 그 부분을 보여주는 기능은 아직 지원이 안되고 있습니다.
그래서 좀 더 정교하게 보여주기를 하시기 위해서는
og:image 에 적당한 크기로 이미지를 잘라서 다시 넣어주시는걸 추천 드립니다.
답변 감사합니다.
다만, 말씀하신 것처럼 모든 URL에 우상단으로 크롭이 되었다면 인지를 했었겠지만
https://celeb.hicharis.net/ 사이트의 경우 동일한 사이즈에 동일한 위치에 텍스트가 있음에도 해당 사이트의 미리보기 이미지는 중앙에 위치합니다.
말씀하신 것처럼 그냥 우상단 기준으로 맞춰서 잘라야 하는건가요?
하지만 다른 서비스들에서의 공유 이미지는 중앙을 기준으로 크롭하거나 정사각형 그대로 사용하는 경우가 있어
카카오톡 미리보기 기준으로 잘라서 이용하기에는 무리가 있습니다.
답변 감사드리고 번거로우시겠지만 한번더 확인 부탁드립니다.
감사합니다.
아 아래 이미지를 보니 좀 다르게 크롭하는거 같네요.
이 부분은 제가 카카오톡 클라에서 짜르는 기준을 해당팀에 문의해서 알려드려야 할 것 같습니다.
답변 오는대로 다시 답변 드릴께요.
확인을 해보니 카카오톡에서 미리보기시 보여주는 이미지는 스크랩 서버에서 원본 이미지를 내려주면
스마트 크롭이란 내부 api 를 호출하여 800*400 의 썸네일 이미지로 변환하여 보여주게 되어 있다고 합니다.
(제가 처음에는 우상단이라고 답을 달았는데 이 부분은 정정합니다.)
오리지널 이미지에서 썸네일 생성시 사람이나 사물 인식은 잘 하지만 글자 등의 인식은 조금 어려운 편이라
원하는 대로 중앙에 글자 쪽만 이쁘게 잘라내긴 힘들다고 합니다.
위의 경우와 아래 경우는 아래쪽은 패턴이 들어가 있어서 좀 더 중앙 근처에서 크롭이 된거 같습니다.
현재로썬 보여지기 원하는 부분을 최대한 800*400 비율로 잘라서
og:image 에 넣어주는 것이 가장 적절한 방법으로 추천 드립니다.