meta og태그 (Open Graph Tag)에 대해 알아보자.
샘플 코드
<meta property="og:type" content="website">
<meta property="og:title" content="여기는 og title | 타이틀, 사이트 제목">
<meta property="og:description" content="여기는 og description | 사이트에 대한 설명">
<meta property="og:image" content="여기는 대표 이미지 URL">
<meta property="og:url" content="여기는 사이트 URL">
ex)
<meta property="og:type" content="website">
<meta property="og:title" content="sk의 로그 | sk' log">
<meta property="og:description" content="이곳은 저의 메모 겸, 공부한 내용을 끄적거리는 곳입니다. ">
<meta property="og:image" content="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc9oIX8%2Fbtq5SSbr02h%2FZhyl2Rdn6Hq54xlv0u2HM1%2Fimg.jpg">
<meta property="og:url" content="https://psklog.tistory.com/140">
이렇게 URL 링크를 공유했을 때,
URL만 공유했지만,
제목, 이미지, 설명, 주소등이 함께 보여진다.
여기서 보여지는 콘텐츠들을 다룰 수 있게 해주는 것이 바로 og (오픈 그래프) 태그다.
meta tag (메타 태그) 란?!
HTML에 적용되는 특성, 기본정보를 작성하는 태그이다.
<head>에 작성되며,
브라우저 혹은 검색 툴에 웹 페이지의 정보를 알려준다.
참조 :
https://www.w3schools.com/tags/tag_head.asp
HTML head tag
HTML Tag Example A simple HTML document, with a
This is a heading
This is a paragraph.
Try i
www.w3schools.com
오픈 그래프 태그 (Open Graph Tag : og tag)
og 태그는 헤드태그에 작성되어 웹 컨텐츠의 간단한 내용을 SNS에 보여질 수 있도록하는 페이스 북에서 제공하는 프로토콜이다.
바로 위의 참조 링크에 대한 페이지 제목과 간단한 내용에 대해 나타나는 것 역시 og태그에 의해 표현되는 것이다.
+ 참조)
'공부하기 > web' 카테고리의 다른 글
| jquery 각 컨텐츠 높이 구하기 -> 배열에 넣 (0) | 2022.06.17 |
|---|---|
| jquery fixed 헤더 가로스크롤 처리 (0) | 2022.05.12 |
| 코드펜 codepen - HTML CSS Javascript 코드 테스트 / 미리복 (0) | 2020.05.10 |
| 웹에서 사용할 수 있는 기능인가 체크 : 캔아이유즈 caniuse (0) | 2020.04.19 |
