최종 수정일 : 2024-03-31
메타 태그를 공부하기 해서는 head 태그에 대한 이해가 필요하다. HTML의 구조를 이루는 태그 중 <head>에는 다음과 같은 정보를 포함한다.
| 제목을 알려주는 <title> / 링크(CSS 등) / 파비콘(favicon) / 여러 메타데이터 |
<title> : HTML문서 전체의 타이틀을 표현하는 메타데이터
메타데이터?
데이터를 설명하는 데이터
메타태그?
페이지를 설명하는 정보를 작성하는 태그
- 검색엔진과 기타 클라이언트에 페이지에 대한 추가 정보를 제공한다.
- <head> 태그 안에 작성한다.
<head>
<meta>
<meta>
</head>
많은 <meta> 태그는 속성으로 http-equiv, charset, name, content를 갖는다.
http-euqiv="항목명"
- 웹 브라우저가 서버에 내리는 속성
- name 속성을 대신하여 사용될 수 있다.
content="정보 값"
charset="값"
- HTML5에서 추가됐다. 이전에는 http-equiv="UTF-8"로 작성했다.
name="정보 이름"
- 지정하지 않으면 http-equiv와 같은 기능을 한다.
- 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려준다.
- 종류
Keywords : 검색 엔진에 검색되는 단어를 지정
Description : 검색 결과에 표시되는 문자를 지정
author : 저자
title : 해당 문서의 제목 // Q. <title>과 차이점은?
description : 해당 문서에 대한 요약 설명
generator : 문서 작성시 사용한 편집기(파일)
Subject : 사이트 주제
viewport : 모든 기기에서 사이트가 잘 보여지게 하기 위해 사용
<meta name="viewport" content="width=device-width, inital-scale=1.0">
캐시방지
- 모든 정보를 서버로부터 새로 가져와야 하기에 렌더링 시간이 소요된다.
- 하지만 CSS 파일 등이 바로 적용된다는 장점도 있다.
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="-1">+) Open Graph Data
Facebook이 웹 사이트에 더 풍부한 메타데이터를 제공하기 위해 발명한 메타데이터의 프로토콜(=규칙)
<meta property="og:type" content="website">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:imgae" content="페이지 썸네일 이미지 주소">
<meta property="og:url" content="페이지 주소">참고 자료
https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
좀 더 살펴봐야 할 자료
https://webclub.tistory.com/354
https://blog.munilive.com/posts/meta-tag-property-and-use-method.html
'프론트엔드 > HTML 심화' 카테고리의 다른 글
| input 태그에 대한 공부 (0) | 2024.04.01 |
|---|
댓글