HTML & CSS

Chapter 1-18. 문서정보관리하기 - 메타데이터(HTML)

Chansman 2025. 3. 28. 17:38

📌 <meta> 태그란?

<meta> 태그는 HTML 문서에 대한 메타데이터를 정의하는 태그입니다. 메타데이터란, 데이터에 대한 데이터로, 문서에 대한 정보를 제공합니다.

🔹 <meta> 태그 사용 목적

  • 웹 페이지에 대한 정보를 제공하여 검색 엔진이 페이지를 검색할 때 참고할 수 있게 합니다.
  • 페이지의 검색 결과에 영향을 줄 수 있으며, 문자 인코딩, 페이지 설명, 키워드, 작성자 등의 정보를 설정합니다.
<meta charset="UTF-8">

📝 1. 주요 <meta> 속성

🔸 charset: 문자 인코딩 설정

  • 문자 인코딩은 텍스트를 어떻게 표시할지 정하는 방법입니다. HTML 문서에서 한글을 제대로 표시하기 위해서는 UTF-8 인코딩을 사용하는 것이 가장 안전합니다.
<meta charset="UTF-8">
  • 이 속성은 문자 깨짐을 방지하고, 웹 페이지가 다양한 언어를 정확하게 표시할 수 있도록 합니다.

🔸 http-equiv: HTTP 관련 설정

  • http-equiv 속성은 HTTP 헤더에 관련된 정보를 설정합니다.
  • content 속성과 함께 사용되어, HTTP 응답 헤더처럼 작동합니다.
<meta http-equiv="refresh" content="30">
  • 위 예시에서는 페이지를 30초마다 새로 고침하도록 설정합니다.

🔸 **name**과 content: 문서 정보 제공

  • name 속성은 메타데이터의 이름을 지정하고, content 속성은 그 값을 설정합니다. 이를 통해 문서의 제목, 설명 등을 설정할 수 있습니다.
<meta name="description" content="이 페이지는 고양이 관련 정보를 다루고 있습니다.">
  • name="description": 페이지에 대한 설명을 제공하고, content 속성에는 해당 설명을 입력합니다. 이는 검색 엔진 최적화(SEO)에 유리합니다.

📝 2. 메타 태그 활용 예시

🔹 문서 설명 추가

<meta name="description" content="이 페이지는 HTML 기본 사용법을 다룹니다.">
  • **description**은 검색 엔진에서 페이지 설명을 제공하는 데 사용됩니다. 이 정보를 통해 검색 결과에 표시되는 내용을 제어할 수 있습니다.

🔹 키워드 추가

<meta name="keywords" content="HTML, HTML5, 태그, 웹 개발">
  • **keywords**는 해당 페이지에 대한 검색 키워드를 제공합니다. 이 정보는 검색 엔진에서 페이지의 관련성 평가에 도움을 줄 수 있습니다.

🔹 작성자 정보

<meta name="author" content="홍길동">
  • **author**는 문서의 저자를 지정할 때 사용합니다.

🚩 3. 결론

  • <meta> 태그는 HTML 문서에 정보를 제공하고, **검색 엔진 최적화(SEO)**와 웹 브라우저 처리에 도움을 줍니다.
  • charset, http-equiv, name, content 속성들을 통해 문서의 인코딩 방식, 페이지 설명, 키워드, 저자 등을 설정할 수 있습니다.
  • 메타 태그는 웹 페이지의 검색 가능성과 접근성을 높이는 데 매우 중요한 역할을 합니다.