[Next.js] Meta Data 및 Open Graph 적용하기 (Feat. Next 14)

Next.js에 메타 데이터 및 오픈 그래프를 적용하는 방법에 대해서 알려드리겠습니다.

https://angelplayer.tistory.com/589

 

 

 

 

1. Meta Data 및 Open Graph 작성하기

// 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라는 객체를 생성해주시고 정보를 입력하시면 됩니다. 

 

 

 

 

2. Open Graph 적용이 완료되었는지 확인하기

메타 데이터의 경우 파일을 저장 후 배포하면 곧바로 적용되는 것을 확인할 수 있습니다.

 

반면 Open Graph의 경우 배포 후 일정 시간이 지나서야 적용이 되는 것을 알 수 있는데요.

 

제대로 적용되었는지를 바로 확인하기 위해서 Facebook의 개발 도구를 사용할 수 있습니다.

 

 

https://developers.facebook.com/tools/debug/

공유 디버거 - Meta for Developers

 

페이스북 개발자 도구에서 공유 디버거에 배포한 사이트의 주소를 입력하고 디버그를 클릭하면, 소셜 미디어에서 링크가 어떤식으로 출력되는지를 바로 확인하실 수 있습니다.