HTML Head Meta Data : 웹페이지를 구성하는 여러 구조화된 정보들 명시

메타 데이터 표기방법 중 기본 방법(HTML5, title 등)을 제외한 방법 중 페이스북의 오픈그래프(Open Graph) 프로토콜

 

SNS(페이스북, 카카오톡 등)에서 웹 페이지를 공유하거나 URL을 입력시 해당 문자열이 URL이라는 것을 확인하면

미리 웹사이트의 HTML head의 오픈그래프 메타 태그를 가져온다.

 

기본적인 오픈그래프 메타데이터의 title(제목), description(설명), image(대표 이미지), url(표준 링크)이 있다.

(canonicanl link, 즉 표준 링크란 같은 콘텐츠를 가리키는 여러개의 URL중에서 대표 URL말합니다.

하나의 대상은 원칙적으로 하나의 링크만으로 참조 되어야한다?)

 

모든 SNS가 오픈그래프 사용법을 사용하진 않는다.

트위터에서는 제공하는 메타데이터가 있을경우 에는 자사의 메타데이터를 참조하고 아닐 경우 오픈그래프를 참조한다.

 

변경하고 미리보기가 바뀌지 않았을 경우

각 SNS마다 캐싱 시스템으로 인하여 소멸시효가 걸려있기 때문에 오픈그래프는 변경되어도 캐시된 웹문서가 내려지고 있을 수 있다.

SNS마다 캐시를 지울 수 있는 기능이 있다.

페이스북 : https://developers.facebook.com/tools/debug/

카카오톡 : https://developers.kakao.com/docs/cache

 

<head>
...
    <meta property="og:title" content="달코인">
    <meta property="og:url" content="https://dalcoin.kr/">
    <meta property="og:image" content="https://dalcoin.kr/images/1200900.jpg">
    <meta property="og:type" content="website">
    <meta property="og:description" content="달코인 서비스는 휴대폰 결제 시 적립 할인 받을 수 있는 멤버십 포인트 서비스 입니다. 휴대폰 결제시 간편하게 적립받고 현금처럼 사용하세요.">
 
 
    <meta property="twitter:card" content="summary">
    <meta property="twitter:title" content="">
    <meta property="twitter:url" content="https://dalcoin.kr/">
    <meta property="twitter:image" content="https://dalcoin.kr/images/1200900.jpg">
    <meta property="twitter:description" content="달코인 서비스는 휴대폰 결제 시 적립 할인 받을 수 있는 멤버십 포인트 서비스 입니다. 휴대폰 결제시 간편하게 적립받고 현금처럼 사용하세요.">
 
 
...
</head>


+ Recent posts