HTML meta 태그

1 개요[ | ]

HTML <meta> tag, meta element
HTML meta 태그, 메타 요소, 메타 엘리먼트

웹페이지에 관한 메타데이터를 제공하는 HTML 태그
웹페이지에 직접 나타나지는 않음
페이지 설명, 키워드, 문서 작성자, 마지막 수정 시점 등을 표현하기 위해 사용함
브라우저에서 어떻게 화면에 보여줄지에 대한 데이터를 가지고 있음
검색엔진의 키워드 용으로 사용됨
<head>요소 안에 있어야 함

2 캐릭터셋 표현[ | ]

HTML4 방식 (구식)

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >

HTML5 방식

<meta charset="UTF-8" >

3 콘텐츠 정보[ | ]

오픈 그래프 프로토콜 문서를 참고하십시오.

해당 웹페이지에 있는 콘텐츠의 정보를 표시하기 위해 활용된다. 아래는 유투브 활용예시.

<meta name="title" content="PSY - GANGNAM STYLE (강남스타일) M/V">
<meta name="description" content="PSY - Gangnam Style (강남스타일) ▶ NOW available on iTunes: http://Smarturl.it/psygangnam ▶ Official PSY Online Store US &amp; International : http://psy.shop.bravado...">
<meta name="keywords" content="PSY, 싸이, 강남스타일, 뮤직비디오, Music Video, Gangnam Style, KOREAN SINGER, KPOP, KOERAN WAVE, PSY 6甲, 6th Studio Album, 싸이6집, 육갑, YG Family, YG Entertainment">

이외 더불어 오픈 그래프 프로토콜 형식으로 많이 활용되고 있다.

4 사이트 정보(구식)[ | ]

과거에는 검색엔진 최적화라는 명목으로 사이트 정보를 표시하기도 했지만, 현재는 이런 방식으로 잘 사용하지 않는다.^[1]

<meta name="description" content="JMNOTE입니다.">
<meta name="keywords" content="키워드1, 키워드2, 키워드3">

사례 1 --- 야후

<meta name="description" content="세계에서 가장 많이 방문하는 홈 페이지인 야후!에 오신 것을 환영합니다. 검색하는 것을 빨리 찾고, 친구와 계속 연락하면서 서로의 최근 소식과 정보를 놓치지 말고 챙기세요.">
<meta name="keywords" content="야후, 야후 홈 페이지, 야후 홈페이지, 야후 검색, 야후 메일, 야후 메신저, 야후 게임, 뉴스, 금융, 스포츠, 엔터테인먼트">

사례 2 --- korea.kr

<meta name="keywords" content="대한민국 정책포털 korea.kr 공감코리아" />
<meta name="description" content="대한민국 정책포털 korea.kr 공감코리아 홈페이지 입니다." />

5 같이 보기[ | ]

6 참고[ | ]

↑ 2013년 현재, 네이버, 다음, 구글, 네이트, 파란 메인페이지에서는 찾을 수 없었다.

[1] 2013년 현재, 네이버, 다음, 구글, 네이트, 파란 메인페이지에서는 찾을 수 없었다.

[1]