[html] meta 태그 사용법

[html] meta 태그 사용법

html 강좌 초기에 <head>에 들어가는 태그란 제목에서

잠깐 meta 태그를 언급했습니다.

head 에 들어가는 태그 (title, style, script, meta 태그)

html을 공부하는 사람뿐 아니라 블로그나 웹사이트를 운영하는 분들은 자신의 사이트가

좀 더 상위 노출되길 바라는 마음에서 이 meta 태그를 어떻게 활용할까 생각해 보셨을 법한데요.

오늘은 이 meta 태그 사용법을 자세히 알아 볼까 합니다.

우선 기초적인 부분을 공부하고 맨 마지막에 현재 meta 태그가 검색 엔진에서

어떻게 쓰이고 있는지, 잘 활용하는 방법도 알아볼게요.

meta태그는 metadata(정보에 대한 정보를)제공하는 역할을 합니다.

쉽게 말해, 사이트 자체에 대한 정보나, 저작자, 문서의 언어 등을 말합니다.

화면에는 별달리 표시되는 것이 없지만, 검색 엔진이나 브라우저에 읽힙니다.

meta 태그는 보통 name과 value 쌍으로 사용 됩니다.

예:

검색 엔진을 위한 키워드에서,

사이트에 대한 설명,

사이트 저작자 표시,

html 에서 <meta> 태그는 끝내는 태그가 없으며,

xhtml에서는, <meta />로 대신합니다.

예: <meta name="author" content="지구별에" />

그럼 각각의 속성에 대해 알아볼게요~

name 속성

▶ 문법 : <meta name="value">

메타 정보에 대한 이름, 즉 뒤에 쌍으로 나오는 content 정보에 대한 이름

예: <meta name="author" content="지구별에">

에서 name="author"는 content="지구별에"에 대한 이름입니다.

http-equiv 속성을 설정하면, name 속성은 사용하지 않음.

▶ 속성값 : keywords ｜ description ｜ author ｜ generator ｜ application-name

keywords 문서에 대한 핵심어(keywords)를 쉼표로 분리하여 표시

문서에 대한 정보를 검색 엔진에 제공.

description 문서에 대한 설명. 검색 엔진은 검색 결과와 함께 이 설명을 가져감

author 저자 이름

generator 그 문서를 생성하기 위해 사용된 소프트웨어

application-name 문서를 표시하는 웹 어플리케이션 이름

content 속성

▶ 문법 : <meta content="text">

name 속성과 http-equiv와 연관된 값을 줌.

▶ 속성값

text : 메타 정보에 대한 내용

예: <meta name="keywords" content="HTML, CSS">

http-equiv 속성

content 속성의 정보/값을 위한 HTTP header를 제공함.

http-equiv 속성은 HTTP 응답 header를 모방하기 위해 사용될 수 있음.

html4 에서는 문자설정(chracter set)을 할 때 http-equiv 속성을 사용했지만

html5에서는 문자 설정 방법이 더욱 간단해짐.

HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">

HTML5: <meta charset="UTF-8">

▶ 문법 <meta http-equiv="content-type|default-style|refresh">

▶ 속성값

content-type 문서에 대한 문자 부호화 방식을 지정.

refresh 새로고침하기 위한 문서의 간격

이 속성의 사용을 권장하지 않음.

default-style 사용할 선호된 스타일 시트

charset 속성(html5에서 새로운 속성)

html 문서의 문자 부호화 방식을 지정.

html4: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
위처럼 해도 여전히 가능하지만 html5 방식이 좀 더 효율적임.

html5: <meta charset="UTF-8">

▶문법 <meta charset="character_set">

▶속성값

character_set 문서에 대한 문자 부호화 방식

이론상으로는 어느 문자 부호화방식으든 사용될 수 있지만 모든 브라우저가 모든 문자 부호화방식을

이해하는 것은 아님.

UTF-8 유니코드를 위한 문자 부호화

모든 문자 부호 보기 http://www.iana.org/assignments/character-sets/character-sets.xhtml

scheme 속성 (html5에서 지원되지 않음)

content 속성의 값을 해석하기 위해 schme(format 이나 uri)를 지정.

▶문법: <meta scheme="format|URI">

▶속성값 format/URI

: content 속성 내부 값의 format을 지정, 또는 정보를 담고 있는 url를 가리킴

지금까지 meta 태그의 여러 속성과 속성값을 배웠습니다.

저도 자료를 정리하면서 알게 된 것이지만 meta 태그가 결코 검색에 만능 태그는 아닙니다.

keywords에 대하여

meta 태그중 keywords 속성은 문서에 대한 핵심어를 검색 엔진에 전달해

상위 검색에 도움이 된다고들 알고 있지만, 초기 검색 엔진에서 이 keywords 는 상당히

중요한 요소였지만 현재는 스팸 여부를 진단하기 위해 마이크로소프트의 being에서 가져가는 것 말고는

오늘날 주요 검색 엔진은 keywords 을 더 이상 신경 쓰지 않는다고 합니다.

오히려 이 keywords 속성을 쓰지 말 것을 권유하기도 합니다. (http://www.thesitewizard.com/archive/metatags.shtml )

meta 태그가 상위에 노출되는 마술적인 해결책은 아니지만, 검색 엔진에서 사이트에 대한 올바른 정보를

제공하는 데 도움이 됩니다.

description 속성

예를 들어 사이트 정보를 설명하는 description 속성의 경우 사용했다고 해서, 상위 랭킹이 되지는 않지만,

사이트에 대한 정확한 정보가 나와 있을 때 사용자는 클릭할 가능성이 더 높습니다.

description을 쓰지 않을 경우, 또는 설명이 부정확할 경우 검색엔진은 페이지에 있는 것 중 다른 것으로 대체 합니다.

목차 중 상단에 있는 것을 노출시킨다든지...

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

페이지를 특정 시간 간격마다 새로 고침하는 refresh도 더 이상 사용하지 않는답니다.

사용자 통제를 빼앗고, 서버 측에서 하는 더 나은 방법이 있기 때문

<meta name="robots" content="noindex, nofollow">

이렇게 하면, 구글에서 자신의 사이트가 색인화되거나 링크 연결이 되지 않도록 설정할 수 있습니다.

주로 사이트가 개발중일 때, 자신의 사이트 중 일부 페이지가 구글에 노출되길 원치 않을 때 사용합니다.

<meta name="robots" content="index, follow">

라고 하면 다시 페이지를 색인화하고, 링크 연결이 됩니다.

그럼 자주 쓰는 meta 태그는?

description, author, charset 속성 정도가 될 것 같습니다.

[참조 사이트]

http://searchenginewatch.com/sew/how-to/2067564/how-to-use-html-meta-tags

http://www.thesitewizard.com/archive/metatags.shtml

http://www.w3schools.com/tags/tag_meta.asp

meta viewport (메타 뷰포트 태그) 사용법

[CSS] @viewport rule

HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)

CSS란? (HTML과 CSS의 차이, CSS 작성법)

HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)

'html' 카테고리의 다른 글

IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법) (2)	2014.12.19
html5shiv 삽입하기 (ie6-8에서 html5 적용하기) (0)	2014.12.18
[html5] datalist 태그 (0)	2014.10.28
fieldset 태그, legend 태그 (0)	2014.10.27
[html] optgroup 태그 (0)	2014.10.24