Skip to content

og:image test

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

https://developers.facebook.com/docs/reference/plugins/like/#oggenerator

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

Case A – og:image 를 동적으로 생성

<!DOCTYPE html>
<html>
    <head>
        <title>CASE A</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <?php
        $images = array("001.png", "002.png", "003.png");
        $key = array_rand($images, 1);
        ?>
        <meta property="og:title" content="CASE A">
        <meta property="og:type" content="blog">
        <meta property="og:image" content="https://sewonist.com/labs/og_image/<?php echo($images[$key]); ?>">
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

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

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

https://developers.facebook.com/tools/debug

Case B – og:image 를 여러개 입력

<!DOCTYPE html>
<html>
    <head>
        <title>CASE B</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta property="og:title" content="CASE B">
        <meta property="og:type" content="blog">
        <meta property="og:image" content="https://sewonist.com/labs/og_image/001.png">
        <meta property="og:image" content="https://sewonist.com/labs/og_image/002.png">
        <meta property="og:image" content="https://sewonist.com/labs/og_image/003.png">
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

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

Case C – 자바스크립으로 값 변경

<!DOCTYPE html>
<html>
    <head>
        <title>CASE C</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta property="og:title" content="CASE C">
        <meta property="og:type" content="blog">
        <meta property="og:image" content="https://sewonist.com/labs/og_image/001.png">
        <script>
            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' );
                }
            }
        </script>
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.