Open graph

woo·2023년 2월 20일

open graph

기능 구현

목록 보기

14/17

Front-End-Checklist
체크리스트로 BOAZ 홈페이지를 확인해보다가 Open Graph 를 알게되었다!

open graph는 사용자가 링크를 공유할 때 뜨는 화면으로 meta 태그로 작성한다!

meta 태그 : HTML 문서안에 담겨있으며 해당 문서에 대한 정보를 제공한다.

기존에는 head 태그 안에 작성한 <title>BOAZ</title>와 <meta name="description" content="국내 최초 대학생 빅데이터 연합동아리 BOAZ 입니다." />가 보였다

og를 적용하면 meta:og 태그로 지정한 정보와 이미지가 보여진다!

페이스북의 Open Graph protocol을 사용하면 HTML 문서의 메타정보를 쉽게 표시할 수 있다.

Open Graph(og) 태그 작성 방법

html 파일 안에 아래와 같은 코드를 작성한다.

<head>
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/page.html">
  <meta property="og:title" content="제목">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:description" content="내용에 대한 설명">
  <meta property="og:site_name" content="사이트명">
  <meta property="og:locale" content="en_US">

  <!-- 다음의 태그는 필수는 아니지만, 성능을 위하여 포함하는 것을 추천함 -->
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
 </head>