<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="<image address>" />
<link rel="apple-touch-icon" href="<image address>" />
<title>탭에서 보이는 제목</title>
<!-- -->
<meta name="description" content="" />
<!-- -->
<meta property="og:title" content="title" />
<meta property="og:image" content="<image address>" />
<meta property="og:..." content="..." />
</head>
<body>..</body>
</html>🚀 Check!
⓪ html
- attribute "language" :
<html lang="en">...</html>
① head
- HTML의 head 와 body 중 머리
- 실제 보이지 않는 부분
② 파비콘(favicon)
- 파비콘(favicon)
- attribute "href" : 대부분 아이콘(ico) 파일의 형태로 루트 디렉토리에 위치함
- attribute "sizes" : 일반적으로 16x16을 사용하며 최근 32x32도 지원함 (multiple sizes)
sizes="16x16 32x32 64x64"
③ 태그 meta
- 부가적인 요소로 검색엔진에게 알려주는 웹사이트 설명
- charset : 🌟
<meta charset="utf-8" /> - description
④ 페이스북, 네이버, 카카오톡 등 미리보기 설정
- "og:.." : Open Graph protocol
<meta property="og:type" content="{website, video.movie, ...}" />
<meta property="og:url" content="링크될 URL" />
<meta property="og:title" content="콘텐츠 제목" />
<meta property="og:image" content="콘텐츠 이미지 URL" />
<meta property="og:image:width" content="" />
<meta property="og:image:height" content="" />
<meta property="og:description" content="1-2줄 설명" />
<meta property="og:locale" content="기본 en_US, {ko_KR, ...}" />
<meta property="og:site_name" content="공식 사이트명" />⑤ 트위터 미리보기 설정
- "twitter:.." : 트위터 미리보기 설정
- 트위터 전용 태그는 오픈 그래프로 대체 가능. 단, twitter:card 필요
<meta name="twitter:card" content="summary, photo, player />
- 트위터 전용 태그는 오픈 그래프로 대체 가능. 단, twitter:card 필요
⑥ App Links 설정
- "al:ios:..", "al:android:.." : App Links로 앱 미리보기 설정
✋ 참고 문서
내 이름은 고난, 탐정이죠