Guidelines
Practice
<head>
태그 안의 주요 요소
HTML head 태그는 문서에 대한 일반적인 정보를 서술하는 메타데이터를 정하고, 검색 엔진에게 이 정보를 알려주는 중요한 부분이에요.
포트폴리오 템플릿에 head 태그가 어떻게 사용되었는지 살펴볼까요?
1. 웹 페이지 제목 설정
- 코드:
<title>웹사이트 제목</title>
- 웹 브라우저의 제목 표시줄이나 페이지 탭에 표시되는 제목을 설정합니다.
2. 뷰포트와 반응형 디자인 설정
- 코드:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- 웹 페이지가 모바일 장치나 반응형 디자인에 어떻게 대응해야 하는지를 지정합니다.
3. 웹 페이지 설명 설정
- 코드:
<meta name="description" content="웹사이트 설명" />
- 웹사이트의 간단한 설명을 제공합니다. 이는 검색 엔진의 검색 결과에 표시될 수 있습니다.
4. 문자 인코딩 설정
- 코드:
<meta charset="UTF-8" />
- 웹 페이지의 문자 인코딩(문자를 컴퓨터가 사용할 수 있는 형태로 변환) 방식을 지정합니다.
5. 소셜 미디어 공유 설정
- 코드:
<meta property="og:title" content="웹사이트 제목" /> <meta property="og:description" content="웹사이트 설명" /> <meta property="og:locale" content="ko_KR" /> <meta property="og:type" content="website" /> <meta property="og:url" content="웹사이트 URL" /> <meta property="og:site_name" content="웹사이트명" /> <meta property="og:image" content="이미지 URL" />
- Open Graph를 활용해 소셜 미디어 플랫폼(예: 인스타그램)에서 페이지를 어떻게 표시할지 지정합니다.
6. 검색 엔진 인증 설정
- 코드:
<meta name="naver-site-verification" content="" /> <meta name="google-site-verification" content="" />
- 네이버, 구글과 같은 검색 엔진들에서 사이트 소유자를 확인하기 위한 코드입니다. content의 값으로 인증 코드를 넣습니다.
7. 정식 버전 URL 지정
- 코드:
<link rel="canonical" href="웹사이트 URL" />
- canonical 링크로 현재 페이지의 정식 버전 URL을 지정합니다. 중복된 컨텐츠가 여러 URL에 있을 경우 SEO 문제를 방지하기 위해 사용됩니다.
8. 웹 브라우저 탭 아이콘 설정
- 코드:
<link rel="icon" href="이미지 URL" />
- 웹 브라우저의 탭에 표시될 아이콘(파비콘)을 이미지 URL로 지정합니다.
9. 페이지 로딩 속도 최적화
- 코드:
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
- preconnect를 통해 연결을 미리 연결하여 페이지 로딩 속도를 최적화합니다.
10. 구글 폰트 연결
- 코드:
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR" rel="stylesheet" />
- 설명: 구글의 "Noto Serif KR" 폰트를 웹 페이지에 연결하여 사용합니다.
다음 수업에서는 템플릿 별 body 태그에 대해 알아볼게요 👨🏻💻
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help