Tip
메타 태그 중복 생성 방지하기
Kir93
2022. 10. 27. 16:10
728x90
반응형
웹 사이트를 제작할 때 기본적으로 전체 웹 페이지에 적용되는 메타 태그를 동적인 주소와 같은 페이지에 접속했을 때만 변경해야 되는 상황이 있습니다.
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>이렇게 설정하면 아래와 같이 간단하게 변경할 수 있다.
반응형