https://ko.rakko.tools/tools/9/ 사이트에서 og를 디버그 해보면 제대로 된 정보를 불러 옵니다.
카카오계정 여기서 테스트 해보면 og 정보를 하나도 못불러 옵니다.
url은: https://bundamo.daboja.im 입니다.
어떻게 해야 할까요?
안녕하세요.
og 메타 정보는 서버에서 랜더링 부탁드립니다.
카카오 스크랩 서버는 Javascript를 이용한 클라이언트 랜더링을 참고하지 않습니다.
next.js 13 app directory 구조로 되어 있는 프로젝트입니다.
og 메타 정보를 서버 랜더링 한다는게 기존에 html에 하드코딩 되어 있는거를~
export const metdata로 옮겨서 랜더링 하면 서버 랜더링 되는걸로 알고 있는데 지원을 안하는건가요~? 현재 metadata를 추가해서 사이트를 다시 올려도 여전히 디버깅 툴에서 찾아낼 수 없습니다.
카카오 스크랩 서버는 클라이언트 랜더링 과정을 처리하지 않습니다.
필요한 og meta 정보는 서버에서 랜더링 하여 전달 부탁드립니다.
아래는 서비스측 접속 시, 응답 내용입니다.
즉, 현재 구현된 방식은 CSR 방식 입니다.
meta 정보가 클라이언트에서 랜더링되는 것을 볼 수 있습니다.
getServerSideProps 등을 사용하여 meta 영역을 서버측에서 랜더링 부탁드립니다.
getServerSiteProps는 app directory 구조에서 사용할 수 없는 상황이라, next.js 13 app directory에서는 head를 server side rendering 형태로 제공할 방법이 없어 보이네요~ 결론은 카카오톡 링크를 보이게 하기 위해서는 app directory 방식은 사용하면 안된다로 보여지는데요~
next.js 13 app directory 방식으로 링크가 보이고도록 된 샘플이 존재할까요~?
현재 postman으로 테스트 해보니 메타 태그는 서버 사이드 렌더링이 되지가 않네요~
app directory 관련 문서를 살펴보니 서버 컴포넌트와 클라이언트 컴포넌트를 구분하여 랜더링 할수 있는것으로 확인됩니다.
아래 문서를 참고하여 서버 컴포넌트 영역과 클라이언트 영역을 구분하시는게 좋을것 같습니다.
https://nextjs.org/docs/getting-started/react-essentials#thinking-in-server-components
위의 방식대로 했을 경우 meta 태그는 여전히 클라이언트 사이드 렌더링이 되는 현상이 있어서~
page router 구조로 변경하여 해결하였습니다. 도움 주셔서 감사합니다.