카카오스토리 웹사이트 공유 스크랩 이미지를 읽어오지 못합니다

관련 글
https://devtalk.kakao.com/t/api/874/3

이 글에 나온 대로, meta 태그의 og:image content 를 수정해서 스크랩할 이미지를 변경하도록 한 뒤

카카오 api 를 써서 웹사이트를 카카오스토리로 공유하도록 구현을 했습니다.

그런데

다른 og 들은 다 읽어오는데 image 만 못읽어오네요.

아예 리턴값에도 없구요.

Object {url: "내 url", host: "내 호스트", title: "내 타이틀", description: "내 설명", section: ""}

이렇게 나옵니다. 어제까지는 저기에 image 배열이 프로퍼티로 같이 나왔는데( 배열 길이는 0으로… ) 오늘은 아예 안나옵니다.

og 타이틀, 설명, 호스트 다 나오는데 딱 이미지만 안나오네요.

www.kakao.com 페이지에 og:image 가 설정되어있는걸 보고 그 코드 그대로 가져다 써도 안나옵니다.

스크랩이 왜 안될까요?..

=================================================
추가글

<head>
<title>타이틀</title>
<meta charset="UTF-8">
<meta name="description" content="설명" />
<meta name="keywords" content="키워드" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:image" content="<%=imgServerDomain%>images/food1.png">
<meta property="og:description" content="설명">
<meta property="og:url" content="<%=localDomain%>" />
<meta property="og:title" content="타이틀" />
</head>

위 내용이 메타태그가 있는 부분이고,

Kakao.Auth.login({
  success: function(authObj) {// 로그인 성공시, API를 호출합니다.
  Kakao.API.request({
     url : '/v1/api/story/linkinfo',
     data : {
						     url : localDomain
					    }
				})
				.then(function(res) {
					    res.url = res.url + "?menu=" + ( SlideShow.getCurrentCnt() + 1 );
					    console.log( "Num1-1",res );
					    // 이전 API 호출이 성공한 경우 다음 API를 호출합니다.
					    return Kakao.API.request({
						    url : '/v1/api/story/post/link',
						    data : {
							        link_info : res
						    }
					});
				})
				.then(function(res) {
            return Kakao.API.request({
						    url : '/v1/api/story/mystory',
						    data : {
                id : res.id
						    }
					});
				})
				.then(
            function(res) {
                sns.callback();
            }, function(err) {
                console.log(  "Num4",err );
                alert(JSON.stringify(err));
            }
    );
            },
            fail : function( err ) {
            	alert("error!!!!!!" + JSON.stringify(err))
            }
        });

이게 카카오스토리로 웹 페이지 공유하는 코드입니다.

다른건 다 되는데 이미지만 못가져오네요.

og태그 형식을 잘 맞췄는데도 스크랩이 되지 않는다면, 스크랩 결과 캐시의 영향일 수 있을 것 같습니다.
https://devtalk.kakao.com/t/topic/2138/2?u=vincent

1개의 좋아요

하… 혹시나 싶어서, 아래 스크랩하는 부분에서 자바스크립트 변수 부분을 수정해봤습니다.

Kakao.API.request({
  url : '/v1/api/story/linkinfo',
  data : {
    url : localDomain
  }
})

저 localDomain 이라는 녀석의 주소가 http://test.kr/ 로 되어있던 것을,
http://test.kr/index.jsp 로 수정해주었더니, 이미지도 같이 스크랩해서 가지고 오네요…

내 6시간은 대체 무엇을 위한 것인가…

@anon20148473
현재 제 사이트 역시 페이스북 공유를 지원하고 있는데 페이스북에서는 뒤에 index.jsp 가 붙어있지 않더라도 og:image 를 잘 받아오는 상태였습니다.
@charsyam 님의 말씀대로라면 이는 페이스북에서는 캐싱주기가 짧기 때문이거나 또는 캐싱을 안하기 때문인 것으로 보입니다.

카카오스토리 스크랩 기능도 url 이 domain/ 인 것과 domain/index.jsp 인 것을 같은 것으로 보고 이미지를 스크랩할 수 있도록 개선되어야 할 필요성이 보입니다.

@anon20148473
추가로, 대표 이미지의 배경에 알파값이 있을지 없을지 모르는 상태에서 스크랩한 이미지의 포맷을 무조건 jpg 로 한다면 카스로 웹사이트를 공유했을 때 배경 이미지가 깨져나올 수도 있기 때문에, 페이지를 스크랩할 때 대표 이미지 포맷을 jpg 가 아니라 png 로 해야 하지 않을까 싶습니다.

예시 이미지 링크입니다.
개발 테스트하는 와중에 보니 이렇게 올라가있네요.
배경이 투명 배경인 이미지로 png 파일이었는데 우측 상하단이 깨져있네요
https://dn-s-story.kakaocdn.net/dn/3fEKo/hyc9b1O4ao/tgtHjh56mV24hoIakua2q0/img.jpg?height=466&width=519

1개의 좋아요

@charsyam 스크랩 서버 개선 제안이 들어왔네요~

@sksmsvlxk 혹시 올리신 이미지의 원본을 구할 수 있을까요?

현재 캐싱이 url 주소 기준으로 되어서 그렇습니다.
다만 domain/ 을 domain/index.jsp 등으로 가져가는 것은… 해당 부분이 서버 설정에 달려있기 때문에, index.jsp, index.html, index.php 등으로 설정이 가능하기 때문에… 중복으로 있을 경우, 우선순위 문제나, 서로 다른 결과를 주는 페이지는 어떻게 할 것인가에 대한 이슈들이 있기 때문에, 같은 것으로 보기에는 조금 문제가 있습니다.

1개의 좋아요

og태그 수정 후에는 하루가 지나야 캐시가 갱신된 결과를 볼 수 있다는 말씀이신가요?

@badboyj21c
og태그의 url이 스크랩된 후 하루 정도 후에 캐시가 지워는건 맞는데요.
og태그 변경하신 것을 바로 적용하고 싶을 경우에는 https://dev.kakao.com/docs/restapi/tool 에서 캐시를 삭제하실 수 있어요~
카카오스토리 탭 > 카카오스토리 링크 정보 얻기 (/v1/api/story/linkinfo) 를 보시면 캐시 삭제 버튼이 있습니다.

1개의 좋아요

한참 찾았어요!!! 감사합니다