-
메타 태그 중복 생성 방지하기Tip 2022. 10. 27. 16:10728x90반응형
웹 사이트를 제작할 때 기본적으로 전체 웹 페이지에 적용되는 메타 태그를 동적인 주소와 같은 페이지에 접속했을 때만 변경해야 되는 상황이 있습니다.
Next.js의 경우 Head태그를 이용해 간단히 변경하고자 하는 페이지에서 다른 메타 태그를 추가해 줄 수 있지만, 이렇게 될 경우 메타 태그가 중복하여 들어가는 문제가 발생합니다.
이를 해결하는 방법은 무척 간단합니다.
바로 변경이 일어날 수 있는 메타 태그에 key 값을 추가해 주는 것으로 간단하게 해결할 수 있습니다.
// app.tsx <Head> ... <meta property="og:title" content="My Web Site" key="og_title" /> <meta property="og:description" content="website" key="og_description" /> ... </Head> // posts/[id].tsx <Head> ... <meta property="og:title" content={post?.title} key="og_title" /> <meta property="og:description" content={post?.description} key="og_description" /> ... </Head>이렇게 설정하면 아래와 같이 간단하게 변경할 수 있다.
key 설정 전 후 비교 반응형'Tip' 카테고리의 다른 글
React에서 조건부 렌더링을 사용하는 5가지 방법 (0) 2022.12.01 NodeJS 프로젝트 라이브러리 최신버전 자동으로 업데이트 하기 (0) 2022.11.12 window init 느리거나 useEffect 인식 안 되는 라이브러리 사용 팁 (0) 2022.09.02 react-query useInfiniteQuery 데이터 편하게 사용하기 (0) 2022.08.31 Lazy initialization로 useState 최적화하기 (0) 2022.06.27