본문 바로가기

react-helmet-async

 (1)
OG(오픈그래프) 이미지를 공연 포스터로 동적으로 설정하고 싶다면? 안녕하세요! WEB 김채현입니다. 티켓 사이트에서 공연 페이지를 공유할 때는 공연의 포스터가 공유가 되는 것이 일반적인데요,비트는 공연 페이지를 공유해도 BEAT 이미지가 보여지고 있습니다.이유는 바로 제가 index.html을 아래와 같이 작성했기 때문입니다.React는 SPA로 CSR방식으로 렌더링을 하기 때문에 하나의 index.html을 두고, 자바스크립트를 활용하여 데이터만 변경됩니다.공통적으로 적용되는 index.html에 OG 이미지를 "og_img.png"로 지정해주었기 때문에 카카오톡에서 페이지를 공유할 때 모든 페이지에서  항상 동일한 BEAT 이미지나 제목이 표시되는 문제가 발생하고 있었습니다. 그렇다면 어떻게 동적으로 각 공연에 맞는 OG를 설정할 수 있을까요? 해결 방법은 바로 r..

티스토리툴바