[HTML] meta tag 사용법 및 예제

오늘은 html meta tag의 의미와 description, refresh, viewport  속성에 대해 알아보도록 하겠습니다. 

meta태그는 head 태그 안에 있으며 웹페이지의 보이진 않는 정보를 제공합니다.

설명, 핵심 키워드, 제작자, 크롤링 정책과 같은 정보가 속해있죠.

html 문서가 어떤 정보를 어떻게 담고 있는지에 대해 정보를 제공한다고 생각하시면 됩니다.

제품이 body라면 제품 관련 정보가 meta 태그인 셈이죠.

다른 태그들과 달리 닫는 태그가 없습니다.

 

charest, content, http-equiv, name 속성이 있습니다.

charset은 html문자 인코딩을 지정해주는 속성입니다.

content는 아래 두 가지 속성과 관련된 값을 지정합니다.

http-equiv는 http 헤더 정보를 제공합니다.

name은 메타 데이터의 이름을 지정합니다.

 

많이 쓰이는 예제를 중심으로 알아보도록 하겠습니다.

 

1. 키워드 지정하기.

meta tag name 속성을 keywords로 주면 키워드를 지정할 수 있습니다.

키워드를 지정하는 이유는 해당 문서의 핵심 키워드를 파악해 seo 검색 최적화에 반영하기 위해서입니다.

<meta name="keywords" content="코딩, html, meta tag">

 

2.html meta tag description

키워드 말고 description을 통해서 해당 문서의 핵심 내용을 드러낼 수 있습니다.

<meta name="description" content="html meta tag 기본 속성과 사용예제">

 

3.html meta tag refresh

페이지를 일정 주기로 refresh 하는 기능도 추가할 수 있습니다.

content안에 몇 초에 한 번씩 refresh 할지 지정해주시면 됩니다.

<meta http-equiv="refresh" content="5">

 

 

4.html meta tag viewport

다양한 기기에서 웹사이트가 잘 보이도록 하기 위해서 사용하는 속성입니다.

아래 코드를 사용하면 대부분의 기기에서 웹사이트의 크기가 잘 조절됩니다.

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

 

도움이 되셨으면 합니다.

감사합니다~