728x90
반응형
og 적용해달라는 요청이 왔었는데, og에 대해 몰라서 알아보기로 했습니다.
og. 즉, open graph는 html meta 태그 종류 중 하나입니다.
SNS 등에 url을 공유 할 때 미리 보여주는 이미지나 그 링크에 대한 설명, 제목을 표시하기 위한 태그입니다.
자세한 설명 : https://ogp.me/
Open Graph의 기본 태그
- og:title - 사이트의 제목
- og:type - 사이트객체의 유형. 예) website, video.movie
- 지정한 유형에 따라 다른 속성도 필요할 수 있다.
- og:image - 사이트를 나타내는 대표 이미지의 URL
- og:url - 영구 ID로 사용될 사이트의 정규 URL
Open Graph의 옵션 태그
- og:audio - 사이트와 함께 사용할 오디오 파일의 URL
- og:description - 사이트에 대한 1~2 문장 설명
- og:determiner - 문장에서 사이트 제목 앞에 나타나는 단어 (a, an, the, "", auto)의 열거형. 기본 값은 공백
- og:locale - 사이트의 언어 선택. 기본값은 en_US
- og:locale:alternate - 이 페이지를 사용할 수 있는 다른 locale의 배열
- og:site_name - 전체 사이트는 title로 표시하면 site_name은 좀 더 세부적인 카테고리 정도의 레벨
- og:video - 사이트를 보완하는 비디오 파일의 URL
예제)
<html>
<head>
<title>TISTORY</title>
<meta property="og:title" content="TISTORY">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.tistory.com">
<meta property="og:image" content="{노출 이미지 링크}">
<meta property="og:description" content="나를 표현하는 블로그를 만들어보세요.">
</head>
<body>
</body>
</html>
이상으로 html 메타 태그 중 opengraph에 대한 설명이었습니다.
728x90
반응형
'front-end > html' 카테고리의 다른 글
| [SpringBoot] Thymeleaf layout dialect (thymeleaf 레이아웃 적용하기) (0) | 2021.01.17 |
|---|---|
| [SpringBoot] Thymeleaf 설정 및 Thymeleaf HTML Code(th element) 사용법 (0) | 2021.01.17 |
댓글