관련 URL
안녕하세요.
얼마 전부터 웹 사이트 URI를 카카오톡에 링크 공유 시 미리보기 노출이 되지 않는 것이 확인되었습니다.
체크 리스트는 확인하였습니다. (https://devtalk.kakao.com/t/scrap-url/116202)
문제가 될 것으로 추측되는 부분의 처리는 아래와 같습니다.
공유 URI와 og:url이 상이한 부분
og:url 주석 처리
→ 처리되지 않음
페이지 내에서 리다이렉트 처리되는 부분
테스트를 위해 리디렉션 처리하지 않음
→ 처리되지 않음
TLS 1.3 미지원
참고: https://devtalk.kakao.com/t/og-image/132283/4
1.3 버전을 미지원하는 회사 내 다른 사이트는 정상 처리됨
특이사항으로는 '공유 디버거’로 확인 결과 Open Graph 정보가 전혀 노출되지 않고 있습니다.
https://developers.kakao.com/tool/debugger/sharing
문제되는 부분 확인 좀 부탁드립니다
안녕하세요.
확인 해보니 미리보기 구성은 잘되지만, 이미지만 노출 안되는 상황이고
카카오측 서버가 미리보기 이미지 구성을 위해 접근했을때 Content-Type으로 이미지가 아닌 값을 받았습니다.
이는 실제로 다른 응답을 했을 수도 있고 에러 응답을 받았을 수도 있습니다.
다른 이미지 URL 사용하셔서 정상 작동하는지 테스트 해보시겠어요?
참고로 접근하는 서버 Proxy는 아래와 같습니다.
여전히 안 되어서, 전략을 바꿔보았습니다.
아주 단순한 HTML 파일로 테스트하였습니다.
https://alpha-external-www.payco.com/kakaotalk.nhn
필수 요소만 넣었는데요.
여전히 이미지가 노출되지 않습니다. 회사에서 사용하는 이미지 서버들의 문제일까 싶어서, 네이버 메인에서 사용하는 네이버 소유의 이미지 주소를 사용해보았는데, 동일하네요.
https://s.pstatic.net/dthumb.phinf/?src="https%3A%2F%2Fs.pstatic.net%2Ftvcast.phinf%2F20231013_242%2F1VwGT_1697180557704St7ed_PNG%2F1697180476790.png"&type=f216_324&service=navermain
혹시 좀 더 확인 해주실 수 있을까요?
이제보니 태그 속성을 잘못 작성하셨네요. 아래와 같이 해보시겠어요?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>KakaoTalk</title>
<meta property="og:title" content="Kakao DevTalk_" />
<meta property="og:type" content="website" />
<meta
property="og:image"
content='https://s.pstatic.net/dthumb.phinf/?src="https%3A%2F%2Fs.pstatic.net%2Ftvcast.phinf%2F20231013_242%2F1VwGT_1697180557704St7ed_PNG%2F1697180476790.png"&type=f216_324&service=navermain'
/>
</head>
<body>
<h1>테스투!</h1>
</body>
</html>
오오… 원인 확인되었습니다. ㅠㅠ 감사합니다
회사마다 사용하는 태그 속성명이 달라서 발생하는 이슈였네요.
OG 메타 태그들은 name과 property 둘 다 기입하는 것이 최선이겠네요
아. 캡쳐해주신 화면 Facebook Meta Tag가 카카오톡 공유 og 태그와 동일합니다.
이것은 ogp 표준 방식입니다.
아래 내용 참고 부탁드려요.
