Facebook 이 제안한 프로토콜로 이중 메타데이터에 대한 부분을 신경써야 한다.
오픈그래프 태그가 잘 구성되어 있으면, 주변에 공유할 때 풍성한 컨텐츠를 보여줄 수 있다.
카카오톡에서 링크를 공유했을 때, 링크만 공유했는데도 예쁘게 사진이나 타이틀 등이 표시되는 것.
그것이 오픈 그래프이다.
<meta> 태그를 사용해서 웹 페이지의 상단에 추가해주면 되며,
Open Graph 사이트에는 IMDB 사이트를 예시로 들고 있다.
<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
Basic Metadata
기본이 되는 메타데이터로 제목, 타입, 이미지, URL이 포함된다. IMDB에서는 아래와 같이 사용되었다.
- og:title - The title of your object as it should appear within the graph, e.g., "The Rock". (
- og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
- og:image - An image URL which should represent your object within the graph.
- og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/".
Optional Metadata
제목처럼 선택적인 메타데이터로 오디오, Description, determiner, local, local:alternate, site_name, video 등이 있는데
카카오톡에서 공유되는 것을 고려하면 Description을 특히 신경써야겠다.
- og:audio - A URL to an audio file to accompany this object. (오디오 정보)
- og:description - A one to two sentence description of your object. (1~2줄의 설명)
- og:determiner - The word that appears before this object's title in a sentence. An enum of (a, an, the, "", auto). If auto is chosen, the consumer of your data should chose between "a" or "an". Default is "" (blank).
- og:locale - The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US. ( 지역)
- og:locale:alternate - An array of other locales this page is available in. (가능 지역의 배열)
- og:site_name - If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb".(보여줄 사이트 이름. 사이트 도메인이 복잡한 경우 필요하겠다)
- og:video - A URL to a video file that complements this object.(비디오 정보)
Open Graph 사이트: https://ogp.me/
'Front-End > 프론트엔드 아카데미' 카테고리의 다른 글
Deep Link, Universal Links, App Link (0) | 2022.10.06 |
---|---|
LCP, FID, CLS (0) | 2022.09.20 |
SEO(Search Engine Optimization) Tip (0) | 2022.09.16 |
PoC 와 Prototype (0) | 2022.09.16 |
RFC(Request for Comments) (0) | 2022.09.15 |
댓글