안녕하세요. og:image에 대해 문의드립니다.
아래 소스처럼 og:image 사이즈를 500x500 (http://ntm.nanoit.kr/images/common/logo_sns.png) 으로 했는데
링크를 보낼 때 밑에 화면처럼 아랫부분이 잘립니다. 페이스북에서는 잘 보이더라구요.
페이스북이나 다른 곳에서도 사용하고자 해서 정사각형으로 등록하고자 하는데 방법이 없나요?
내부 로직으로 인한 문제로 보입니다.
좀더 디버깅을 해봐야 정확한 이유를 알 수 있습니다만,
현재 현상으로 봤을때 구름모양의 'fun’이 중요이미지로 파악이 되서 fun을 이미지의 중앙쪽에 배치하다보니
아래쪽에 있는 이미지가 잘린듯 합니다.
1:1의 이미지를 사용하셔야 한다면 현재 현상은 좀 어쩔 수 없는 부분인것 같구요
저희가 내부적으로 쓰는 비율인 2:1의 비율로 이미지를 생성해 주신다면 비율축소만 되서 이미지 미리보기가 제공 될 수 있을것 같습니다.
facebook과 카카오를 구분할 수 있는 방법은 Request header의 User-Agent 부분이 조금 다른데
카카오의 User-Agent는 “facebookexternalhit/1.1;kakaotalk-scrap/1.0; +https://devtalk.kakao.com/t/scrap/33984” 입니다. “kakaotalk-scrap/” 이 부분이 추가된 요청은 카카오의 요청으로 판단하고 og:image를 변경해서 내려주신다면 기타 서비스와 저희 서비스를 구분해서 이미지를 노출할 수 있을 듯 합니다.
감사합니다! 근데 제가 프로그래머가 아니라 og:image를 카카오톡 용으로 따로 구분해서 올릴수 있다는 이야기인거 같은데…
meta 태그 안에 이미지 다르게 구분되게 올리려면
meta property=“og:image” content=“http://ntm.nanoit.kr/images/common/logo_sns.png”
meta property=“og:image kakaotalk-scrap/” content=“http://ntm.nanoit.kr/images/common/logo_sns.png”
이렇게 적어주어야 하는것인지…
User-Agent를 어디에다 선언해주어야 하는거 같기도 한데…
코드 상에 어떻게 적어야 하는건지 이해가 안되네요… ㅠㅠ
개발자가 아니시라면 제가 언급한 내용은 적용 불가능 합니다.
2:1 비율의 이미지를 카톡에 노출되길 희망하는 형태로 만드시는게 좋을 듯 합니다.
더불어 페이스북이나 기타 sns에서도 잘 보일 수 있는 비율과 공백을 잘 활용해서 모든 sns에 공통적으로 적용될 만한 이미지를 만드는게 좋은 방법일것 같습니다.