[HTML] OG Tag(Open Graph Tag)란? [3/12 Study]

https://doit-fwd.tistory.com/10

<meta> 태그와 오픈 그래프(Open Graph)

위 블로그를 참조하면서 공부했다

 

 

오픈그래프(open graph)

 

 

:오픈 그래프 프로토콜은 페이스북에서 만든 것인데요, 그 표기방법 중 페이스북의 오픈그래프 프로토콜을 사용하는 것이 바로 og입니다. 웹 페이지를 페이스북에 공유할 때 페이스북 게시물인 것처럼 만들기 위해 고안된 것이죠. 공유하는 웹 페이지를 직접 클릭해서 들어가 보기 전에 웹 사이트 정보를 미리보기로 구성해서 보여줍니다. 미리보기를 통해 보는 제목, 설명, 이미지는 HTML 문서의 head에 표기된 오픈그래프 프로토콜에 의해서 나타납니다.

미리보기 화면을 어떻게 구성할지 <meta> 태그 안에서 오픈 그래프를 사용해 설정합니다.

 

오픈 그래프의 기본 속성은 4가지

• 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="웹페이지 설명">

 

동작순서

1. 사용자가 링크를 입력창에 입력
2. 페이스북, 네이버 블로그, 카카오톡은 입력창의 문자열이 "링크"라는 것을 파악
3. 링크라는 것이 파악되면 크롤러는 미리 그 웹사이트를 방문해서 HTML head의 오픈그래프(Open Graph) 메타 데이터를 긁어온다.
4. 이중에서도 og:title, og:description, og:image가 각각 제목, 설명, 이미지의 정보를 나타낸다.
5. 그 정보를 바탕으로 미리보기 화면을 생성

 

 

트위터 카드(twitter cards)

: 페이스북, 네이버 블로그, 카카오톡 등 대다수의 서비스에서는 오픈그래프 프로토콜에만 준하여 미리보기를 보여주지만, 트위터는 이에 더하여 자체적인 메타데이터 표기법을 가지고 있다. 트위터 카드는 트위터의 트윗에서 페이스북의 오픈 그래프 태그와 유사한 동작을 한다.

<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)"> 
<meta name="twitter:title" content="콘텐츠 제목"> 
<meta name="twitter:description" content="웹페이지 설명"> 
<meta name="twitter:image" content="표시되는 이미지">