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에서 공유 시 공유된 정보를 특정한 사이트에서 체크해 갈 때 필요한 내용.