오픈그래프(og) 로컬에서 테스트하기

 

 

 

오픈그래프에 고통받던 하루.. 굳이 배포를 안해도 로컬환경에서 테스트할 수 있는 방법을 알게 되었습니다.

special thanks to 나의 영원한 사수님

 

알려주신건 NGROK을 이용한 방법이었으나 회원가입도 귀찮았던 저는 크롬 익스텐션을 사용하기로 했습니다.

 

오픈그래프는 배포된 환경에서만 적용이 가능하기에, 로컬호스트를 카카오톡에 아~무리 공유해도 읽어올 수 없는데요,

임시로 배포해주는 크롬 익스텐션을 활용해서 테스트할 수 있었답니다.

 

 

1. og에 이미지 추가

  openGraph: {
    title: 'title',
    description: 'og test',
    images: [
      {
        url: `${
          process.env.NODE_ENV === 'development'
            ? 'http://localhost:3000'
            : process.env.NEXT_PUBLIC_BASE_URL
        }/images/test.png`,
        width: 1200,
        height: 630,
        alt: 'crying cat',
      },
    ],
    locale: 'ko_KR',
    type: 'website',
  },

 

2. 로컬 서버 띄우기

 

3. localhost open graph checker 클릭 -> 링크 복사

15분 후에 자동으로 삭제된다고 하나, 불안하다면 테스트 끝나고 바로 지우기~

 

4. 공유 디버거에서 테스트

잘 뜹니다. 야미

 

4-1. og 테스트를 위한 공유 디버거들

Kakao Developers 공유 디버거

https://developers.kakao.com/tool/debugger/sharing

카카오계정

 

Meta for Developers 공유 디버거

https://developers.facebook.com/tools/debug/?locale=ko_KR

공유 디버거 - Meta for Developers

 

Slack 공유 디버거

https://api.slack.com/tools/unfurl-debugger

워크스페이스 찾기 | Slack

 

 

 

감사합니다.

 

 

ref

https://www.playnexacro.com/#show:techtip:9011

play nexacro:플레이 넥사크로

https://co1nam.tistory.com/106#google_vignette

로컬 개발 환경에서 오픈 그래프 테스트하기

https://velog.io/@calmlake79/sharing-debugger

공유 디버거