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

Open Graph?

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

SNS에서 특정 웹 페이지를 공유하면 짤막한 미리 보기 화면이 나타나면서 마치 그 SNS의 게시물인 것처럼 자연스럽게 삽입이 됩니다.

 

요소

일반적인 미리 보기 설정

 : 블로그나 카카오톡, 페이스북 등 일반적인 SNS로 공유를 하려고 할 때, 설정할 정보

<meta property="og:type" content="website"> 
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="http://www.mysite.com/myimage.jpg">
<meta property="og:url" content="http://www.mysite.com">

 

트위터 미리보기 설정

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

 

위처럼 웹 페이지의 정보를 위의 양식에 맞춰서 작성을 하고, 작성한 정보를 <header> 태그 안에 넣어주면 됩니다.

 

위의 방법을 가지고도 제대로 만들지 못하겠을 때에는 좀 더 간편하게 만들어 주는 사이트를 알려드립니다.

 

반응형

 

Meta Tag

https://metatags.io/

 

 1. 해당 사이트에서 만들고자 하는 사이트의 URL를 넣고, "PARSE META DATA" 버튼을 누릅니다.

 2. Title과 Descrlption 등 정보를 입력하고 "GET CODE"를 눌러줍니다.

 3. 위와 같이 Tag 정보들이 뜨는걸 copy 해서 header에 넣어주면 됩니다.

단, 이미지 정보는 업로드를 하여도 미리 보기용 이기에 해당정보만 변경해 주면 됩니다.

 

확인 사이트

1. 오픈 그래프 세팅 확인 사이트

https://developers.facebook.com/tools/debug/

공유 디버거 - Meta for Developers

 

2. 카톡 미리 보기 캐시 초기화 사이트

https://developers.kakao.com/tool/debugger/sharing

카카오계정

 : 세팅으로 카톡을 보내다 보면 해당 url의 메타데이터를 캐싱하기 때문에 데이터를 수정해도 그대로인 경우가 있기에, 이때 캐시 초기화를 한 후에 다시 보내면 오픈 그래프가 적용된 것을 확인할 수 있습니다.