head 기본설정 / meta CEO, url 이미지, title 아이콘(파비콘/favicon), 바로가기 아이콘

무신사 홈페이지를 개발자모드로 확인한 모습

 

meta CEO

meta 태그는 페이지의 가장 처음에 수집되는 정보

 

기본 meta

<title>페이지 제목</title>
<meta name=”description” content=”페이지 설명”>
<meta name=”keywords” content=”키워드,키워드,키워드,키워드,키워드”>

title : meta 태그는 아니지만 사이트 제목에 해당하는 태그
description : 해당 페이지의 설명글, 문장으로 표현
keywords : 페이지에 들어간 내용의 키워드들을 단어로 적용, 쉼표로 구분

 

※ 참고 : 검색엔진은 keywords의 영향보다는 description에 더 많은 영향을 받음 

 

포털사이트 검색시 description이 적용된 모습

 

sns meta / url 이미지

<meta property=”og:type” content=”website”>
<meta property=”og:title” content=”페이지 제목”>
<meta property=”og:description” content=”페이지 설명”>
<meta property=”og:image” content=”페이지 썸네일 이미지 주소”>
<meta property=”og:url” content=”페이지 주소”>

<meta property=”twitter:card” content=”summary”>
<meta property=”twitter:title” content=”페이지 제목”>
<meta property=”twitter:description” content=”페이지 설명”>
<meta property=”twitter:image” content=”페이지 썸네일 이미지 주소”>

 

og : 페이스북에 정보를 제공

twitter : 트위터에 정보를 제공

※ og, twitter 이 태그들은 페이스북과 트위터에만 영향을 주는 것이 아닌, 네이버나 카카오톡 등에서도 활용!!!!
※ 카카오톡에 url을 보냈을 때 나오는 이미지나 제목에도 적용!!!

카카오 url 이미지 적용된 모습

 

 

 title 아이콘(파피콘/favicon)

타이틀 아이콘 적용된 이미지

 

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">

 

png > ico 파일 변환

https://convertio.co/kr/png-ico/

PNG ICO 변환 (온라인 무료) — Convertio

https://www.favicon-generator.org/

Favicon & App Icon Generator

 

바로가기 아이콘 

- 사용자가 홈 화면에 웹사이트를 추가할 때 나타나는 아이콘
- 사용자가 브라우저의 북마크 목록에서 해당 웹사이트를 식별하는 데 사용되는 아이콘

 

<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="apple-touch-icon" href="/apple-touch-icon@2x.png" sizes="360x360">

북마크에 적용된 모습

사파리에서 홈추가 한 모습