💡OG(Open graph)란?
OG(Open graph)는 해당 HTML문서의 메타데이터(제목, 설명, 문서의 타입, 대표 URL, 등)를 보기 쉽게 나타내기 위해 작성자가 통일해서 사용할 수 있도록 정의한 프로토콜이다. 즉, 웹 페이지를 SNS로 공유할 때 해당 콘텐츠의 요약 내용인 SNS에 게시되는데 최적화된 데이터를 나타내는 설정이다.
🔎OG(Open graph): 오픈 그래프
이미지로 보면 이해하기 쉬울 것이다.
📜사용법
NAVER 블로그, 카카오톡 미리보기 설정
<meta property=‘og:title’ content=‘…’> // 콘텐츠 제목
<meta propertu='og:url' content='…'> // 웹 페이지 URL
<meta propertu='og:type' content='…'> // 웹 페이지 타입(blog, website 등)
<meta propertu='og:image' content='…'> // 노출되는 이미지
<meta propertu='og:site_name' content='…'> // 웹 사이트 이름(URL이랑 다음)
<meta propertu='og:description' content='…'> // 웹 사이트 설명트위터 미리보기 설정(og→twitter)
<meta propertu='twitter:card' content='…'> // 트위터 카드 타입(요약정보, 사진, 비디오)
<meta propertu='twitter:title' content='…'> // 콘텐츠 제목
<meta propertu='twitter:description' content='…'> // 웹 페이지 설명
<meta propertu='twitter:image' content='…'> // 표시되는 이미지모바일 앱 미리보기 설정
모바일 앱이 존재하는 경우 앱으로 연결 시 노출
- ios(og→al:ios)
<meta propertu='al:ios:url' content='…'> // ios 앱 URL
<meta propertu='al:ios:app_store_id' content='…'> // ios 앱 스토어 아이디
<meta propertu='al:ios:app_name' content='…'> // ios 앱 이름- Aadroid(og→al:android)
<meta propertu='al:android:url' content='…'> // 안드로이드 앱 URL
<meta propertu='al:android:app_name' content='…'> // 안드로이드 앱 이름
<meta propertu='al:android:package' content='…'> // 안드로이드 패키지 이름
<meta propertu='al:web:url' content='…'> // 안드로이드 앱 URL📌Reference
Front