동적 라우팅 페이지에서 url 공유 시 미리보기 적용 안되는 현상

Scrap(미리보기, 스크랩)
1

정적 페이지에서는 제대로 동작하는데, 같은 메타태그를 입력한 동적 라우팅 페이지에서는 미리보기가 없다며 동작하지 않습니다.

https://devtalk.kakao.com/t/scrap-url/24950

여기를 참고해서

  1. og:url 제거 했습니다.
  2. https 사용중입니다.
  3. curl 로 확인했을 때,200 OK가 아닌 200이 나오는데 잘 되는 것인지 모르겠습니다.
    그리고 curl 결과에 해당 meta tag만 비어서 출력됩니다.
  4. redirection 발생하는 곳은 없습니다.
  5. text/html 입니다.

해결되지 않아 pr만 올린 상태이며 pr preview 사이트 https://space-dev-club-front-ckp89aigk-junghoon-p.vercel.app/ong/hoho 에서 확인할 수 있습니다.
Next.js 환경에서 작업했고 vercel 배포입니다.

카카오 공유만 안되는 것이 아니고 다른 사이트, sns에서 공유 할때도 동작하지 않아서 여기다 질문을 드려도 되나 싶었는데… 며칠 째 고민중이고 stackoverflow에서도 해결책을 찾지 못해서 부득이하게 글을 남깁니다…

2

https://space-dev-club-front-ckp89aigk-junghoon-p.vercel.app/ong/hoho

미리 보기 하고자 하시는 주소가 위 주소인가요?
포스트맨으로 호출해보니 OG태그가 없습니다.

브라우저로 보니 OG태그가 있는 걸로 봐서 페이지 로딩 후, OG태그 영역을 로딩하는 것 같은데요.
스크랩서버가 접근 했을때 OG태그가 없다면 수집할 수 없습니다.

react-helmet 같은 도구로 서버사이드 랜더링 해서 출력해보시면 좋을 것 같아요.

3

하드코딩, getServerSideProps로 SSR 한 경우 모두 동작하지 않았습니다. 찾아보니 Next에서는 react-helmet 보다는 next/head를 써라는 얘기가 많은데 react-helmet으로 해결이 될까요??

4

helmet으로 해결된다는 의미가 아니고,

서버사이드랜더링을 적용하시라는 의미였어요.

제공하시는 서비스에 적합한 도구 사용하셔서 서버사이드랜더링 구현하시면 될 것 같아요.