링크 공유시에 이미지와 타이틀 미리보기 설정
카톡 메세지 공유, 블로그 링크 첨부 등 다양한 곳에서 유용하게 사용할 수 있다.
사용법
엄청 간단함.
<head> 태그 안에 <meta> 태그들을 넣어주면 된다.
<meta property="og:<속성명>" content="<내용>">필수 속성
og:title - 제목
og:type - 지정해주는 타입에 따라 다른 속성들이 require될 수 있음
og:image - 미리보기 이미지 url
og:url - 이동할 링크
<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>
선택 속성
og:audio - 오디오 파일 url
og:description - 설명
og:determiner - 타이틀 전에 붙여줄 관사 설정. enum (a, an, the, "", auto), 기본값은 "" (blank).
og:locale - 언어_지역 형태로 local 설정. 기본값은 en_US.
og:locale:alternate - 그외 사용가능한 locale 목록 배열
og:site_name - 웹사이트의 일부일 경우, 보여줄 사이트명
og:video - 비디오 파일 url
Structured Properties
og:image, og:video, og:audio 세 속성은 property에 추가적인 metadata가 붙을 수 있다.
og:image
og:image:url - og:image와 동일
og:image:secure_url - HTTPS를 요구하는 페이지에서 사용할 대체 URL
og:image:type - 이미지의 MIME type
og:image:width - 넓이
og:image:height - 높이
og:image:alt - 이미지 설명(캡션 아님). og:image를 지정할거면 og:image:alt도 지정해야함.
og:video
내용은 위와 같고, 사용가능한 추가적인 metadata는 다음과 같다.
og:video
og:video:secure_url
og:video:type
og:video:width
og:video:height
og:audio
og:audio
og:audio:secure_url
og:audio:type
배열
사용하려는 태그가 값을 여러개 가질 수 있는 경우, 그냥 <meta> 태그를 여러개 써주면 된다. 맨 위에 써준 태그가 우선순위가 제일 높다.
<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image" content="https://example.com/rock2.jpg" />structured properties들은 부모 태그 밑에 붙여써준다.
<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="https://example.com/rock2.jpg" />
<meta property="og:image" content="https://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />이 경우 rock.jpg는 넓이 300px, 높이 300px이고, rock2.jpg는 미지정, rock.jpg는 높이 1000px이다.
