og:image test – sewonist.com

페이스북에 웹페이지를 공유 할 때 Open Graph Tags 를 이용하여 웹페이지의 정보를 지정 할 수 있습니다. Open Graph Tags 는 아래의 링크에서 만들 수 있습니다.

이 중 og:image 프로퍼티는 사이트의 썸네일을 지정합니다. 기완형님의 요청으로 og:image 에 몇가지 테스트를 해보았습니다.

[html] CASE A <meta property="og:image" content="https://sewonist.com/labs/og_image/<?php echo($images[$key]); ?>”>

TODO write content

[/html]

첫번째 케이스는 PHP 를 이용하여 매번 페이지에 접속 할 때마다 og:image 를 동적으로 바뀌게 해보았습니다. 결과는 페이스북의 경우 해당 데이터를 페이스북 자체에 캐쉬 하기 때문에 초기 1회에 지정된 이미지가 지속적으로 보였습니다.

이를 갱신하기 위해서는 아래 디버그에서 최신 정보로 갱신 할 수 있습니다.

TODO write content

[/html]

og:image 를 여러개 등록하면 위의 스크린샷에서 보는 것과 같이 등록한 og:image 에서 썸네일을 선택 할 수 있습니다.

[html] CASE C <meta property="og:image" content="https://sewonist.com/labs/og_image/001.png"> m = document.getElementsByTagName( ‘meta’ ); for ( i in m ){ console.log( m[i] ); if( m[i].getAttribute( ‘property’ ) == ‘og:image’ ){ m[i].setAttribute( ‘content’, ‘https://sewonist.com/labs/og_image/002.png‘ ); } }

TODO write content

[/html]

요게 좀 흥미있네요. 자바스크립트를 통해 이미지 값을 변경 해 보았습니다. 결과는 생각 보다 싱겁게 자바스크립트로 변경한 값은 반영 되지 않았습니다. 아마 예상컨테 페이스북의 봇이 자바스크립트 처리까지는 안해주는 것 같습니다.(당연한건가;;;)