오픈 그래프(Open Graph)란?

인터넷 프로토콜의 한 종류로서 2010년에 페이스북이 발표했다.

대부분의 웹페이지가 메타 정보 중 decription과 title정도는 표출해주기도 하지만, 그것만으로 링크의 정보를 파악하기 힘든 경우가 많다. 이 문제점을 개선하기 위해 웹페이지에 대한 정보를 담고 있는 메타 정보의 사용 방식을 표준화하여 페이스북을 포함한 모든 sns 링크 공유 시 통일된 형식으로 정보를 표출하게 설계되었다. sns에 특화된 프로토콜이다.

 

 

SEO에 도움이 되는가

SEO에 직접적인 영향을 주지는 않는다. 하지만 오픈 그래프 태그를 사용했을 때 웹사이트의 사용자 유입, 전환률에 확실한 영향을 준다는 점에서 SEO 못지않은 큰 장점을 가지고 있다.

 

 

기본형

• og:title - 웹 페이지 제목
• og:type - 웹 페이지 유형 (ex, article, movie 등). 각 유형에 따라 추가적인 정보가 추가될 수 있음.
• got:image - 대표 이미지
• og:url - 링크할 주소

<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:title" content="웹사이트 이름"> 
<meta property="og:description" content="웹페이지 설명">

 

활용 예시

라인 랜딩페이지 클론 코딩 시 활용한 메타 태그들을 가지고 왔다. (OpenGraph 말고도 Twitter 메타태그도 있다.)

    <!-- OpenGraph -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="LINE | 라인은 언제나 사용자와 함께합니다." />
    <meta property="og:title" content="LINE | 라인은 언제나 사용자와 함께합니다." />
    <meta property="og:description" content="메신저 앱 그 이상의 경험을 제공합니다. 라인은 새로운 인프라 경험, 새로운 커뮤니케이션 경험을 모두에게 전달하고자 합니다." />
    <meta property="og:image" content="./images/og_bg.png" />
    <meta property="og:url" content="https://line.me/ko" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary" />
    <meta property="twitter:site" content="LINE | 라인은 언제나 사용자와 함께합니다." />
    <meta property="twitter:title" content="LINE | 라인은 언제나 사용자와 함께합니다." />
    <meta property="twitter:description" content="메신저 앱 그 이상의 경험을 제공합니다. 라인은 새로운 인프라 경험, 새로운 커뮤니케이션 경험을 모두에게 전달하고자 합니다." />
    <meta property="twitter:image" content="./images/og_bg.png" />
    <meta property="twitter:url" content="https://line.me/ko" />

 

 

기타 다른 속성들

 

추가 속성

• og:audio - 오디오 파일
• og:description - 웹 페이지 내용 요약. 
• og:locale - 웹 페이지 언어. 기본은 en-US. 한글로 바꾸려면 ko_KR
• og:site_name : 사이트 이름. og:title은 현재 페이지의 제목이고, og:site_name은 전체 사이트 이름.
• og:video - 비디오 파일

 

비디오의 경우

• og:video:url - og:image와 같음
• og:video:secure_url - https로 접속할 경우 표시할 이미지 주소
• og:video:type - 이미지 유형
• og:video:width - 너비
• og:video:height - 높이

 

오디오의 경우

• og:audio:url - og:image와 같음
• og:audio:secure_url - https로 접속할 경우 표시할 이미지 주소
• og:audio:type - 이미지 유형