안녕하세요? 카카오 미리보기 URL 관련 문의가 있습니다.
공유디버거에서 캐시 초기화를 한 후 미리보기가 뜨지 않는 문제가 있어서요.
기존에는 og:image를 지정해놓지 않아서 게시글 URL마다 해당 게시글의 이미지가 미리보기로 떴는데,
캐시 초기화를 한 이후에는 아무 미리보기가 뜨지 않습니다.
캐시 초기화 이후 미리보기 이미지가 안뜨는 경우에는 어떻게 적용해야할까요?
URL은 https://cheogajip.co.kr 입니다
og:image의 경우 지정하면 어떤 게시글을 링크하던 지정된 썸네일만 노출되어서, 해당 태그는 사용하지 않는 상태입니다.
노출이 잘 되다가 안되어서 문의드립니다.
@shabus hello, To solve the Kakao preview problem, I can recommend the following steps:
<!-- Dynamic og tags -->
<meta property="og:title" content="게시글 제목" />
<meta property="og:description" content="게시글 설명" />
<meta property="og:image" content="게시글 이미지 URL" />
<meta property="og:url" content="현재 페이지 URL" />
// Cache refresh
const refreshKakaoCache = async (url) => {
try {
const response = await fetch(
'https://kapi.kakao.com/v2/api/talk/memo/scrap/cache',
{
method: 'POST',
headers: {
'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
},
body: JSON.stringify({ url: url })
}
);
return response.json();
} catch (error) {
console.error('Cache refresh failed:', error);
}
};
After making these changes, I recommend you clear the cache again and test.
안녕하세요.
정상 표기되는 것으로 보이는데요 확인 부탁드립니다.
안녕하세요? 일단 아무것도 노출되지 않는 상태다보니,
head에 og:image로 이미지를 삽입한 상태입니다.
이전에는 og:image를 지정하지 않으니, 게시글 별로 제목과 이미지를 불러왔는데,
현재는 지정된 이미지만 불러오고 있어서요…
확인을 위해 다시 og:image를 삭제한 상태입니다.
혹시 다시 한 번 확인해주시겠어요?
상황이 잘 이해되지 않는데요
게시글 별로 기대 값이 어떤지 설명해 주시겠어요?
네. 이전에는 (캐시 초기화 전)
cheogajip.co.kr
이나
이벤트 게시글인
https://www.cheogajip.co.kr/bbs/board.php?bo_table=event&wr_id=241
주소의 글을 카카오톡으로 전송하면, 해당 게시글의 제목과 썸네일이미지가 자동으로 불러와졌는데,
공유 디버거에서 캐시 초기화를 한 후에는 아무 이미지도 뜨지 않는 상황이라서요.
우선 og:image를 적용하니 어떤 주소의 게시글이든 적용된 썸네일만 전송되어서,
캐시초기화 이전 상태처럼 그냥 전달하면 자동으로 해당 게시글 제목과 썸네일을 불러오고 싶은데.
제대로 작동이 안되네요 
@woody.ho
What this guy means is dynamic preview, a different image for each page and link.
<!-- article1.html -->
<meta property="og:title" content="Article 1 Title" />
<meta property="og:description" content="Article 1 Description" />
<meta property="og:image" content="article1-image.jpg" />
<!-- article2.html -->
<meta property="og:title" content="Article 2 Title" />
<meta property="og:description" content="Article 2 Description" />
<meta property="og:image" content="article2-image.jpg" />
We understand your problem but if you explain exactly what you want to do maybe we can offer alternative solutions. I assume you want a different image for each link, correct?
네 맞습니다. 다만 원래 안되었던건 아니고, 작동이 잘 되고 있던 중에, 캐시 초기화를 한 이후부터 이미지를 못불러오는 현상이 있습니다.
Share the source code you use to show the image and check the log browser and system log records to see if there are any errors. If it is a cocoa-side problem, I cannot see it, the moderators need to check it.
And try this code maybe work for you.
const refreshCache = async (url) => {
try {
const response = await fetch(
'https://kapi.kakao.com/v2/api/talk/memo/scrap/cache',
{
method: 'POST',
headers: {
'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
},
body: JSON.stringify({
url: url
})
}
);
const data = await response.json();
console.log('Cache refresh response:', data);
} catch (error) {
console.error('Cache refresh failed:', error);
}
};
각 페이지 별로, 유효한 og:image 태그를 구성 부탁드립니다.
카카오 스크랩 서버는 HTML 표준, Open Graph 표준 스팩에 따라 회원님 서비스 콘텐츠를 분석하여 미리보기를 준비 합니다.
https://www.cheogajip.co.kr/bbs/board.php?bo_table=event&wr_id=241 페이지의 경우이 경우 스크랩 서버는 본문 중 가장 처음 발견되는 img 태그를 활용합니다.
https://www.cheogajip.co.kr/theme/v3/img/sidebar_shop.png 입니다.
이 이미지를 기본으로 미리보기 최적화 하여 지금과 같은 흰 이미지가 생성되었습니다.
감사합니다.
이전에는 자동으로 게시글의 이미지를 불러왔는데, 캐시 초기화 후 처음 img태그를 불러오나 보네요.
게시글 별로 썸네일 이미지를 적용하는 법을 몰라서요 
해당 부분을 확인해 보겠습니다. 감사합니다!
캐시를 리프래시하는 코드일까요? 고맙습니다!
Yes, that’s the cache clearing code and also try this You can add it dynamically in the backend (e.g. PHP, Node.js etc.) like this:
// Sample Node.js/Express code
app.get('/post/:id', (req, res) => {
const post = getPost(req.params.id); // Get the data of the post
const html = `
<head>
<meta property="og:title" content="${post.title}" />
<meta property="og:description" content="${post.description}" />
<meta property="og:image" content="${post.thumbnailUrl}" />
<meta property="og:url" content="https://yoursite.com/post/${post.id}" />
...
</head>
`;
res.send(html);
});
This way unique preview images will be set for each post.
넵 해당 코드는 미리보기가 노출되지 않아 게시글 작성시 html에 제가 삽입해놓은 코드기는합니다 ㅠㅠ
넵, 페이지 별로 표시하고자 하는 이미지와 같이 작성하시되 head 아래에 두시면 좋을것 같습니다.
It would be difficult to do this manually. Edit the code structure and add an automatic system to the backend. I sent you a sample code. This way, you will be free from human errors.
감사합니다. 동적 코드를 활용해서 적용했습니다 
많은 도움이 되었습니다!
감사합니다!
덕분에 동적코드를 활용해서 적용했습니다.
상세한 답변 감사합니다!
