[HTML] 메타 태그(Meta Tag)란 ? [3/12 Study]

메타 태그 (Meta Tag)

 

: 메타 태그란, 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그를 말한다.

HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있다. 브라우저나 검색 로봇에게 해당 페이지의 정보를 알려주는 역할임, 웹 페이지 내에서 HTML 에 대한 메타데이터를 제공하는 역할을 한다. 따라서 메타태그를 이해하기 위해서는 메타데이터에 대한 이해가 필요하다.

 

 

메타 데이터(Meta Data)

: 데이터를 위한 데이터, 어떠한 목적을 가지고 만들어진 데이터

웹사이트의 메타 데이터의 경우 주로 웹페이지에 대한 정보 제공 목적으로 사이트 설명, 키워드 등을 뜻한다.

 

메타 태그 속성에는 http-equiv, name, content 3가지 속성이 있음

http-equiv ="항목명"	- 웹 브라우저 서버에 명령을 내리는 속성 - name 속성을 대신해 사용할수 있음 - html 문서가 응답 헤더와 함께 웹 서보로 부터 웹 브라우저에 전송되었을때만 의미를 가짐 - content 속성의 정보 / 값을 위한 HTTP header를 제공 ​ - html4에서는 문자 설정을 할때 사용했지만 html5에서는 문자 설정 방법이 더욱 간단해짐 ex) html4.01 : <meta http-equiv = "content-type" content ="text/html; charcet = UTF-8"> html5 : <meta charset = "UTF-8">
content = "정보 값"	- meta 정보의 내용을 지정 - name 속성과 http-equiv와 연관된 값을 줌.
name = "정보 이름"	- 몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv 와 같은 기능

 

 

SEO를 위한 가장 중요한 메타 태그

 

Meta title

<meta name="title" content="This is Page Title">

 

Meta description

<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">

 

Meta robots

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

 

Meta refresh redirect

<meta http-equiv="refresh" content="5;url="https://example.com/">

 

Meta charset

<meta charset="utf-8">

 

Meta viewport

<meta name="title" content="This is Page Title">

 

https://velog.io/@devjeenie/%EB%A9%94%ED%83%80-%ED%83%9C%EA%B7%B8-Meta-Tag%EB%A1%9C-%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0-SEO

메타 태그 (Meta Tag)로 검색엔진 최적화하기 (SEO) 🔍 👀 👍

위 블로그를 참조하면서 공부했음

 

 

 

🔥마무리

메타 태그로 웹페이지 정보를 명시하기 위한 목적으로 사용되는 HTML 태그라는 사실을 처음알았다

어느 사이트든 반드시 필수로 들어가고 많은 양이 쓰이기에 이 부분도 자세히 보아야겠다

나중에는 눈 감고도 쓸 수 있겠지?