Guidelines
Practice
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을 알려주는 역할을 합니다.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help