상대경로 og:image는 외않되?

---

<meta property="og:image" content="/static/image.png"/>

보통 img 태그의 src 넣어주는 것처럼 상대경로로 이미지를 넣어줬더니, 링크를 공유해도 썸네일로 설정한 이미지가 보이지 않는다.

검색해보니 상대경로로 지정된 경우는 작동하지 않고, 절대경로로 지정된 경우만 읽을 수 있는 것 같다.

 

또한 설사 상대경로로 지정하여 이미지가 보여지더라도, 페이스북에서 og:image를 설정할때에는 
" A string of Unicode characters forming a valid URL having the HTTP or HTTPS scheme. "
즉 HTTP 또는 HTTPS로 이루어진 유효한 URL 유니코드 문자열로 og:image의 content를 설정하도록 가이드하고 있기 때문에

content 값을 보여주고 싶은 이미지의 절대경로로 설정해주는 것이 좋고, 그래야하는게 맞다.

만약 그냥 무료 이미지 같은 것을 사용한다면, 해당 이미지의 URI를 붙여넣으면 되겠지만, 보통 서비스를 개발할때 서비스 자체 이미지를 보여주고 싶을 것이다. 이런 경우에는 두가지 방법이 있을 것이다.
해당 이미지가 호스팅 된 URI를 서버로부터 받을 수 있는 경우에는 무료 이미지를 사용할때처럼 그냥 붙여넣으면 된다.
하지만 프론트에서 정적인 이미지로 가지고 있다면

아래와 같이 배포된 URI를 붙여주고 해당 이미지의 경로를 뒤에 작성하여 이미지에 접근할 수 있도록 작성할 수 있을 것이다.

<meta property="og:image" content="www.deploy.com/static/image.png"/>

 

 

만약 절대 경로로 지정을 했음에도 이미지가 나오지 않거나, 변경한 이미지로 나오지 않는 경우 각 플렛폼 별 og 캐시 초기화를 해주면 적용된다.

 

 

레퍼런스
https://veonr.com/blog/relative-vs-absolute-og-image-video-urls