NEXT.js 메타데이터, 오픈그래이프 적용기(2) - local환경에서 확인하는 법

이번 투표플랫폼 Picky프로젝트에 메타데이터를 적용하면서 난감했던 부분은 바로 잘 적용되었는지 검증하는 과정이었습니다. sns 공유상 메타데이터가 잘 적용되었는지 확인하기 위해서는 배포 후의 결과물을 공유하는 과정이 필요했고 이를 위해서는 한번의 테스팅을 위해

commit → push → PR → merge → main building → sns 공유

위의 과정을 거쳐야했습니다. 근데 여기서 테스팅 결과 어떠한 문제로 적용이 잘 안되었다면 이 과정을 계속 반복해야한다는 것이 너무 번거롭게 느껴졌습니다. 

 

이에 로컬 개발환경에서 쉽게 메타데이터 적용결과를 확인할 수 있는 방법을 구글링을 통해 발견했습니다. 

여러 방법 중 제가 채택한 방법을 설명드리겠습니다!😊

 

1. Chrome Extension 활용하기

로컬 환경에서 메타데이터를 빠르게 확인하기 위해 임시배포를 할 수 있는 Chrome Extension을 활용해 볼 수 있습니다. 

제가 사용한 Extension은 Localhost Open Graph Check입니다.

 

이 Extension은 로컬 서버에서 임시로 배포할 수 있게 해주며, 이 링크를 공유해서 Open Graph 태그가 제대로 적용되었는지를 쉽게 확인할 수 있습니다.

 

사용 방법

1. Chrome Web Store에서 Extension을 설치합니다.

2. 로컬 개발 환경에서 Extension을 누르면 바로 배포 결과 페이지가 나오는 것을 확인하실 수 있습니다. 

 

임시 배포의 링크가 제공되는 것을 확인하실 수 있습니다. 

이제 이 링크를 공유해서 메타 정보를 확인하면 될 것이라 생각했지만, 임시 배포 링크를 사용했을 때 이미지가 제대로 표시되지 않는 문제를 발견했습니다.

이유는 다음과 같습니다. 

프로젝트 내에 있는 이미지 데이터가 로컬 서버에 호스팅되어 있는 경우(ex.http://localhost:3000/picky/thumbnail.png), 이 이미지 파일들은 로컬 네트워크 내부에서만 접근할 수 있습니다.
외부에서 접근하려고 하면 로컬 호스트의 특성상 접근이 차단되기 때문에, 소셜 미디어 플랫폼이나 다른 외부 서비스가 로컬 이미지를 불러올 수 없습니다. 따라서 로컬 환경에서 메타 태그에 설정된 이미지가 외부에서 노출되지 않습니다.

 

이때 활용할 수 있는 방법은 사용중인 컴퓨터에서 local Open Graph Preview 사이트 사용하는 것입니다.

localhost에 접근이 가능한 동일한 컴퓨터 내에서 사이트를 이용하기 때문에 로컬 og 이미지도 확인이 가능합니다. 

 

2. Open Graph Preview 사이트 사용하기

저는 Open Graph Preview 사이트를 사용했습니다. 

1. 임시 배포 링크를 얻었다면, 사이트에 입력 후 check Website 버튼을 눌러 결과를 확인할 수 있습니다.

2. 이 사이트를 사용하면 다양한 플랫폼에서 링크가 어떻게 표시되는지 한눈에 확인할 수 있습니다.

3. 동적 메타 태그 확인하기

동적 페이지의 메타 태그를 확인하고 싶다면, 해당 라우트 페이지에서 Localhost Open Graph Check 임시 배포를 한 후 그 링크를 Preview 사이트에 적용하면 됩니다. 이렇게 하면 동적 콘텐츠의 메타데이터도 쉽게 검증할 수 있습니다.

실제 배포 후에도 제대로 적용된 것을 확인하실 수 있습니다.