head 태그 - 검색 엔진 최적화

head 태그 안의 내용은 웹사이트에 실제로 보이지는 않지만, 검색엔진에게 문서에 대해 설명하는 메타데이터를 제공하기 때문에 특별히 신경 써야 합니다.

실습에 활용된 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을 알려주는 역할을 합니다.