유용한 정보
오픈그래프 / 파비콘
hello-world
2021. 1. 10. 02:31
728x90
반응형
1. 오픈 그래프
- 오픈그래프 프로토콜은 페이스북에서 처음 만들어졌으며, Dublin Core, link-rel canonical, Microformats, 그리고 RDFa로부터 영감을 받았다.
오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이
통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌다. 그 간편함으로 인하여 현재는 그 창시자인 페이스북은 물론이고, 네이버 블로그, 카카오톡 등에서도 널리 사용하고 있다.
미리보기를 통해 보는 제목, 설명, 이미지는 이렇게 HTML 문서의 head에 표기된 오픈그래프 프로토콜에 의해서 나타나고 있다. 그 구체적인 작동 원래는 아래와 같다.
- 사용자가 링크를 입력창에 입력.
- 페이스북, 네이버 블로그, 카카오톡은 입력창의 문자열이 "링크"라는 것을 파악한다. (흔히 말하는 정규표현식으로 해당 문자열이 링크라는 것을 알아낸다.)
- 링크라는 것이 파악되면 페이스북, 네이버 블로그, 카카오톡의 크롤러는 미리 그 웹사이트를 방문해서 HTML head의 오픈그래프(Open Graph) 메타 데이터를 긁어온다.
- 이중에서도 og:title, og:description, og:image 가 각각 제목, 설명, 이미지의 정보를 나타낸다.
- 그리고 그 정보를 바탕으로 미리보기 화면을 생성해주게 된다.
아래는 예시 코드
<meta property="og:title" content="MINTIT UX">
<meta property="og:url" content="http://mintit.inition.kr/">
<meta property="og:description" content="Used Mobile Phone Upcycling Service Design">
<meta property="og:image" content="http://mintit.inition.kr/assets/images/mintit-sns2.png">
<meta property="og:type" content="website">
<meta property="og:site_name" content="MINTIT UX">
Tag | Description |
---|---|
og:url | 페이지의 표준 URL (데스크탑 URL) |
og:title | 콘텐츠 제목 |
og:description | 콘텐츠 설명. 미리보기에서 제목 아래에 표시 |
og:image | 콘텐츠를 공유 시 표시되는 이미지의 URL |
og:site_name | 웹 사이트의 이름 (주소 아님) |
note : image size 는 800x800 혹은 270x270 이며
- 보여주고자 하는 아이콘 및 텍스트는 가로 세로 중앙정렬로 배치 되어야 한다.
note: 카카오 경우 아래와 같은 가이드로 진행됨( 디자인 가이드 )
- 스크랩 이미지의 권장 크기는 800px x 800px (*실제 컨텐츠 사이즈가 아니라 캔버스 사이즈)
- png 타입으로 15kb 내외
- 워드마크로 제작시 800px * 800px 이미지내 정중앙에 600px * 120px 크기의 이미지로 설정.
- 심볼로 만들때는 800px * 800px 이미지내 정중앙에 160px * 160px 크기의 이미지로 설정.
2. 파비콘
- 파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘을 일컫는다. 이 아이콘은 즐겨찾기에 웹페이지를 등록할때도 사용된다.
웹사이트를 대표하는 로고(logo)의 개념과 비슷하며, 사이트의 성격을 드러내기도 한다.
<!-- cdn 32x32 사이즈 .ico 파비콘 이미지 ( favicon.ico ) -->
<link rel="shortcut icon" href="">
<!-- cdn 144x144 사이즈 .png 이미지 ( apple-touch-icon.png )-->
<link rel="apple-touch-icon" href="" sizes="144x144">
728x90
반응형