안녕하세요 저는 현재 서비스에서 SEO 처리를 위하여 Next.js에서 SSR을 사용하여 동적으로 메타태그 값을 넣어주고 있습니다.
공유 디버거로 실행해본 결과
이처럼 잘 나오는 모습을 확인하였으나 막상 카카오톡에서 실제 저 url로 입력을 하면
위와 같이 이미지가 정상적으로 나오지 않는 문제가 발생하였습니다.
이를 해결하기 위하여 확장자도 webp에서 jpg로 바꿔보고 url이 틀린 것인지, 페이지 소스에 메타태그가 들어있지 않은 것인지 다 확인도 해봤지만 정상적으로 메타 태그들이 포함되어 나오는 모습을 확인했습니다.
아래는 현재 적용되고 있는 페이지 소스입니다.
뭐가 문제여서 이미지가 나오지 않는 걸까요? 답변 부탁드립니다!
해당 페이지의 html과 이미지를 복사해서 다른 사이트에 적용해보니 정상작동하고
html만 복사해서 해당 이미지를 참조하니 동일하게 섬네일이 표시되지 않습니다.
https://anseras.s3.ap-northeast-2.amazonaws.com 에서 카카오 스크랩서버의 접근을 차단하고 있지 않은지 확인 부탁드립니다.
aws에서 확인 결과 해당 스크랩 서버의 접근을 차단시키고 있지 않습니다.
제가 다운로드 받은 이미지를 다른 서버에 올리고 브라우저로 접근해보니 잘표시됩니다.
하지만, OG태그에 설정하신 값을 브라우저에서 띄우면 이미지 표시되지 않고 다운로드됩니다.
또한 도메인뒤에 슬래시 두개붙은 부분을 슬래시 한개로 변경 후, 접근해보면 아래와 같이 액세스 불가 메시지 표시됩니다.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>HR368BB6G7CGTPJ5</RequestId>
<HostId>jYt3fLxj8DSPHjSLVJYVz7ZKevBULDsVFji29tHLJkVfmhINYERBkThBRQT4s7Csb/u/dR4svv0=</HostId>
</Error>
이와 같은 증상 차이에 따라 카카오 미리보기 이미지 구성하는 서버가 이미지에 접근하지 못하여
이미지 비표시되는 것으로 보입니다. 확인 부탁드려요.
다운로드가 되지 않게 하고 이미지가 표시되도록 설정을 바꾸고 웹사이트의 여러 게시물 중 아래의 url로 테스트를 진행해봤더니 여전히 나오지 않습니다…
이미지 URL을 말씀드린거였어요.
(참고로, https프로토콜 뒤에 슬래시 두개를 의미한게 아닙니다.)
아래 .com뒤에 슬래시 두개는 의도적으로 하신건가요?
anseras.s3.ap-northeast-2.amazonaws.com//1663642127790_story_main_image
(1) https://www.ffeed.me/story/34 이주소를 카카오톡에 입력하시면,
(2) 스크랩서버가 해당 주소에 접근하여 OG태그를 수집하고 (미리보기가 구성되었으니 스크랩서버는 잘 접근한 것으로 보입니다.)
<meta property="og:title" content="[ff Story] 빈티지 가구를 구매하는 이유는?" />
<meta property="og:description"
content="점점 다양해지는 개인의 취향에 따라 가구 시장도 선택의 폭이 넓어지고 있습니다. 가구를 구매하기 위해서 지금까지는 가구단지나 가구거리에서 유명한 국내 중견 브랜드의 가구들을 구매를..." />
<meta property="og:site_name" content="ffeed | 브랜드 중고 가구 커뮤니티" />
<meta property="og:image"
content="https://anseras.s3.ap-northeast-2.amazonaws.com//1663661587221_story_main_image_20220920%2817%3A09%3A06%29.jpg" />
(3) og 태그의 이미지 URL에 섬네일 생성 서버가 접근하는데
https://anseras.s3.ap-northeast-2.amazonaws.com//1663661587221_story_main_image_20220920(17%3A09%3A06).jpg 여기에 접근 못하는 상황으로 보입니다.
동일한 이미지를 다운로드 받아 다른 서버에 올렸을때 잘 수집된 것으로 보아 제공하시는 서버측에서 차단하는 문제로 추정됩니다.
추가로 아래와 같이
<meta
property="og:description"
content="가구와 공간에 대한 관심이 증가하면서 미드 센추리 모던이라는 단어를 어렵지 않게 접해보았을 것으로 생각합니다. 미드 센추리 모던은(Mid-Century Modern) 1984년 미..."
/>
<meta property="og:site_name" content="ffeed | 브랜드 중고 가구 커뮤니티" />
<meta
property="og:image"
content="https://www.ffeed.me/_next/image?url=https%3A%2F%2Fanseras.s3.ap-northeast-2.amazonaws.com%2F%2F1663316034249_%255BFritz%2520Hansen%255D%2520Ant%2520Chair_Orange%25281%2529_1663316034182.webp&w=1920&q=100"
/>
og 태그 구성해서 다른 서버에 올려보니 제공하시는 서비스도메인의 이미지도 잘 표기됩니다.
즉, anseras.s3.ap-northeast-2.amazonaws.com 에서 접근차단하는 부분이 있을 것으로 예상됩니다.
아뇨. 의도적으로 슬래시를 붙이진 않았습니다.
anseras.s3.ap-northeast-2.amazonaws.com이 접근을 차단하는지 확인해본 결과 따로 차단시키는 부분은 없었고 해당 이미지 URL로 접근할 경우 액세스가 차단되었다는 화면도 안 뜨고 잘 접근하고 있습니다!
<meta
property="og:image"
content="https://www.ffeed.me/_next/image?url=https%3A%2F%2Fanseras.s3.ap-northeast-2.amazonaws.com%2F%2F1663661587221_story_main_image_20220920(17%3A09%3A06).jpg&w=1920&q=100"
/>
https://www.ffeed.me/_next/image?url= 이주소 뒤에 이미지 경로를 파라메터로 전달하니 잘접근되네요?
따로 차단시키는 부분은 없다고하셨지만, 카카오측에서 해당 이미지 접근 못하는 부분이라 추가로 처리해드릴 방법이 없을 것 같고
카카오에서 접근 가능한 위와 같이 주소 설정해주시면 정상표기될 것 같습니다.
네 알려주신 대로 주소 설정하니 잘 보여집니다! 답변해주시고 도와주셔서 감사합니다 