쿠...sal: [컴][웹] open graph meta tag

태그 / 메타태그 / 페북 메타태그 / 카카오톡 메타 태그 / 텔레그램 메타태그

open graph meta tag

meta property 중 open graph 관련 meta 를 수정할일이 생겼다. 몇가지 알게된 사실이 있어서 적어놓는다. 아래는 필자가 사용한 meta tag 이다.

<meta property="og:title" content="사이트 제목">
<meta property="og:type" content="website">
<meta property="og:description" content="이 사이트는 개인 사이트 입니다.">
<meta property="og:url" content="https://www.mysite.com:443">
<meta property="og:image" content="http://www.mysite.com/apple-touch-icon.png">
<meta property="og:image:secure_url" content="https://www.mysite.com/apple-touch-icon.png">
<meta property="og:image:width" content="180" />
<meta property="og:image:height" content="180" />

og:image 의 content 는 path 가 아니라 url 이다.[ref. 2]

처음에는 그저 path 를 적으면 되는지 알았다. 하지만 그러면 메신저등에서 제대로 동작하지 않는다.

https 를 사용할 때는 og:image:secure_url 을 사용하자.

이것은 확실치 않지만, ref. 1의 글에서도 https 는 secure_url 을 사용하라고 하기도 하고, 실제로 og:image 에 https url 을 넣고 텔레그램(telegram) 에서 테스트를 해봤는데 잘 동작하지 않았다.

og:image 의 url 을 변경하지 않으면 다시 updaet 하지 않는 경우도 있다.

이것은 적어도 facebook 에서는 맞는 이야기 같다. ref. 3 을 참고하자.

메신저의 cache 된 image 를 purge 하는 법

각 메신저마다 refresh 하는 법을 제공한다.

카카오톡:

카카오계정이 필요하다.
미리보기(스크랩) 캐시 삭제 기능이 추가되었습니다 - Scrap(미리보기, 스크랩) / Scrap FAQ - 카카오 데브톡

텔레그램

webpagebot(https://telegram.me/webpagebot) 으로 가서,
/updateview 를 치면, link 를 넣으라고 한다. 그럼 link 를 넣으면 해당 link 가 update 된다.
Did you know you can update the link preview on Telegram? | Telegram Geeks

References

The Open Graph protocol
https://stackoverflow.com/a/9858694
Webmasters - Sharing, Facebook developers

쿠...sal

[컴][웹] open graph meta tag