[HTML] meta tag 정리

<meta>태그?

문서의 자체 특성을 담고있습니다. 검색엔진에게 문서의 내용을 요약해주기도 하며 웹 브라우저에게 정보를 전달하는 역활도 합니다. 메타태그를 잘 입력하면 SEO에 유리합니다.

메타태그 속성정리

charset

• HTML 문서의 문자 인코딩을 지정

content

• meta 정보의 내용을 지정

name

• meta 정보의 이름을 지정
• 보통 검색엔진에게 정보를 전달하기 위한 속성

http-equiv

• name을 대신해 사용가능
• HTML문서가 웹브라우저에 전송되었을때만 의미를 가짐
• 보통 웹브라우저가 서버에 정보를 전달하기 위한 속성

메타태그 활용정리

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

반응형 사이트를 위해 설정합니다

<meta http-equiv="title" content="meta tag" />

페이지 제목을 지정합니다

<meta name="keywords" content="meta tag 정리">

검색 엔진에 의해 검색되는 단어를 지정합니다

<meta name="description" content="meta tag 정리 입니다">

검색 결과에 표시되는 문자를 지정합니다

<meta http-equiv="author" content="name" />

페이지 제작자를 지정합니다

<meta http-equiv="publisher" content="company" />

페이지 제작사를 지정합니다

<meta http-equiv="reply-To" content="test@naver.com" /> 
<meta http-equiv="email" content="test@naver.com" />

메일 주소를 지정합니다

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

검색로봇에 대한 명령입니다. content속성에는 다음과 같이 지정할 수 있습니다.

• all : “index, follow” 를 지정한것과 같습니다
• none : “noindex, nofollow” 를 지정한것과 같습니다
• index : 페이지를 수집대상으로 합니다
• noindex : 페이지를 수집대상으로 하지 않습니다
• follow : 페이지를 포함해 링크가 걸린 곳을 수집대상으로 합니다
• nofollow : 페이지를 포함해 링크가 걸린 곳을 수집대상으로 하지 않습니다
  
  

HTML 5
<meta charset="UTF-8">

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

문자 인코딩을 설정합니다

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

브라우저 호환성을 지정합니다

<meta http-equiv="imagetoolbar" content="no" />

이미지 위에 마우스 오버시 이미지 관련 툴바를 생기지 않도록 하기 위해 지정합니다

<meta http-equiv="Cache-Control" content="no-cache" /> 
<meta http-equiv="Pragma" content="no-cache" />

페이지를 cache에서 가져오지 않게 합니다

<meta http-equiv="Refresh" content="60" />

content의 초마다 새로고침을 정의 합니다

<meta http-equiv="Refresh" content="5;url=주소" />

content 주소로 5초후 이동하는 것을 정의 합니다

페이스북
<meta property="og:title" content="제목">
<meta property="og:site_name" content="사이트명">
<meta property="og:type" content="분류">
<meta property="og:url" content="주소">
<meta property="og:image" content="썸네일 주소">
<meta property="og:description" content="요약내용">

다양한 SNS공유 할때 필요한 정보들 입니다.