메타 엘리먼트 (Meta element)는 HTML 문서의 <head> 섹션 내에 위치하며, 웹 페이지 자체에 대한 메타데이터를 정의하는 데 사용되는 HTML 요소입니다. 메타데이터는 웹 페이지의 내용이나 동작에 대한 정보이며, 브라우저, 검색 엔진, 기타 웹 서비스에서 사용될 수 있습니다. 메타 엘리먼트는 페이지에 표시되는 콘텐츠의 일부가 아니지만, 검색 엔진 최적화 (SEO), 문자 인코딩 설정, 뷰포트 설정 등 다양한 기능을 수행하는 데 필수적입니다.
주요 속성:
name: 메타데이터의 종류를 지정합니다. 일반적인 값으로는description(페이지 설명),keywords(페이지 키워드),author(페이지 작성자),robots(검색 엔진 크롤러 지시어) 등이 있습니다.content:name속성으로 지정된 메타데이터의 실제 값을 정의합니다. 예를 들어,name="description"일 경우content속성에 페이지의 간략한 요약 설명을 입력합니다.http-equiv: HTTP 헤더 필드를 흉내내는 데 사용됩니다. 일반적인 값으로는content-type(문서의 미디어 타입 및 문자 인코딩 지정),refresh(페이지 리디렉션 또는 자동 새로고침),default-style(기본 스타일시트 지정) 등이 있습니다.charset: HTML5에서 추가된 속성으로, 문서의 문자 인코딩을 지정합니다. 일반적으로charset="UTF-8"과 같이 사용됩니다.
사용 예시:
<head>
<meta charset="UTF-8">
<meta name="description" content="이 페이지는 메타 엘리먼트에 대한 설명을 제공합니다.">
<meta name="keywords" content="메타 엘리먼트, HTML, 메타데이터, SEO">
<meta name="author" content="[작성자 이름]">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="30"> <!-- 30초마다 페이지 새로고침 -->
</head>
참고:
메타 엘리먼트는 웹 페이지의 접근성과 SEO에 중요한 역할을 합니다. 특히 description 메타데이터는 검색 엔진 결과 페이지 (SERP)에서 페이지의 스니펫으로 사용될 가능성이 높으므로, 정확하고 매력적인 설명을 제공하는 것이 중요합니다. viewport 메타데이터는 모바일 기기에서 웹 페이지가 올바르게 표시되도록 설정하는 데 필수적입니다.