[HTML5] 오픈 그래프 메타 태그

1. 개요

 오픈 그래프 메타 태그는 페이스북에서 다른 링크들을 표시할 때. 간략한 미리보기 등을 위하여 만들어졌으나,

현재는 카카오톡, 네이버 블로그 등 많은 곳에서 사용되고 있습니다.

사이트의 소유주, 개발자가 설정해놓으면 소셜 미디어 웹 사이트가 읽어들여서 예쁘게 표시해줍니다.

카카오톡의 예시입니다.

페이스북의 예시입니다.

2. 적용 방법

적용 방법은 다음과 같습니다.

<meta property="og:type" content="website">

<meta property="og:title" content="제목">

<meta property="og:description" content="설명">

<meta property="og:image" content="이미지주소">

<meta property="og:url" content="링크">

위 사진은 각 항목별 위치입니다.

3. 오픈 그래프 미리보기 이미지

이미지는 다소 중요하다고 생각되어서 따로 분리하게 되었습니다.

일단 이미지를 기입할때는 다음처럼 절대경로로 입력하셔야 합니다.

ex)

잘못된 예시 : "image.png"

바람직한 예시 : "http://링크/image.png"

또한, 이미지의 크기 양식에 대해서도 궁금해 하실 것 인데.

오픈그래프를 페이스북에서 선보였기 때문에 페이스북의 가이드라인에 따르는 것이 무난할 것 입니다.

페이스북 개발자 페이지(https://developers.facebook.com/docs/sharing/best-practices?locale=ko_KR)에 의하면

큰 이미지 :

고 해상도에서 원활하려면  1200x630

링크 페이지 게시물에 큰 크기로 표시 :  600x315

최대 용량 : 8 MB

작은 이미지 :

600x315보다 작고  200x200 이상.

여기서 큰 이미지와 작은 이미지에 대해서는 다음과 같이 다르게 표시 됩니다.

큰 이미지는

위 이미지와 같이 표시되는 형태입니다.

이미지와 제목, 설명이 있는 칸이 수직으로 배치됩니다.

하지만, 작은 이미지는 다음과 같이 표시됩니다.

네이버 블로그 이미지지만, 다음 처럼 표시가 됩니다.

이미지와 제목, 설명이 있는 칸이 수평으로 배치됩니다.

원하는 형태를 사용하셔도 되지만, 다만 주의 하셔야 할 점은.

카카오톡은 작은 이미지를 지원하지 않습니다.

다음과 같은 형태만을 지원하며, 작은 이미지를 하게 되면 이미지가 원치 않는 사이즈로 짤릴 수 있기 때문에 목적과 의도에 따라서 잘 사용하셔야 합니다.

4. 적용이 안되는 문제

태그를 정상적으로 적용을 시켰으나, 일부 사이트에서 제대로 적용되지 않는 문제가 발생하거나 확인을 했는데 안되는 문제가 발생할 수도 있다.

해당 현상은 페이스북, 카카오톡 등에서 해당 사이트의 오픈 그래프 메타태그에서 받은 정보들을 캐시하고 있기 때문인데.

그냥 기다리거나 해당 페이지를 다시 읽는 도구같은게 있으면 돌려보면 된다.

큰 문제는 아니고 기다리면 알아서 바뀌니 안심하도록 하자.

만약 하루가 지나도 안바뀌면 다른 페이지에 정상적으로 적용되는지 확인하여보고 해당 사이트에 문의하여서 해결하도록 하자.