메타 태그
메타 태그란 해당 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/
'프론트엔드 > HTML (Markup Language)' 카테고리의 다른 글
HTML 메타 태그 중 Pragma 지시어 (Pragma directives) 란? (0) | 2023.07.03 |
---|---|
스스로 닫히는, 닫지 않아도 되는 태그들 (self-closing tags) (0) | 2023.04.01 |
시멘틱 HTML (Semantic HTML, 의미론적 HTML, Semantic Markup) 이란? (0) | 2023.04.01 |
HTML 최상단 !DOCTYPE html 의 의미 (0) | 2022.12.14 |