reese.dev

OG Tag

date
Sep 12, 2023
slug
og-tag
author
status
Public
tags
Etc
summary
type
Post
thumbnail
category
updatedAt
Mar 7, 2024 11:44 AM

OG란?

풀 명칭은 Open Graph Protocol이라고 합니다.
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
Open Graph protocol
https://ogp.me/
Open Graph protocol
오픈 그래프 프로토콜은 어떠한 인터넷 웹사이트의 HTML 문서에서
head -> meta 태그 중 “og:XXX”가 있는 태그들을 찾아내어 보여주는 프로토콜이다. - wiki
 
오픈 그래프 프로토콜은 SNS, 채팅 서비스 등에서 주소 입력 시 웹 페이지에 대한 기본 정보를 미리 보기 형태로 제공해 주는 메타태그입니다. 해당 정보는 메타태그에 표시할 기본 정보(제목, 설명, 이미지)를 입력하고 크롤러가 해당 링크의 HTML 메타 데이터를 가져와서 링크 미리 보기 정보를 화면에 뿌려주는 것입니다. 사용자는 이 미리 보기를 통해 해당 웹 페이지에 대한 정보를 파악하고 접속 여부를 판단하게 됩니다.
 
웹 페이지의 기본 정보(미리 보기)를 보여주기 위한 메타 태그 작성은 아래와 같습니다.
<meta property="og:url" content="웹페이지 URL" />
<meta property="og:type" content="해당 링크(웹페이지)의 타입" />
<meta property="og:image" content="해당 링크(웹페이지)에 대한 대표 이미지 URL" />
<meta property="og:title" content="해당 링크(웹페이지)의 제목" />
<meta property="og:description" content="해당 링크(웹페이지)에 대한 간략한 설명" />
웹 페이지에 대한 정보를 메타 태그 안에 입력해 주면 해당 데이터가 노출되는 형태인데요.
위와 같이 정보를 입력해도 간혹 트위터에서 노출이 되지 않는 경우도 발생합니다. 그런 경우 트위터는 그에 맞는 코드를 정의해 주어야 합니다.
 
작성 예시 (트위터)
<meta name="twitter:card" content="트위터 카드 타입" />
<meta name="twitter:title" content="해당 링크(웹페이지)의 제목" />
<meta name="twitter:description" content="해당 링크(웹페이지)에 대한 간략한 설명" />
<meta name="twitter:image" content="해당 링크(웹페이지)에 대한 대표 이미지 URL" />
이렇게 작성한 OG 이미지가 제대로 반영이 되었는지 확인하고 싶을 때 아래의 링크에서 테스트해 볼 수 있으니 알아두시면 좋을 것 같습니다.

한 곳에서 다양하게 테스트해 볼 수 있는 곳

https://metatags.io/https://www.opengraph.xyz/
 
테스트 하다보면 때로 이미지 변경 시 바로바로 교체되지 않는 현상들이 종종 발생하는데 이 부분은 크롤러가 각 서비스마다 도는 기간이 다를 수 있기 때문입니다.
(예: 트위터의 경우 공식 문서상 링크가 트윗에 게재 후 7일간 캐시 된다고 명시되어 있음.)
 
그래서 이미지를 처음 지정 후 변경이 어려운 경우 각 서비스별로 초기화 또는 해당 현상 해결 작업을 도와주기도 합니다. 카카오톡 Kakao Developers 에서 제공하는 API를 사용하여 초기화가 가능합니다.
그 외 오픈 그래프에 사용되는 이미지도 사이즈를 정의할 수 있는데요. 해당 정의는 필수가 아닌 선택 사항입니다.
 
작성 예시 (이미지 사이즈)
<meta property="og:image:width" content="사이즈 숫자 지정" /> <meta property="og:image:height" content="사이즈 숫자 지정" />
관련 참고 문서 링크를 보시면 아시겠지만 이미지 사이즈도 나름의 정의가 있습니다. 오픈 그래프를 최초로 만든 곳이 페이스북이기에 페이스북 공식 문서를 기준으로 확인하였는데요. 최소 이미지 사이즈는 “200px X 200px”이며, 페이스북에서 사용되는 기본 사이즈는 “1200px X 630px”입니다.
오픈 그래프 타입(og:type)에 따라 나타나는 유형이 다른데요. 위에서 보여준 타입과 다르게 넓은 이미지를 사용하는 경우 최소 이미지 사이즈는 “600px X 315px”이며, 되도록 이미지 제작 시 “1.91:1” 비율을 유지해야 한다고 합니다.
notion image
링크 입력 시 나타나는 미리 보기 정보 (카카오톡)