메타태그

메타태그

웹 페이지 전체를 설명하는 것.
제목, 저자, 요약, 검색 키워드 등 설정 .
사이트에 대한 정보를 검색엔진에 제공할 때 사용하는 유용한 방법.

 

메타태그 종류

인코딩 방식 표기

생략 시 브라우저에 따라 다르게 지정

<meta charset=“utf-8”>

 

웹 페이지 요약 정보 (검색엔진 사용)  

<meta name=“description” content=“어쩌고”>  

 

웹페이지 키워드 (검색엔진 사용)

<meta name=“keywords” content=“html,css”>  

 

전화 자동 걸기 방지 

<meta name=“format-detection” content=“telephone=no”>  

 

 

http-equiv

HTTP 헤더의 이름을 값으로 가질 수 있음.
이 속성을 지정하면 문서의 기본 언어, MIME타입, 기본 스타일시트, 브라우저 호환성 설정, 페이지 리로드 등을 나타낼 수 있다.

 

페이지 기본 언어 정의 

<meta http-equiv="content-language" content="ko"> 

 

인코딩과 MIME Type 정의 

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

 

모든 IE 브라우저에 호환성보기 무시  

<meta http-equiv="X-UA-Compatible" content="IE=Edge">  

 

시간(초) 간격으로 화면 리프레시

<meta http-equiv=“refresh” content=“시간(초)”>  

 

시간(초) 뒤에 지정된 url로 이동

<meta http-equiv=“refresh” content=“시간(초)” url="url">  

 

 

viewport

애플이 자사의 모바일 브라우저의 뷰포트 크기를 조절하기 위해 만든 것으로 표준이 아니다.

브라우저 너비를 장치 너비에 맞춤

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

 

브라우저 높이를 장치 높이에 맞춤

<meta name=“viewport” content=“height=device-height">  

 

화면의 초기 확대 비율 지정. (1.0=100%) 

<meta name=“viewport” content=“initial-scale=1.0”>  

 

확대 축소 가능 여부  

<meta name=“viewport” content=“user-scalable=no”>  

 

안드로이드의 경우 사이트가 어떤 화면 크기에 맞추어 개발되었는지 명시 

<meta name=“viewport” content=“target-densitydpi-medium-dpi”>  

 

IE10 이상 에선 뷰포트 크기 조절을 위해 meta viewport가 아닌 w3c표준으로 제안된 @viewport rule을 사용할 수 있다.

@viewport {width:device-width;} 

 

 

og

오픈그래프. 소셜 미디어로 공유될 때 우선적으로 활용되는 정보  

<meta property="og:type" content="blog"> 
<meta property="og:title" content="사이트 제목"> 
<meta property="og:image" content="이미지경로"> 

 

 

app link

<meta property="al:android:app_name" content="App Links">

웹 문서 콘텐츠가 모바일 앱으로 제공이 가능하다면 앱 링크 정보를 넣어 연결이 가능하도록 도와준다.