frontendhtml

meta tag

, ,

meta tag?

meta tag는 extra information입니다. 즉 추가 정보라고 생각하면 됩니다. meta tag는 브라우저를 위한 정보이고 유저를 위한 정보는 아닙니다. 그렇기 때문에 head tag안에 사용합니다. 과거에는 메타태그가 검색결과에 미치는 영향이 컷지만 상업적으로 악용하는 페이지가 많아 구글과 같은 검색엔진 회사에서는 요즘 메타태그 보다는 웹표준을 지켜 만든 웹사이트를 우선적으로 검색 결과에 노출시켜준다고 합니다.

charset

1
2
3
<head>
  <meta charset="utf-8">
</head>

charactor encoding이라는 것이고 UTF-8로 설정합니다. charset은 만든 웹사이트가 어떤 언어로 되어있는지 브라우저에게 알려줍니다. charset을 잘 못 설정하게 되면 웹사이트는 언어를 해독하지 못하여 ��蠍�덩어리로 표현됩니다.

1
<meta charset="euc-jp">

위와 같이 언어를 일본어로 설정하고

1
2
3
4
5
<body>
  <h1>
    한글
  </h1>
</body>

바디 태그 안에 한글을 사용하게 되면

위와 같이 한글인식이 되지않아 글씨가 깨지게 됩니다.

name

1
2
3
4
5
<head>
  <meta name="author" content="swtpumpkin">
  <meta name="description" content="Welcom to my HTML page">
  <meta name="keyword" content="kakao, clone, study">
</head>

name의 속성은 meta tag의 요소에서 문서를 정의합니다.

attribute content
author 페이지의 저자를 의미합니다.
description 페이지의 내용을 설명하는 문자열을 지정 할 수 있습니다.
keyword 페이지와 관계있는 키워드를 작성합니다. 콤마(,)로 구분합니다.

ect

meta tag는 이 외에도 facebook, naver, twitter등 특정한 곳에서 사용되는 태그가 있습니다.

공유하기