`<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 태그에 대해 알아볼게요 👨🏻‍💻

<head> 태그 안의 주요 요소

`<head>` 태그 안의 주요 요소