Head 태그 | Notion

HTML Head 태그는 웹 문서의 각종 메타데이터, 외부 리소스 연결 등이 명시되어 있는 코드를 작성할 수 있는 공간이다.

태그	뜻
link	CSS 등의 스타일시트 연결, 리소스 사전로드를 지원
style	HTML 코드 내에서 스타일링을 작성할때 사용 가능
meta	메타데이터 작성

<head>
	<!-- HTML 외부 스타일시트 불러오기 -->
	<link rel="stylesheet" href="css/index.css" />

	<!-- 웹 문서의 인코딩 방식 -->
	<meta charset="utf-8" />

	<!-- 웹 페이지의 대표 제목과 설명란 -->
	<meta name="title" content="네이버" />
	<meta name="description" content="대한민국 No.1 검색 플랫폼 네이버" />

	<!-- HTML 문서 내부에서 css 코드 작성 -->
	<style>
		span {
			font-size: 16px;
		}

		.wrapper {
			background-color: black;
		}
	</style>
</head>

메타데이터란?

메타데이터는 특정 데이터를 설명해주는 데이터라고 생각할 수 있다.
웹 페이지의 정보를 수집하는 검색엔진과 같은 로봇이 웹 페이지를 이해할 수 있도록 하기 위함
- SNS 공유시에 사용되는 오픈그래프 데이터도 적용 가능
웹에서의 메타데이터는 웹페이지 제목, 설명란, 썸네일, 페이지 인코딩 방식 등이 해당된다.
메타(meta) 태그의 속성들

속성	뜻	사용
title	웹 페이지 제목	<meta name=”title” content=”페이지 제목” />
description	웹 페이지 설명	<meta name=”description” content=”페이지 설명” />
charset	웹 인코딩 방식	<meta charset=”utf-8” />
og:title	오픈그래프 제목	<meta property=”og:title” content=”페이지 제목” />
og:description	오픈그래프 설명	<meta property=”og:description” content=”페이지 설명” />
og:image	오픈그래프 이미지	<meta property=”og:image” content=”페이지 이미지 주소” />

Untitled

<aside> 💡

오픈그래프 예제 og:title → 네이버 og:description → 네이버 메인에서 다양한 정보와… og:image → 네이버 이미지

</aside>