카카오공유하기 썸네일 문의

KB라이프8994 · 5월 28, 2025, 5:26오전

문의 시, 관련 URL 또는 디벨로퍼스 앱ID를 알려주세요.

앱ID : 939238

KB라이프생명 홈페이지를 운영하고 있는 개발자입닏다.
KB라이프생명 홈페이지에서 카카오톡으로 URL공유할때 보여지는 썸네일 이미지 관련해서 문의를 드리고 싶습니다.

https://devtalk.kakao.com/t/topic/927 내용처럼 코드가 구현되어있습니다.
메인 홈(www.kblife.co.kr)에서는 경우 썸네일이미지가 잘보이는데,
다른 메뉴들에서는 썸네일이미지가 노출되지 않는 현상입니다. (https://m.kblife.co.kr/mobile-view/aboutKbLife.do)

woody.ho · 5월 28, 2025, 7:59오전

안녕하세요.

https://m.kblife.co.kr/mobile-view/aboutKbLife.do 페이지에서 og 태그가 확인되지 않습니다.
아쉽게도, 카카오 스크랩 서버는 클라이언트 랜더링을 지원하지 않습니다.
첨부 이미지의 태그를 JS로 랜더링하고 계시다면 이를 서버가 제공하도록 부탁드립니다.

KB라이프8994 · 5월 30, 2025, 2:05오전

첨부 이미지처럼 jsp 에 og 태그를 넣어 사용중입니다.

메인홈페이지 m.kblife.co.kr 일경우에는 썸네일이 잘보입니다.

woody.ho · 5월 30, 2025, 3:07오전

스크랩 요청 테스트

curl 'https://m.kblife.co.kr/mobile-view/aboutKbLife.do' \
--header 'User-Agent: facebookexternalhit/1.1; kakaotalk-scrap/1.0; +https://devtalk.kakao.com/t/scrap/33984' \
--header 'Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4'

응답 내용

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<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" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
	<!-- javascript  -->
	<script type="text/javascript" src="/res/ext-lib/jquery/jquery-3.5.1.min.js"> </script>
	<script type="text/javascript" src="/res/ext-lib/jquery/jquery.number.js"> </script>
	<script type="text/javascript" src="/res/ext-lib/iscroll/iscroll.js"> </script>
	<script type="text/javascript" src="/res/ext-lib/swiper/js/swiper.min.js"> </script>
	<script type="text/javascript" src="/res/ext-lib/tiny-date-picker/js/tiny-date-picker.js"> </script>
	<script type="text/javascript" src="/res/ext-lib/clipboard/clipboard.min.js"> </script>
	<!-- 2025.03.20 lottie ì ëë©ì´ì lib -->
	<script type="text/javascript" src="/res/ext-lib/lottie/lottie.min.js"></script>

	<script type="text/javascript" src="/res/mob/js/core/global.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/globalEvent.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/globalExtend.js"> </script>
	<script type="text/javascript" src="/res/insutok/js/common/kb.common.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/viewState.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/nativeService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/ajax.js"> </script>
	<script type="text/javascript" src="/res/mob/js/kbliComm/system_info.js"> </script>
	<script type="text/javascript" src="/res/mob/js/kbliComm/serverComm.js"> </script>
	<script type="text/javascript" src="/res/mob/js/kbliComm/commonInclude.js"> </script>
	<script type="text/javascript" src="/res/mob/js/kbliComm/commonUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/kbliComm/mbl/cmm/Hybrid.js"> </script>
	<script type="text/javascript" src="/res/mob/js/kbliComm/sessionHelper.js"> </script>
	<script type="text/javascript" src="/res/mob/js/kbliComm/cdUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/util/coreUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/util/spinnerUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/util/loadingUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/util/maskingUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/util/patternUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/util/agentUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/util/menuUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/util/domUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/util/stringUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/util/urlUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/util/dialogUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/util/v3Util.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/util/dateUtil.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/commonService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/dialogUrlService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/dialogService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/cyberHomeService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/cyberHomeBiz.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/clipBoardService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/nativeWebViewService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/openApiCallService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/openApiService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/securityService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/heartService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/dateService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/pageScrollService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/core/services/pushService.js"> </script>
	<script type="text/javascript" src="/res/mob/js/common/popups.js"> </script>
	<!-- <script type="text/javascript" src="/res/mob/js/core/root.js"> </script> -->
	<script type="text/javascript" src="/res/mob/js/core/imgFileCommon.js"> </script>
	<script type="text/javascript" src="/res/mob/js/customer-common/kbMobileSSOLogin.js"> </script>
	<script type="text/javascript" src="/res/mob/js/customer-common/chatBotLink.js"> </script>
	<script type="text/javascript" src="/res/insutok/js/chattingBtn.js"> </script>
	<script type="text/javascript" src="/res/ext-lib/common/certiCommon.js"> </script>
	<script>
		$(document).ready(function(){
			//ì±íìë´ ì±ë´ postMessageì ëí ë¦¬ì¤ë
    		window.addEventListener('message',function(event){
     			if(event.data.type === 'login_back'){
          		location.href="https://"+location.hostname+"/mobile-view/login.do?btnLoginBack=login_back";
          		}
    		});
		});

		// ë¡ë© ì´ë¯¸ì§ preload
		const preloadImage = new Image();
		preloadImage.src = '/res/mob/img/comm/loading_mykb.gif';
	</script>

	<!-- style -->
	<!-- css library -->
	<link rel="stylesheet" type="text/css" href="/res/ext-lib/swiper/css/swiper.css">
	<link rel="stylesheet" type="text/css" href="/res/ext-lib/tiny-date-picker/css/tiny-date-picker.css">
	<!-- css -->
	<link rel="stylesheet" type="text/css" href="/res/mob/css/default.css">
	<link rel="stylesheet" type="text/css" href="/res/mob/css/layout.css">
	<link rel="stylesheet" type="text/css" href="/res/mob/css/page.css">
	<link rel="stylesheet" type="text/css" href="/res/mob/css/page-v2.css">
	<link rel="stylesheet" type="text/css" href="/res/mob/css/kb-wise-fund.css">
	<link rel="stylesheet" type="text/css" href="/res/mob/css/cy-common.css">
	<!-- ëì§í¸íë«í¼ -->
	<link rel="stylesheet" type="text/css" href="/res/mob/css/dpa-common.css">
</head>

<body id="body">
... 중략

확인 부탁드릴게요~