티스토리 뷰
오픈그래프(open graph)
웹사이트 링크를 복사하여 블로그나 카카오톡, SNS 등을 통해 공유할 때 썸네일 이미지, 제목, 설명이 나오는데요. 이 부분을 오픈 그래프(open graph)라고 부릅니다. 아래 이미지는 카카오톡에서 다음 포털의 URL을 입력했을 때 나타나는 오픈그래프를 예시로 캡쳐한 것입니다.
오픈 그래프가 표시되도록 하려면 HTML 문서 상단의 <head> 태그 안에 <meta> 태그를 활용하면 됩니다.<meta> 태그에는 웹사이트나 페이지를 설명하는 데이터를 넣는데 오픈 그래프 태그도 바로 여기에 들어갑니다.
|
1
2
3
4
5
6
7
8
|
<!-- 오픈그래프 웹사이트 링크(URL) -->
<meta property="og:url" content="http://... ">
<!-- 오픈그래프 이미지 -->
<meta property="og:image" content="image file URL">
<!-- 오픈그래프 타이틀 -->
<meta property="og:title" content="title name">
<!-- 오픈그래프 설명 -->
<meta property="og:description" content="introduction text">
|
cs |
오픈그래프 이미지는 공유하는 플랫폼에 따라 다르게 표시될 수 있습니다. 플랫폼마다 지원하는 크기가 다르기 때문이죠. 다양한 플랫폼의 썸네일에서도 잘 보이도록 제작하는 것이 중요한데요 보통은 가로세로 800픽셀, PNG 형식, 15KB 내외로 제작하는 것이 적당하다고 합니다.
파비콘(favicon)
파비콘은 Favorites Icon의 약자로 웹페이지 상단과 즐겨찾기 등에서 보여지는 웹사이트의 아이콘을 의미합니다. 크기는 매우 작지만 사이트에 대한 상징이라고 할 수 있으므로 사용자에게 사이트를 각인시키는 효과가 있습니다.
일반적으로 웹에 적용되는 파비콘의 크기는 16*16 픽셀로, 배경은 투명하게 제작해야 합니다. PNG파일로 만들어서 ICO파일로 변환하는 과정을 거칩니다. 포토샵 등에서 ICO 파일로 저장되지 않더라구요. 일반적으로 변환사이트에 접속해서 형식을 변환할 수 있습니다.
'SW Test | 기획 | 개발' 카테고리의 다른 글
| 크롬 개발자 도구 활용하기 - 단말기별 테스트, CSS (0) | 2023.01.18 |
|---|---|
| 프로토타이핑 (0) | 2023.01.11 |
| 소프트웨어 개발방법론 : 워터폴(Waterfall) vs 애자일(Agile) (0) | 2023.01.04 |
| 웹 사이트의 계층 구조 이해 (0) | 2022.12.28 |
| 정보 구조화 기법 (0) | 2022.12.21 |
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday