HTML 카카오, 트위터, 페이스북 등 OG태그 설정

 

 

OG(open graph)

오픈 그래프 는 사용자가 URL을 클릭하기 전에 크롤러가 웹페이지를 먼저 방문하여 미리보기 화면을 생성해주는 것입니다.

이를 통해 오픈 그래프 가 아래 그림과 같이 URL의 내용을 요약하여 SNS 등에 공유할 때 최적화된 데이터를 제공해줍니다.

 

 

 

 

OG 태그

가장 기본적인 OG 태그는 <meta property="og:유형" content="내용"> 으로 작성합니다.

아래의 코드 스니펫에 명시된 모든  property 를 명시하면 URL을 공유할 때 미리보기가 생성됩니다.

기본 OG 태그는 네이버, 카카오 등에서 지원됩니다.

<meta property="og:type" content="website">
<meta property="og:url" content="https://prd-space.tistory.com">
<meta property="og:title" content="프로덕트 스페이스">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="프로덕트 스페이스입니다.">
<meta property="og:site_name" content="프로덕트 스페이스">

 

 

트위터

트위터는 별도의 메타 태그를 사용하고 있습니다.

 <meta name="twitter:유형" content="내용"> 으로 작성하며, 아래의 내용을 작성할 수 있습니다.

<meta name="twitter:card" content="card"> 
<meta name="twitter:title" content="프로덕트 스페이스"> 
<meta name="twitter:description" content="프로덕트 스페이스입니다."> 
<meta name="twitter:image" content="이미지">

 

 

모바일 어플리케이션

모바일 어플리케이션이 존재한다면, 앱으로 연결하는 경우 미리보기를 제공할 수 있습니다.

 

<--iOS-->
<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 앱 이름"> 

<--Android-->
<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">

 

 

OG 이미지 사이즈

OG 이미지 사이즈에는 제약이 있습니다.

일단, 허용된 최소 이미지 크기는 200 x 200 픽셀이며, 파일 크기는 8MB 이하여야 합니다.

고해상도 기기에서 최상의 화질로 표시되려면 최소 1200 x 630픽셀 이상의 이미지를 사용합니다.

 

아래는 각 웹페이지에 최적화될 수 있는 OG 이미지 사이즈입니다.

 

구분	가로	세로
카카오톡	800	400
트위터	1200	630
인스타그램	320	320
페이스북	600	315