[HTML] 메타데이터(2) - <meta>

▶ <meta />

 

  <meta>는 HTML 문서(웹 페이지)에 관한 정보(표시 방식, 제작자, 문자 인코딩 방식 등)를 검색 엔진이나 브라우저에 제공함.

  <title>, <link>, <style>, <script>에서 나타낼 수 없는 기타 모든 정보들을 표시.

 

 

• 속성

- charset
  문자 인코딩 방식(텍스트가 출력되는 방식)을 설정. HTML 문서 내에 작성된 모든 문자들이 화면에 어떻게 출력될지 정의함.

   UTF-8, EUC-KR 등.
   이전에는 EUC-KR이 많이 사용되던 추세였으나 최근에는 UTF-8을 선호함.
   문자 인코딩 방식을 설정하는 것이기 때문에 charset 속성을 나타내는 <meta>는 보통 <title>보다 앞에 작성함.

 

- content
  http-equiv 또는 name 속성의 값을 작성.

 

- http-equiv 
  서버/사용자의 작동방식을 변경할 수 있는 지시사항을 명시(지시사항은 content 속성에 정의).
  HTTP 응답 헤더 제공.
  대표적인 예로 Internet Explorer 브라우저에서 현재의 웹사이트가 어떤 버전에서 최적화되어 나올 수 있는지에 대한 렌더링 방식을 명시할 수 있음.

 

- name
  메타데이터의 이름(정보의 종류)을 정의.
  name과 content를 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있음(name = 이름, content = 값).
  name 속성을 사용하는 경우 http-equiv을 사용할 수 없고 http-equiv 속성 사용 시에는 name 속성을 사용할 수 없음.

 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

  Internet Explorer에서 렌더링될 때 최신의 Explorer 렌더링 방식으로 화면에 출력되도록 설정.
  Internet Explorer 지원 시 이 코드를 작성하는 것이 좋음.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  반응형 웹 사이트 제작 시 필요.

  viewport는 화면에 어떤 정보를 렌더링하기 위한 영역 설정 시 필요한 정보의 종류를 나타냄.

  웹 페이지 화면에 보이는 전체 영역이 viewport에 해당.

  화면에 렌더링되는 영역을 어떤 방식으로 선언할 것인지 명시하는 것.

  width=device-width는 viewport의 가로 너비를 device에 최적화시키도록 함.

  initial-scale=1.0은 확대 축소 시 1에서부터 출발하겠다는 것을 의미.

 

 

- property

<meta property="og:title" content="test"/>

  og:title에서 og는 open graph를 의미. 브라우저에 특정한 정보를 주기 위한 문법.

  SNS에서 공유 시 공유된 정보를 특정한 사이트에서 체크해 갈 때 필요한 내용.