opengraph 오픈그래프

sunghoon·2022년 7월 27일
0

HTML & CSS: Tips

목록 보기
3/6
post-thumbnail

오픈그래프

오픈 그래프트: 흔히 카카오톡 주소 전송할 때 뜨는 사진과 제목, 컨텐츠를 오픈그래프로 지정하며, 메타데이터의 한 종류라고 말할 수 있다.

이미지의 경우 최소한 600 x 315 픽셀은 되어야 하며, 1200 x 630 픽셀 크기를 권장


기본적으로 웹에 설정해줘야하는 og 메타태그

<meta property="og:type" content="website"> <!-- 사이트 종류 -->
<meta property="og:url" content="대표 url"> <!-- 사이트의 대표 url -->
<meta property="og:title" content="제목"> 
<meta property="og:image" content="이미지">
<meta property="og:description" content="사이트설명">
<meta property="og:site_name" content="세부 카테고리 이름">
<meta property="og:locale" content="ko_KR"> <!-- 사이트 언어 기본값 en_US -->
<!-- 이미지 사이즈 -->

opengraph의 기본 태그

og:type - 사이트의 종류 스타일 예) video.movie

og:url - 사이트의 대표 url

og:title - 사이트의 제목 태그

og:image - 사이트를 나타낼 대표 이미지

og:description - 사이트의 설명

og:site_name - 전체 사이트는 title로 표시하면 site_name은 좀 더 세부적인 카테고리 정도의 레벨입니다.

og:locale - 사이트의 언어 선택입니다. 기본값은 en_US입니다만, 한글의 경우는 ko_KR입니다.

profile
glove project 2.0 ⚾

0개의 댓글