HTML 메타 태그란? meta tag

메타 태그

메타 태그란 해당 HTML 페이지에 어떠한 내용이 들어있는지 미리 알려주는 것이다. 브라우저가 페이지를 해석하는데 도움도 주고, 검색엔진이 페이지를 읽을 때도 이 부분을 가져간다. 또한 SNS 에 공유할 때 나오는 썸네일 등도 이 부분에서 가져온다.

인코딩 정보

<meta charset="utf-8" />

크롬과 같은 브라우저에서는 utf-8 을 사용하지 않아도 자동으로 인코딩을 고쳐주는 경우도 있다. 그러나 모든 사람이 크롬 브라우저만 사용하는 것은 아니므로 안정적인 동작을 보장해주기 위해서 위의 charset="utf-8" 을 적어주는 것이 좋다.

페이지의 저자와 내용

<meta name="author" content="Chris Mills" />
<meta
  name="description"
  content="The MDN Web Docs 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 에 메타태그의 종류(name, description 등)를 입력하고, content 에 내용을 입력한다.

og: 태그

og 태그는 Open Graph Data 메타 데이터 프로토콜에 사용되는 메타 태그로 페이스북이 발명했다.

<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 HTML Apps."
/>
<meta property="og:title" content="Mozilla Developer Network" />

twitter: 태그

트위터에서 개발한 메타 데이터 프로토콜이다. 트위터에서 링크 공유 시에 활용된다.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta
  property="og:url"
  content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/"
/>
<meta property="og:title" content="A Twitter for My Sister" />
<meta
  property="og:description"
  content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling."
/>
<meta
  property="og:image"
  content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg"
/>

메타태그를 풍부하게 넣었을 때의 장점

• 검색엔진 최적화에 유리하다.
• SNS 나 카톡 같은 메신저로 링크를 공유했을 때도 풍부한 정보를 제공해줄 수 있다.

레퍼런스

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
https://wonism.github.io/meta-for-social/