[HTML] meta / og태그

meta태그란 ?

HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있습니다

HTML <meta> 요소는 <base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.

 

1.meta 요소가 제공하는 메타데이터 유형(4)
1) name 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공합니다.

: name과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다. 

  name은 이름, content는 값을 담당합니다.
2) http-equiv 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"이 됩니다.

: 프래그마 지시문을 정의합니다. 특성의 이름(http-equiv(alent))에서 알 수 있듯이, 가능한 값은 특정 HTTP 헤더입니다.

• content-security-policy현재 페이지의 콘텐츠 정책을 정의할 수 있습니다. 대부분의 콘텐츠 정책은 허용하는 서버 출처와 스크립트 엔드포인트를 지정해 사이트 간 스크립트 공격 방어에 도움을 줍니다.
• content-type지정할 경우, content 특성의 값은 반드시 "text/html; charset=utf-8"이어야 합니다. 참고: text/html MIME 유형으로 제공하는 문서에서만 사용할 수 있으며, XML MIME 유형의 문서에서는 사용할 수 없습니다.
• default-style기본 CSS 스타일 시트 세트의 이름을 지정합니다.
• x-ua-compatible지정할 경우, content 특성의 값은 반드시 "IE=edge"여야 합니다. 사용자 에이전트는 이 프래그마를 무시해야 합니다.
• refresh
  다음을 지정합니다.
  • content 특성에 양의 정수 값을 설정한 경우, 페이지를 다시 불러오기 전까지의 초 단위 대기시간.
  • content 특성이 양의 정수 값을 가지고 그 뒤를 문자열 ;url=과 유효한 URL이 뒤따른다면, 해당 URL로 이동하기 전까지의 초 단위 대기시간.
  접근성 고려사항
  refresh 값을 지정한 페이지의 경우 새로고침 사이 간격이 너무 짧을 우려가 있습니다. 스크린 리더 등의 보조 기술로 탐색하는 사용자는 자동 새로고침 이전에 페이지의 내용을 읽고 이해하지 못할 수 있습니다. 또한 저시력 사용자에게 있어, 갑작스럽고 사전 안내도 없는 콘텐츠 업데이트는 어지러울 수 있습니다.

3) charset 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 됩니다.

: 페이지의 문자 인코딩을 선언합니다. 이 특성이 존재할 경우, 

그 값은 반드시 문자열 "utf-8"의 대소문자 구분 없는 ASCII 표현이어야 합니다.
4) itemprop 특성을 지정하면 "사용자 정의 메타데이터"를 제공합니다.

 

 

 

---

 og 태그란? "링크미리보기"

meta태그는 브라우저나 검색 로봇에게 해당 페이지의 정보를 알려주는 기능이 있는데

기술이 발전해도 웹문서와 같은 비정형적인 정보를 100%인식하기 어렵다.

표기방법 중 페이스북의 오픈그래프 프로토콜을 사용하는 것이 og태그이다.

 

오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌습니다.

 

 

 

 

 

 

---

[참조]

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta

<meta>: 문서 레벨 메타데이터 요소 - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/itemprop

itemprop - HTML: Hypertext Markup Language | MDN

https://mygumi.tistory.com/24

meta og 태그에 대한 오픈그래프 알기 : 마이구미

https://github.com/kesuskim/Front-End-Checklist

GitHub - kesuskim/Front-End-Checklist: 🗂 최신 웹사이트와 꼼꼼한 개발자들을 위한 완벽 프론트엔드 체

https://ogp.me/

Open Graph protocol