카카오톡 링크 공유 og:image 질문드립니다

ghrnjs567 · 10월 4, 2022, 2:33오전

안녕하세요.
프로젝트 진행 도중 카카오톡으로 공유 작업을 진행하던 중
og:image 때문에 애를 먹고 있어서 글을 올리게 되었습니다.

현재 상황이 견적을 짜주는 프로젝트를 제작중인데

견적을 다 짜고 견적서 보기 버튼을 눌렀을 시 url을 생성합니다.
생성한 url을 서버에서 단축 url로 변경시켜서 DB에 저장합니다.
견적서를 보는 팝업에서 카카오톡 공유 버튼을 눌렀을 시 단축 url을 공유합니다.
단축 url로 들어오면 서버단에서 해당 단축 url에 맞는 생성된 url로 forward 처리합니다.
해당 견적서 페이지로 연결된다.

이렇게 되는데 해당 견적서 페이지의 og:image를 수정해도 적용이 안되는 것 같아서 질문드립니다.
현재 프론트단을 thymeleaf로 구성하고있습니다.

woody.ho · 10월 4, 2022, 2:37오전

안녕하세요.

공유하기에 사용된 코드 또는 재현 가능한 사이트 주소 부탁드립니다.

ghrnjs567 · 10월 4, 2022, 2:43오전

카카오톡 공유 버튼을 만드는 코드입니다.

Kakao.Share.createCustomButton({

                container: '#kakao-message-share-button',

                templateId: tId,

                templateArgs: {

                    'subject':'견적서',

                    'description':'요청하신 견적서입니다.',

                    'buttonName':'견적서',

                    'pathWeb':sharingUrl,

                    'pathMobileWeb':sharingUrl,

                    'hash':hash

                },

                installTalk: true,

                serverCallbackArgs: {

                    "estimateType": 2,

                    "userName": userName,

                    "simpleEstimateNo": simpleEstimateNo,

                    "estimateSaveTypeNo": 2,

                    "sharingUrl": sharingUrl

                }

            });

해당 og:image 태그가 포함된 url입니다.
https://me2.do/xmPQbR4H

woody.ho · 10월 4, 2022, 3:58오전

사용하신 템플릿 ID가 어떻게 되실까요?

만약 29570를 사용하셨다면, 이는 Feed형 템플릿으로 이미지 영역에 표시될 이미지는 사이트 주소가 아닌 실제 이미지 경로가 입력되어야 합니다.
전달된 sharingUrl 값에서 og:image 값을 추출하여 표시하지 않습니다.

ghrnjs567 · 10월 4, 2022, 4:34오전

템플릿 ID는 443603입니다.
아래 보내드린 url에 og:image 값이 없나요…?

woody.ho · 10월 4, 2022, 4:52오전

443603 은 쏠카 앱 ID 입니다.
제공해 주신 코드로 추적해본 결과 templateId 는 29570를 사용하신것으로 확인되며 이 기준으로 설명드립니다.

해당 템플릿의 경우 이미지 영역에이 사용자 정의 파라미터를 사용하도록 설정되어 이미지 경로를 전달해야만 하나 현재 설정하신 내용은 이미지 파일이 직접 등록되어 있는 구조 입니다.
때문에, 이미지 주소를 전달하여도 현재로서는 이미지가 표시되지 않습니다.

위의 네이버 단축 주소로 접근하면 아래 주소로 리디렉션되고 해당 주소에서 og:image 값을 추출 하게 됩니다.
다만 아래 이미지 주소를 직접 전달하지 않으면 위의 템플릿에서는 표시 되지 않습니다.

# https://me2.do/xmPQbR4H 의 307 리디렉션
https://solecar.ghk.uml.kr/newcar/api/get/model/image?modelNo=201
# 리디렉션 된 주소의 og:image 값
https://solecar.ghk.uml.kr/estimate/sharing/118cc4f9-e466-4b34-b2a1-5defd1e2fe82

구현하고자 하시는 내용을 좀 더 구체적으로 설명 주시면 알맞은 방법을 안내 드릴 수 있을것 같습니다.

ghrnjs567 · 10월 4, 2022, 5:02오전

앗 앱 ID랑 템플릿 ID랑 헷갈려서 잘 못 알려드렸네요…
구현해야 할 내용을 알려드리겠습니다 ㅠㅠ
견적을 카카오톡으로 공유하면 단축 url을 전송합니다.
전송한 메시지의 썸네일(og:image)을 해당 견적을 낸 차량의 모델 이미지로 전송이 되어야합니다.
그럼 단축 url을 사용하면 og:image를 사용하기 힘들다는 말씀이신가요?

woody.ho · 10월 4, 2022, 5:50오전

og:image 정보를 스크랩하여 사용하리셔면 스크랩 메시지 기능을 활용하셔야 합니다.

메시지 템플릿 | Kakao Developers 메시지 템플릿 - 스크랩 메시지

위 가이드를 사용하여 기본 제공되는 키를 적절한 위치에 사용하시면 됩니다.

예)

let sharingUrl = 'https://me2.do/xmPQbR4H';
let hash = '118cc4f9-e466-4b34-b2a1-5defd1e2fe82';
let userName = '테스트유저';
let simpleEstimateNo = 'test12345';

Kakao.Share.sendScrap({
    requestUrl: sharingUrl,
    templateId: 82293,
    templateArgs: {
        'subject': '견적서',
        'description': '요청하신 견적서입니다.',
        'buttonName': '견적서',
        'pathWeb': sharingUrl,
        'pathMobileWeb': sharingUrl,
        'hash': hash
    },
    installTalk: true,
    serverCallbackArgs: {
        "estimateType": 2,
        "userName": userName,
        "simpleEstimateNo": simpleEstimateNo,
        "estimateSaveTypeNo": 2,
        "sharingUrl": sharingUrl
    }
});

Kakao.Share.sendScrap 기능을 사용하면, 활용할 수 있는 기본 키가 제공됩니다.

${SCRAP_IMAGE} - 스크랩(최적화)된 이미지 UEL (og:image로 부터)
${SCRAP_IMAGE_WIDTH} - 스크랩(최적화)된 이미지 넓이
${SCRAP_IMAGE_HEIGHT} - 스크랩(최적화)된 이미지 높이
...

ghrnjs567 · 10월 4, 2022, 6:10오전

감사합니다!
Kakao.Share.createScrapButton으로 해결했습니다.
바쁘실텐데 정성껏 답변해주셔서
다시 한번 감사합니다~!