개발 etc.
meta og (오픈 그래프 open graph)태그에 대해서.
paku_gun
2021. 5. 27. 15:03
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%2Fdna%2Fc9oIX8%2Fbtq5SSbr02h%2FAAAAAAAAAAAAAAAAAAAAADA9czoHZGExNr-Tb3y9Z6hVxUWK1rz6REZgFARPDVhD%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1751295599%26allow_ip%3D%26allow_referer%3D%26signature%3DaToIaBIsim%252BWnf0YVD4S9oOp8zg%253D">
<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태그에 의해 표현되는 것이다.
+ 참조)