[HTML] OG Tag(Open Graph Tag) 이란?

OG Tag

 

페이스북에서 만들어진 OG Tag는 Open Graph Tag의 줄임말로,

 

어떤 링크를 공유할 때 어떤 모습으로(미리보기의 제목, 설명, 이미지 등) 보여주고 싶은 지 지정하는 Tag이다.

 

---

 

사용하는 이유

 

웹 크롤러 또한 하나의 웹 프로그램이기 때문에 HTML 사이트의

 

3줄 요약이 무엇인지, 무엇이 대표 이미지인지 100% 자동으로 판별하기 어렵다.

 

---

 

사용법

 

 

 

<!-- 페이지의 표준 URL -->
<meta property="og:url" content="http://www.google.com" />

<!-- 콘텐츠의 미디어 유형(기본값은 website) -->
<meta property="og:type" content="article" />

<!-- 기사의 제목 -->
<meta property="og:title" content="When Great Minds Don’t Think Alike" />

<!-- 콘텐츠의 간단한 설명 -->
<meta property="og:description" content="How much does culture influence creative thinking?" />

<!-- 표시되는 이미지의 URL -->
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

 

 

References

---

velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

blog.ab180.co/posts/open-graph-as-a-website-preview

developers.facebook.com/docs/sharing/webmasters?locale=ko_KR