Next.js에 메타 데이터 및 오픈 그래프를 적용하는 방법에 대해서 알려드리겠습니다.
https://angelplayer.tistory.com/589
// layout.tsx
export const metadata: Metadata = {
// MetaData
title: 'AngelPlayer',
description: 'AngelPlayer의 사이트입니다.',
// OpenGraph
openGraph: {
title: 'AngelPlayer',
description: 'AngelPlayer의 사이트입니다.',
images: 'IMAGE URL',
},
};
React나 Next 구 버전의 경우 html 태그 내에 meta 태그를 작성하는 방식으로 구현되었습니다.
반면 Next 13 버전 이상을 사용하신다면 프로젝트를 생성하였을 때 자동으로 metaData라는 식별자가 layout.tsx 파일에 존재하는 것을 확인할 수 있습니다.
메타 데이터는 metaData 내부에 바로 속성을 작성해주시면 되고,
오픈 그래프의 경우 내부에 openGraph라는 객체를 생성해주시고 정보를 입력하시면 됩니다.
메타 데이터의 경우 파일을 저장 후 배포하면 곧바로 적용되는 것을 확인할 수 있습니다.
반면 Open Graph의 경우 배포 후 일정 시간이 지나서야 적용이 되는 것을 알 수 있는데요.
제대로 적용되었는지를 바로 확인하기 위해서 Facebook의 개발 도구를 사용할 수 있습니다.
https://developers.facebook.com/tools/debug/
페이스북 개발자 도구에서 공유 디버거에 배포한 사이트의 주소를 입력하고 디버그를 클릭하면, 소셜 미디어에서 링크가 어떤식으로 출력되는지를 바로 확인하실 수 있습니다.
[Next] Next.js에서 폰트(글꼴) 변경하기 (Feat. Google, Local) (0) | 2024.07.07 |
---|---|
[React] 페이지 이동 시 스크롤 화면 최상단 이동하기 (2) | 2024.02.10 |
[React] react-router-dom v6 프로젝트에 적용하기 (1) | 2023.11.02 |
[PWA] React 프로젝트에 PWA 적용하기 (1) | 2023.08.23 |