OG(Open Graph)란?

사용자가 클릭하기 전에 크롤러가 해당 웹사이트를 방문하여 HTML의 head의 메타데이터를 크롤링하여 미리 보기 화면을 생성해 줍니다.
대표적으로 카카오톡에서 공유한 링크 또는 티스토리에서 공유되는 링크 등이 있습니다.

OG태그에 사용될 이미지

최소 600xp이상 // 1200px 이미지또는 1대1로 대응되는 크기의 이미지를 권장함

태그 사용법

기본적으로 웹에 설정해주는 og메타태그

<!-- 필수 og 태그 -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
 
<!-- 필수는 아니지만, 추천하는 og 태그 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

네이버블로그 , 카카오톡 미리보기 설정

<meta property="og:title" content="콘텐츠 제목">
<meta property="og:url" content="웹페이지 URL"> 
<meta property="og:type" content="웹페이지 타입(blog, website 등)">
<meta property="og:image" content="표시되는 이미지"> 
<meta property="og:site_name" content="웹사이트 이름(URL과 다름)">
<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="표시되는 이미지)">

모바일 앱 미리보기 설정 (모바일 앱이 존재하는 경우 앱으로 연결 시 노출함.)

iOS용, Android용이 있습니다.

<meta property="al:ios:url" content="ios 앱 URL">
<meta property="al:ios:app_store_id" content="ios 앱스토어 ID">
<meta property="al:ios:app_name" content="ios 앱 이름"> 

<meta property="al:android:url" content="안드로이드 앱 URL">
<meta property="al:android:app_name" content="안드로이드 앱 이름">
<meta property="al:android:package" content="안드로이드 패키지 이름">
<meta property="al:web:url" content="안드로이드 앱 URL">