메타 태그란?

MJ·2022년 7월 2일
1

[개발용어]

목록 보기
3/11

1. 매타 태그

  1. 메타태그는 웹 브라우저가 웹 페이지에 대해서 필수로 알아야할 정보들을 포함한 태그 입니다.
  2. 웹 페이지가 어떤 문서유형이고, 키워드는 무엇이며, 개발자는 누구인지 등에 대한 정보가 있다.
  3. 문자인코딩 및 문서 키워드에 대한 요약 정보를 나타냅니다.
  4. 검색엔진이 페이지에 해당하는 키워드를 입력 했을 때, 웹 페이지가 잘 나타나게
    도와주는 seo 최적화 작업 또한 메타 태그에 해당 합니다.

1.1 메타 태그의 속성

메타 태그는 대표적으로 http-equiv name content charset 4가지 속성이 있습니다.

  • charset 속성은 HTML5 버전에서 새로이 추가 된 속성 입니다.
  • 이전 버전의 HTML 에서는 http-equiv content 속성의 속성 값으로 사용되었습니다.
  • HTML5 버전에서도 여전히 http-equiv 속성을 사용하여 문자 인코딩 방식을 명시하는 것을 여전히 허용하지만, charset 속성을 사용하면 더욱 간단하게 명시할 수 있습니다.

http-equiv="항목명"

  • 웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있고
    HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖는다.

content

  • meta 정보의 내용을 지정한다.

name=정보이름

  • 몇 개의 meta 정보의 이름을 정할 수 있으며, 지정하지 않으면 http-equiv와 같은 기능을 합니다.

1.2 메타 태그의 종류

<meta name="Keywords" content="Web, html, css" />
# 검색 엔진에 검색되는 단어를 지정합니다 

<meta name="Description" content="Web, html, css" />
# 검색 결과에 표시되는 문자를 지정합니다

<meta name="Robots" content="noindex, nofollow" />
# 검색 로봇을 제어 합니다
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
# 웹 페이지에 대한 문서 인코딩 방식을 지정 합니다 ( utf-8 )

<meta http-equiv="Content-Style-Type" content="text/css;" />
# 웹 페이지에 쓰인 개발 언어를 정의 합니다.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
# 웹 브라우저에 호환성을 지정 합니다.

<meta http-equiv="Title" content="HTML 언어로 작성한 문서 페이지" />
# 웹 페이지에 제목을 지정 합니다.

이외에도 여러 상황에 맞게 여러 속성을 사용할 수 있습니다.

profile
프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그

0개의 댓글