head 태그 - 검색 엔진 최적화
head 태그 안의 내용은 웹사이트에 실제로 보이지는 않지만, 검색엔진에게 문서에 대해 설명하는 메타데이터를 제공하기 때문에 특별히 신경 써야 합니다.
실습에 활용된 head 태그 내 주용 내용들을 살펴보겠습니다.
head 내 주요 HTML 태그
<head>
웹 페이지의 메타데이터 영역입니다. 이 영역에는 웹 브라우저가 화면에 표시하는 것이 아니라 웹 페이지의 설정이나 정보, 외부 스타일시트, 스크립트 등의 참조가 포함됩니다.
<meta charset="UTF-8" />
- 이 태그는 웹 문서의 문자 인코딩(문자를 컴퓨터가 사용할 수 있는 형태로 변환) 방식을 정의합니다.
- "UTF-8"은 국제적으로 사용되는 문자 인코딩 방식으로, 다양한 언어와 문자를 지원합니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
- 이 태그는 웹사이트가 Internet Explorer에서 어떻게 렌더링 될지 제어하는 역할을 합니다.
- "IE=edge"는 IE에서 최신 렌더링 엔진을 사용하도록 지시합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- 모바일 및 반응형 디자인에 필요한 태그입니다.
width=device-width는 뷰포트의 너비를 장치의 너비와 동일하게 설정하라는 의미입니다.initial-scale=1.0은 초기 확대/축소 레벨을 설정합니다.
<title>Website Title</title>
- 웹페이지의 제목을 정의합니다. 브라우저의 탭에서 표시되는 제목이며, 검색 엔진 결과에서도 사용됩니다.
SEO 및 공유를 위한 메타 태그
<meta name="title" ... />및<meta name="description" ... />: 검색 엔진 결과 페이지(SERP)에서의 제목 및 설명을 설정합니다.
Open Graph (OG) 태그
-
소셜 미디어 플랫폼(예: 페이스북)에서 웹사이트 콘텐츠를 공유할 때 사용되는 메타 정보를 정의합니다.
og:title: 공유되는 콘텐츠의 제목og:description: 공유되는 콘텐츠의 설명og:type: 콘텐츠의 유형 (예: website, video 등)og:image: 공유될 때 표시되는 이미지 URL
<link rel="icon" type="image/x-icon" href="이미지URL" />
- 브라우저의 탭에 표시되는 웹사이트의 파비콘(아이콘) 이미지를 설정합니다.
<link rel="stylesheet" ... />
- 외부 CSS 파일을 웹 페이지에 연결합니다. 이 예에서는 "pretendard.css"라는 스타일시트를 CDN을 통해 연결하고 있습니다.
<link rel="canonical" href="https://www.example.com" />
- Canonical Link는 웹 페이지가 동일한 (또는 매우 유사한) 내용을 가진 다른 URL의 복사본이 있을 경우, 검색 엔진에 원본 페이지의 URL을 알려주는 역할을 합니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!