[카카오톡] 오픈그래프 메타태그, Open Graph 메타태그 설정, SEO 설정

■ 카카오톡 오픈그래프 메타태그, Open Graph 메타태그 설정, SEO 설정

---

■ 오픈그래프란?

오픈그래프 예시 이미지

HTML 문서의 메타태그를 좀 더 쉽게 표시하기 위해서 
메타태그 내 해당 제목, 문서의 타입, 설명, 대표 URL 등 
다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜

웹사이트(페이지) 공유 또는 URL 링크 복사 시 SNS를 통해 콘텐츠를 공유할 때
해당 콘텐츠에 대해 노출되는 이미지, 제목, 설명 등 미리보기와 같은 콘텐츠가 표시되는 방식 별도로 설정할 수 있음
이 때, 최적화 된 데이터로 표시될 수 있도록 태그 설정이 필요함

---

■ 태그 설정

<!-- 웹사이트 제목 -->
<meta property="og:title" content="제목">			
<!-- 웹사이트 URL -->
<meta property="og:url" content="https://www.test.com">	
<!-- 웹페이지 타입(blog, website 등) -->
<meta property="og:type" content="website">			
<!-- 이미지 경로 -->
<meta property="og:image" content="https://www.test.com/kakao_image.jpg">	
<!-- 웹사이트 이름(URL이랑은 다름) -->
<meta property="og:site_name" content="사이트명"> 	
<!-- 웹사이트 설명 -->
<meta property="og:description" content="사이트 설명">