HTML 탐구생활 : meta 태그란 무엇인가?

 

1. meta 태그란?

html은 크게 head태그와 body태그로 나뉜다. body태그와 다르게 head태그 같은 경우에는 브라우저에 직접적으로 표시되지 않는다. meta태그는 head태그 안에 들어가는데  웹페이지 그 자체의 정보를 제공하기 위한 목적으로 사용된다.

meta 태그를 통해 검색엔진 최적화에 도움이 될 수 있다. meta 태그는 head 부분에 적혀져 있기 때문에 문서의 가장 처음에 읽히는 정보들이다. 그렇기 때문에 검색엔진에게 웹페이지가 이러한 내용들을 담고 있다고 알려주는 것이다.

 

 

2.  meta 태그의 name과 content

-- name의 속성값은 많지만 대표적으로 description, author, keywords 등이 있다.

-- content는 name의 특성 값을 담는다.

 

<예시>

 

1. 웹페이지에 대한 설명을 정의할 때

<meta name="description" content="이 웹페이지는 이러한 내용을 담고 있습니다.">

2. 검색엔진을 위한 키워드를 정의할 때

<meta name="keywords" content="html tag">

3. 문서의 저자를 정의할 때

<meta name="author" content="K">

 

 

3.  meta태그를 통한 문자 인코딩

meta 태그의 속성값으로 charset이라는 속성이 있는데 character set(문자 집합)의 약자이다. charset을 통해 문자 인코딩선언을 하는 것이고 해당문서가 어떤 언어로 인코딩 되어 있는지 알려준다. 그런다음 자신이 작성한 구문들을 컴퓨터가 이해할 수 있도록 변환해준다(인코딩).  charset의 속성값으로 가장 많이 사용하는것은 "UTF-8"이다. 이는 유니코드 시스템 코드 테이블을 사용해 현존하는 모든 문자들을 표시할 수 있다. charset의 속성값을 정확하게 작성해주어야 글자가 깨지는 현상을 막을 수 있다.

<meta charset="UTF-8" />

 

 

4. meta태그를 통한 뷰포트 설정

웹 사이트를 볼 때 데스크탑을 이용해서 보는 경우와 모바일 기기로 보는 경우 웹사이트의 배치나 요소의 크기가 조금씩 다르다. 사용자의 편리성을 위해 각 기기의 너비에 맞게 웹 사이트를 조정하기 위해서는 meta태그의 viewport 설정이 필요하다. 요즘 웹사이트들은 대부분 반응형 웹으로 만들기 때문에 뷰포트 설정은 매우 중요하다.

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

meta태그의 name값은 "viewport"이고 content값으로 "width=device-width"가 들어가는데 width를 현재 사용하고 있는 기기의 width값으로 설정한다는 의미이다. initial-scale의 값으로는 "1.0"이 들어가는데 보여지는 화면의 zoom up상태를 1배율로 설정한다는 의미이다. 값을 바꾸면 배율을 조절할 수 있다.

 

 

5. meta태그의 Open Graph(오픈 그래프)

최근에 sns를 통해 웹페이지의 링크를 공유하는 경우가 많아지고 있다. 카카오톡에 링크만 입력하더라도 웹페이지에 대한 내용을 간략하게 볼 수 있도록 카드 형태로 나타낸것이 그 예시이다. 

 

<예시>

 

1. 웹 사이트의 이름 표시

<meta name="og:site_name" content="THE 나은 웹사이트">

2. 웹 페이지의 제목 표시

<meta name="og:title" content="meta태그란 무엇인가">

3. 웹 페이지의 설명 표시

<meta name="og:description" content="meta태그는 웹페이지 그 자체의 정보를 제공하기 위한 목적으로 사용된다.">

 4. 웹 페이지의 썸네일 표시

<meta name="og:image" content="이미지 주소">

5. 웹 페이지의 주소 표시

<meta name="og:url" content="웹 페이지 주소">