각 센터 및 클래스에 대한 메타태그를 달리 보여줄 계획
- og 타이틀
- og 이미지
이 두가지를 공유 시에 다른 데이터로 보여주려고 한다.
기존 방식
데이터가 고정적이고 변경될 일이 거의 없었다보니 클라이언트 상에서 하드코딩, 데이터를 관리하고 있었다. 때문에 대대적인 개편이 있었을 때에는 프론트에서 이미지 및 타이틀을 변경해야하는 작업이 수반되었다.
변경된 방식
클래스가 월별로 업데이트 및 추가되는 일이 많아져서 매번 프론트에서 관리하기 어려울 것으로 판단하게 되었고, 관리자에 og정보를 입력하는 항목을 추가하였다.
계획은 서버사이드로 og정보를 관리자로 받아오고, 이를 헤드에 넘겨주는 방식으로 진행하는 것이다.
브라우저를 열지도 않았는데 서버사이드가 가능한 것일까 - 의문이 있었는데, 다른 서비스를 참고하면서 가능할 것이라는 확신이 들었고, 테스트를 해보니 잘 되는 것을 알수 있었다. (강남언니에 등록된 수많은 병원 정보의 og가 모두 다르게 들어오고 있었다.)
적용을 하며
서버사이드를 통해 요청한 정보 (getInitialProps로 요청 진행 -> 링크를 공유하면서 해당 링크에 처음 진입할때만 필요한 데이터이므로 getServerSideProps가 아닌 initialProps로 요청함)를 페이지 컴포넌트가 프롭스로 받아 메타태그에 전달하도록 하였다.
링크를 공유하게 되면 해당 플랫폼의 크롤러가 작동하면서 페이지의 오픈그래프 데이터를 수집해 미리보기 형식으로 제공하는 것이다. 때문에 서버사이드가 동작하고 그 데이터를 og태그로 공유할 수 있었던 것이다. 실제 페이지를 연 것과 동일하게 취급하여 조회수가 찍히기도 한다.
