TIL | Meta tag

meta tag

meta tag란?

메타데이터: 속성정보 라고도 불리며 데이터에 관한 구조화된 데이터, 다른 데이터를 설명해주는 데이터라고 한다. 즉 데이터를 표현하기 위한 목적과 데이터를 빨리 찾기 위한 목적으로 사용된다.

• 문서에 대한 정보인, 메타 데이터를 정의할때 사용하는 태그이다.
• 브라우저나 검색 엔진, 타 웹서비스에서 해당 웹과 관련된 정보를 제공할 때 사용된다. (브라우저나 검색 로봇에게 해당 페이지의 정보를 알려주게 된다.)

---

 

meta tag property 종류

charset property

<meta charset="utf-8" />

• 페이지의 문자 인코딩 방식을 선언한다.
• utf-8이 일반적으로 가장 많이 사용되는 인코딩 방식이다.

 

name, conent property

<meta name="author" content="Chris Mills" />
<meta
  name="description"
  content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications."
/>

• name과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값의 형태로 제공할 수 있다.
• name과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다. name은 이름, content는 값을 담당합니다.
• name: 메타 요소가 어떤 형태의 정보를 갖고 있는지 알려준다.
• content: 실제 메타 데이터의 컨텐츠를 뜻한다.

 

property open graph

<meta property="og:title" content="Mozilla Developer Network" />
<meta
  property="og:image"
  content="https://developer.mozilla.org/static/img/opengraph-logo.png"
/>
<meta
  property="og:description"
  content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS."
/>

• open graph는 html 문서의 메타 정보를 쉽게 표기하기 위해 만든 메타 데이터 프로토콜이다.
• 페이스북에서 개발하였으며, 일반적으로 SNS 미리보기(썸네일)(카카오톡, 페이스북) 에 게시되는데 최적화된 데이터를 설정할 수 있다.
• og:title : 미리보기 상 표시될 콘텐츠 제목을 뜻한다.
• og:description : 미리보기 상 표시될 웹페이지 설명을 뜻한다.(제목 아래에 표시)
• og:image : 미리보기 상 표시될 이미지를 뜻한다.
• og:type : 미리보기 상 표시될 웹페이지 타입(blog, website 등)을 뜻한다.

---

 

Reference

• head 태그에는 무엇이 있을까? - MDN
• : 문서 레벨 메타데이터 요소
• 메타 데이터 - Naver
• '메타데이터(metadata)'란?