HTML META 태그 완벽 정리
META 태그란?
<meta> 태그는 HTML 문서의 <head> 안에 위치하며, 브라우저와 검색 엔진에 문서에 대한 정보를 전달하는 태그로,
화면에 직접 표시되지는 않지만 SEO, 반응형 웹, 소셜 공유 등 다양한 역할을 한다
META 태그 종류
① 문서 기본 정보
- 문자 인코딩 지정
<meta charset="UTF-8">- 페이지 설명
<meta name="description" content="웹 개발에 관한 정보를 제공">- 작성자 명시
<meta name="author" content="GORI">② SEO / 검색 최적화
- 키워드
<meta name="keywords" content="웹 개발, HTML, CSS, JavaScript">③ 반응형 / 뷰포트
- 뷰포트 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">④ HTTP 동작 제어 (http-equiv)
- 페이지 자동 새로 고침
<meta http-equiv="refresh" content="30">- 캐시 제어
<meta http-equiv="cache-control" content="no-store">⑤ Open Graph (소셜 미리보기)
- 제목 / 설명 / 이미지
<meta property="og:title" content="웹 개발 블로그">
<meta property="og:description" content="웹 개발에 관한 다양한 자료를 제공">
<meta property="og:image" content="https://example.com/thumbnail.jpg">- URL / 콘텐츠 유형
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">META 태그 순서, 중요할까?
기술적으로는 순서가 중요하지 않다.
단,charset은 예외로 문서를 읽을 때 가장 먼저 필요하다.
charset은<head>상단 1024바이트 이내에 위치해야 한다.
마지막 수정