Open Graph 이해하기

open Graph란? 

오픈 그래프는 소셜 미디어에 특화된 프로토콜이라고 할 수 있다. 소셜 미디어에서 정보 공유는 웹사이트 링크를 공유하는 방식으로 아주 흔하게 이루어 지고 있고, 우리가 익히 알고 있는 링크 공유 시 나타나는 웹사이트 미리보기는 오픈 그래프 태그를 통해서 생성된다. 

간단히 말하자면 링크를 보낼때 사용자에게 어떤 사이트인지 간략하게 보여주기 위한 화면이다.

 

예시화면

태그 사용법

<meta property="og:type" content="website" />
    <meta property="og:site_name" content="내숨캐" />
    <meta property="og:title" content="내 안에 숨어있는 직업캐 찾기!" />
    <meta
      property="og:description"
      content="누구나 찰떡인 직업이 있어요! 내 안에 숨어있는 직업캐를 찾아보세요!"
    />
    <meta property="og:image" content="/images/thumbnail.jpg" />
    <meta
      property="og:url"
      content="https://prismatic-monstera-4c9d6a.netlify.app/"
    />

<Naver 블로그, 카카오톡 미리보기 설정>

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="..."> -> 웹페이지 설명(제목 아래에 표시)

---

    <!-- Twitter Cards -->
    <meta property="twitter:card" content="summary" />
    <meta property="twitter:site" content="내숨캐" />
    <meta property="twitter:title" content="내 안에 숨어있는 직업캐 찾기!" />
    <meta
      property="twitter:description"
      content="누구나 찰떡인 직업이 있어요! 내 안에 숨어있는 직업캐를 찾아보세요!"
    />
    <meta property="twitter:image" content="/images/thumbnail.jpg" />
    <meta
      property="twitter:url"
      content="https://prismatic-monstera-4c9d6a.netlify.app/"
    />

<트위처 미리보기 설정>

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