본문 바로가기

HTML&CSS

HTML <meta> 태그 기초

반응형

<meta> 태그는 메타 태그라고 하고, HTML 문서의 메타 정보를 기록하는 태그입니다.

 

메타 정보는 HTML 문서의 주요 키워드, 상세 설명, 문서 작성자 정보, 인코딩 정보, 모바일 기기를 위한 뷰포트 배율 정보, 검색 엔진을 위한 정보 등 아주 다양한 정보를 담게 됩니다.

 

사진으로 치면 사진 이미지 파일 안에 기록된 사진 크기, 촬영 날짜, 이미지 포맷, 촬영 기종, 컬러 정보 정보 등을 저장한 정보가 메타 정보입니다.

 

문서에 대한 주요 요약 정보를 담는 용도로 사용하는 태그이고, 태그 자체의 사용 용도에 제한은 없습니다.

그래서 메타 태그에는 다양한 부가적인 정보들을 표시해서 웹 페이지를 구분하는 용도로 사용하기도 합니다. 예를 들어 검색엔진은 웹페이지 검색 인덱스를 등록하려는 이용자에게 사이트의 진윈 여부를 파악할 수 있도록 메타태그에 고유의 키를 표시하는 방법을 사용하기도 합니다.

 

모던 웹에서 메타 태그를 검색엔진 인덱스 데이터로서 활용도가 가장 큽니다.

검색엔진은 메타 태그의 각종 정보를 이용해 웹 페이지를 분류하고, 웹 검색 결과를 표시하는데 반영합니다.

 

 


 

메타 태그의 위치

 

메타 태그는 <head></head> 태그 사이에 위치해야 합니다.

헤더 영역에 위치해야 하고 그렇지 않은 메타태그는 무시됩니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta author="어포스트">
    <title>HTML페이지</title>
</head>
<body>
    <p></p>
</body>
</html>

 

무시된다고 했지만, 대부분의 검색엔진은 <head> 태그 안에 메타 태그가 없어도 메타태그를 인식합니다.

<head> 태그 안에 있어야 하지만, 꼭 <head> 태그 하위의 <meta> 태그로 한정하지는 않습니다. <body> 태그 안에 메타 태그가 있어도 HTML 페이지 안의 메타 태그를 모두 찾아서 검색 엔진 인덱스에 활용합니다.

 

그러나 페이스북 오픈그래프 메타태그는 <head> 태그 바깥에 있으면 무시되기 때문에, 오픈그래프 메타태그는 반드시 <head> 태그 안에 위치해야 합니다.

 

메타 태그는 기본적으로 2개의 속성으로 키와 값을 표시합니다. 키는 name 속성으로 속성의 값은 content 속성으로 표시합니다. 예외적인 속성으로 name 속성 대신 http-equiv, charset 속성 등을 사용하는 메타 정보도 있습니다.

 

<meta name="description" content="티스토리 반응형 스킨, 2단 스킨, 포토갤러리 스킨">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 


 

작성자 표시

 

웹사이트 작성자, 소유자, 회사명, 웹페이지 저작권자 등의 정보를 표시하는 메타 태그로 name 속성에 "author"로 값을 표시합니다. 작성자 정보는 content 속성 값으로 표시하고, 여러 개의 정보를 구분해 표시할 때는 콤마로 구분해서 나열합니다.

 

<meta name="author" content="APost, Tistory Blog">

 


 

인코딩 정보표시

 

현재 HTML 페이지의 언어 인코딩 정보를 표시합니다.

문자 인코딩 정보(Character Encoding)를 표시하는 기본 방법은 charset 속성으로 표시하는 것입니다. charset 속성 값은 대부분의 경우 "utf-8"이 기본입니다.

 

<meta charset="utf-8">

 

길게 사용하는 문자 인코딩 정보 표시는 다음과 같고, 둘은 동일합니다. 둘 중 하나만 사용하면 됩니다. 짧은 표현을 추천합니다.

 

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

 


 

검색 엔진을 위한 키워드와 상세 설명 표시

keywords, description은 검색엔진을 위한 메타 태그들입니다. 그리고 검색엔진 검색 봇(크롤러)을 접근 제어를 위해 property="robots" 속성을 사용합니다.

 

<meta name="keywords" content="homepage, blog, company">
<meta name="description" content="티스토리 반응형 스킨, 2단 스킨, 포토갤러리 스킨">
<meta property="robots" content="index, follow">

 


 

모바일 기기를 위한 뷰포트 설정

 

모바일 기기, 또는 다양한 디바이스에 대응할 수 있도록 웹페이지의 표시 배율을 정합니다.

기본 뷰포트 설정은 다음과 같이 사용합니다.

 

<meta name="viewport" content="width=device-width">

 

모바일 기기에서 사용자가 화면을 줌 할 수 없도록 막으려면 다음과 같이 설정하면 됩니다.

 

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">

 


 

브라우저(유저 에이전트) 호환성 정보 표시

인터넷 익스플로러 호환성 문제가 오랜기간 지속되면서 웹 브라우저 하위 호환성 유지를 위해 사용하는 메타 속성입니다.

인터넷 익스플로러와 구형 엣지 브라우저가 퇴출 수순을 밟고 있기 때문에 향후에는 앞으로는 필요가 없는 메타 속성입니다.

 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 


 

사용자 정의 메타태그

 

검색엔진 등에서 크롤러로 방문하는 웹사이트의 정보 확인을 위해서 메타 태그로 여러 가지 추가 정보를 표시하기 위해 사용합니다.

특정 검색엔진, 또는 서비스를 위한 정보를 표시하는 용도로 임의로 메타 속성을 정의해서 사용할 수 있습니다.

 

<meta name="google-adsense-platform-domain" content="tistory.com">
<meta name="google-site-verification" content="P9edKkB_8abCtnNC17FVtvy5bQtK3bzyAwOHzdbiwZQ" />

 

반응형

닫기