HTML - meta 태그

ChanHo Kim·2021년 3월 11일
0

Meta Data: 메타 데이터란?

메타데이터는 데이터를 설명하는 데이터이다.
엄격하게는 어떤 목적을 가지고 만들어진 데이터라고도 불린다.

<Meta>: 메타 태그

html 문서가

  • 어떤 내용을 담고 있고
  • 핵심 키워드는 무엇이며
  • 누가 만들었고
  • charset 은 무얼 사용하는지
  • ... 등

에 대한 정보를 받고 있는 tag(태그) 입니다.

OGP: Open Graph Protocol

Facebook이 웹사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜이다.

Twitter Cards

Twitter 에서도 유사한 형태의 독점적인 자체 메타데이터를 가지고 있는데, 특정 웹사이트의 url이 twittr.com에 표시 될 때와 유사한 효과가 있다.

<!-- 네이버의 헤더속 메타태그 -->
<!-- utf-8 인코딩 -->
<meta charset="utf-8">
<title>NAVER</title> 

<!-- IE브라우저에서 최신 표준 모드를 사용하라  -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- viewport란 content의 크기에서 가장 잘 보인다를 명시 (화면상 표시 영역) -->
<meta name="viewport" content="width=1190">

<!-- iOS 홈 스크린 제목 -->
<meta name="apple-mobile-web-app-title" content="NAVER">

<!-- 검색 로봇의 접근 여부 제어 index=색인대상으로 처리 nofollow=페이지 내의 링크 수집 거부 -->
<meta name="robots" content="index,nofollow"> 

<!-- 검색 후 사이트 정보에 보여질 설명 -->
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">

<!-- Facebook의 open graph data 형식 메타 데이터 설정 -->
<meta property="og:title" content="네이버"> 
<meta property="og:url" content="https://www.naver.com/"> 
<meta property="og:image" content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png"> 
<meta property="og:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"> 

<!-- Twitter의 메타 데이터 설정 -->
<meta name="twitter:card" content="summary"> 
<meta name="twitter:title" content=""> 
<meta name="twitter:url" content="https://www.naver.com/"> 
<meta name="twitter:image" content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png"> 
<meta name="twitter:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">  
profile
프론트엔드❤

0개의 댓글