[HTML5] meta tag 총정리

HTML5 2019. 10. 31. 15:32
반응형

SEO의 출발은 meta tag이다.

html의 tag는 대부분 <body> tag 내부에 위치 하면서 노출될 웹페이지의 구조 등을 나타내기 위해 사용된다. 반면 meta tag는 <head> tag 내부에 위치 하면서 해당 페이지의 구성에 대한 정보를 기술한다.

이는 사이트를 방문하는 사용자를 위한 정보가 아니라, 검색엔진에 제공될 정보의 요약이라고 볼 수 있다.

따라서 이 meta tag를 잘 작성함으로서 검색엔진에 최적화된 사이트 제작이 가능하다.

 

[ 메타태그의 속성 ]

charset 등 몇가지 예외인 경우도 있지만 대부분 다음의 속성 두가지를 사용한다.

  • name="정보 이름" : meta 정보의 이름
  • content="정보값" : meta 정보의 내용

keywords : 페이지으 키워드

<meta name="keywords" content="html5, css3, javascrip, 강좌" />

description : 페이지으 설명

<meta name="description" content="front-end 개발과 관련된 자료 및 강좌 모음" />

subject : 페이지의 주제

<meta name="subject" content="메타태그 종정리" />

author : 페이지의 저자

<meta name="author" content="developer N" />

viewport : 페이지의 크기와 크기를 제어하는 ​​방법

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

 

이밖에 주요 meta 정보

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <!-- 브라우저 호환성 -->

 

다음은 meta tag를 적용한 예시이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Meta Tag Summary</title>
  <meta charset="UTF-8" /> 
  <meta name="keywords" content="html5, css3, javascrip, 강좌" />
  <meta name="description" content="front-end 개발과 관련된 자료 및 강좌 모음" />
  <meta name="subject" content="메타태그 종정리" />
  <meta name="author" content="developer N" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<body>
  
</body>
</html>

 

 

 

 

 

 

 

 

 

반응형
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,