아래 개발자 도구 사진에서 해당 페이지의 og가 잘 나오는데
카톡에서 링크를 전송하고 보면 default로 설정한 meta 값으로 뜹니다.
아래는 코드 사진입니다.
default로 설정한 meta는 _app.tsx에 적용되어있고
따로 제가 설정한 meta는 세부 페이지(pages/detail/[id].tsx)에 적용되어 있습니다.
하지만 위에서 말씀드렸다시피 default로 설정된 meta로만 미리보기가 뜹니다. 혹시 몰라 공유 디버거 사진도 첨부합니다!
카카오측 서버가 접근했을때 해당 메타 데이터를 전달하기 때문에 해당 정보가 표시되는 것인데요.
클라이언트 브라우저에서 동적으로 로딩한 내용은 표기하지 못합니다.
서버사이드렌더링으로 서버측호출에 og 태그를 제공해주셔야합니다.
<meta property="og:title" content="멘투멘 - 멘토와 멘티를 잇다"/>
<meta property="og:description" content="멘토에게 궁금하거나 알고 싶었던 전공지식에 관해 물어보세요!"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="/images/meta-iPhone-image.png"/>
<meta property="og:locale" content="ko_KR"/><meta property="og:site_name" content="멘투멘"/>