html/css Open Graph 오픈그래프(미리보기)

오픈그래프란? 우리가 url을 전송됬을때 자동으로 나오는 이미지를 말한다!

 

 

 

 

페이스북에서 개발해서 페이스북 오픈그래프라도 불림

---> url 전송시 미리보기 지원 

html에 오픈그래프 코드 삽입 필요!

 

 

 

 

---

 

오픈그래프
설명	- 200~300px  png로 제작 (보통 로고나 심볼 이용)
	페이스북에서 개발한 오픈그래프 프로토콜
	네이버 스마트에디터, 카카오톡에 url입력후 확인 (정식확인은 페이스북 개발자 센터 공유 디버거 페이지에서 정확한 확인가능)
	오픈그래프 코드에러일시 수정해도 카카오톡은 반나절이상소요될수 있으며 공유디버거에서 반영되면 수정된것임
	index아닐경우 오픈그래프 url에 파일명도넣어야함
태그	<meta property="og:type" content="website"> <meta property="og:title" content="SUBWAY 써브웨이"> <meta property="og:url" content="http://ossamuiux.com/subway/franchise_inquiry.html"> <meta property="og:image" content="http://ossamuiux.com/subway/images/subway_og.png"> <meta property="og:description" content="신선하고 건강한 글로벌 NO.1 샌드위치 브랜드, 써브웨이">
태그설명	어떤 컨텐츠 안에 있는지 일반적으로 메인타이틀에 있는 내용 넣기 도메인 주소 넣어주기 (서브페이지는 서브url 넣기) 반드시 절대(완전한)주소로 삽입 (페이스북 서버에서 전송되기 때문)

 

---

테스트 하기!

 

html 에 삽입 *오타조심*

 

 

  <!-- 검색결과 오픈그래프 -->
  <meta name="description" content="신선하고 건강한 글로벌 NO.1 샌드위치 브랜드, 써브웨이">
  <meta property="og:type" content="website">
  <meta property="og:title" content="SUBWAY KOREA">
  <!-- index 페이지에선 파일명 안써도됨 -->
  <meta property="og:url" content="http://hyojin7794.dothome.co.kr/subway/franchise_inquiry.html">
  <meta property="og:image" content="http://hyojin7794.dothome.co.kr/subway/images/subway_og.png">
  <meta property="og:description" content="신선하고 건강한 글로벌 NO.1 샌드위치 브랜드, 써브웨이">

---

 

알드라이브로 폴더 생성 > 테스트해보기

 

 

 

---

 

페이스북 공유 디버거로 확인해보기

 

 

 

 

 

http://hyojin7794.dothome.co.kr/subway/franchise_inquiry.html

SUBWAY KOREA