Section 01

---

Goal

메타 태그에 대해 간략히 정리 해보자.

메타 태그(meta tag)란?

메타 태그란 HTML 문서의 맨 위쪽에 위치하는 태그(tag)로 HEAD 태그 사이 또는 뒤에 있어도 되지만, 반드시 BODY 태그 앞쪽에 위치해야 한다. 브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함한다.

메타 태그 속성에는 http-equiv, name, content 3가지 속성이 있다.

http-equiv="항목명"

웹 브라우저가 서버에 명령을 내리는 속성.

content="정보 값"

meta 정보의 내용을 지정

name="정보 이름"

몇 개의 meta 정보의 이름을 정할 수 있으며, 지정하지 않으면 http-equiv와 같은 기능을 가짐.

charset

<meta charset="UTF-8" />

charset은 해당 HTML파일을 어떤 방식으로 인코딩할지 설정할 수 있다. 일반적으로 UTF-8로 지정하며, 모든 유니코드 문자를 표현할 수 있어 현재 HTML5도 이 방식을 채택하고 있기에 특별한 경우가 아니면 UTF-8 방식으로 인코딩을 진행하게 된다.

viewport

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

웹과 모바일 여러 상황에 맞춰서 표현하기 위한 반응형 작업을 할 때 viewport를 사용한다.

keywords

<meta name="keywords" content="keyward1, keyward2">

해당 페이지에 대해서 중요한 키워드가 무엇인지 지정해줄 수 있다. 주로 단어들을 , 로 구분하며 중요한

키워드일수록 앞 쪽에 배치하는 것을 지향한다.

description

<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요.">

해당 페이지에 대한 설명을 나타낸다. 위 설명을 해당 사이트를 검색했을 때 상세한 설명을 해준다.

메타 태그 속성 모음

메타태그 속성 정리