안녕하세요.
creat-react-app 프로젝트에서 react-helmet-async 와 react-snap 을 사용해서,
각 페이지 별로 og tag 들을 설정 하였습니다.
그런데 네이버 링크에서는 잘 작동하는게 카카오 미리보기에서는 잘 잘동 하지 않네요.
일단 소스보기(element) 쪽에 og tag들은 페이지 별로 적용이 되어있는 것으로 확인 되는데,
카카오톡에서 전송하면 미리보기가 잘 나타나지 않습니다.
- 일단 설정한 og tag 들이 아니라, 에 설정한 값이 미리보기 값으로 나타납니다.
- 공유 디버거를 통해 확인해 보았을 때, Open Graph 정보에 모두 빈칸으로 나타납니다.
(og:url, og:title, og:description 이하 모두), 캐시초기화를 해도 마찬가지 입니다.
원인을 도저히 찾을 수 없습니다. 한번 확인해 주시면 너무나 감사드리겠습니다.
각 url 마다 설정한 og tag들이 모두 다르고, 소스(element에서 내부 나타나는 og 관련 설정값이)
올바른 값입니다. (이가 카카오톡 미리보기에 나타나지 않는 이슈)
감사합니다.
tim.l
2
안녕하세요. postman이나 curl로 해당 URL을 호출해서 응답받은 결과를 확인해보면 파악할 수 있는데요.
아래와 같이 og 태그가 없습니다. 확인 부탁드려요.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-title" content="에픽모빌리티" />
<link rel="icon" href="/f_logo.png" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" href="/f_logo.png" />
<meta name="naver-site-verification" content="a8cfdd5e031367086db25b23a7850518221caeac" />
<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="apple-touch-icon" href="/f_logo.png" />
<link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.13.0/css/all.css" />
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c54a55211ec945c568fbd75d95d2aafc&libraries=services,clusterer">
</script>
<title>르노 - 강남,동작,서초방배 - 에픽모빌리티 - 그랑콜레오스 견적 시승</title>
<script defer="defer" src="/static/js/main.1888a39b.js"></script>
<link href="/static/css/main.d8e47367.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
