meta 태그란?
HTML 문서에 대한 메타 데이터(meta data)를 정의하며, 메타 데이터는 데이터에 대한 데이터 또는 "어떤 목적을 가지고 만들어진 데이터"라고도 정의한다.
<meta>태그는 항상<head>요소 안에 위치한다.- 메타 데이터는 웹 페이지에 나타나지 않고, 검색 엔진이나 웹 크롤러를 통해 수집된다.
- 브라우저, 검색 엔진, 소셜 미디어 플랫폼 등이 이 정보를 활용한다.
↪ 즉, 검색 엔진이 웹페이지를 이해하고 색인화(indexing)할 때<meta>태그에 정의된 정보를 활용하므로 "SEO(Search Engine Optimization)"와 연관된다.
주요 속성
1. charset
<meta charset="UTF-8">- HTML 문서의 문자 인코딩 방식을 설정 (위 예시에서는
UTF-8) UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나로 오류가 적고, 다양한 언어의 문자를 표현할 수 있어 가장 많이 사용된다.
2. viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 모바일 기기에서 페이지의 뷰포트 설정을 지정
width=device-width: 디바이스를 화면 너비에 맞춤initial-scale=1.0: 초기 확대 수준을 설정
3. name, content
<meta name="author" content="Sean" />
<meta name="application-name" content="my web project" />
<meta name="description" content="웹 페이지에 대한 설명" />
<meta name="keywords" content="HTML, CSS, JavaScript" />
<meta name="robots" content="index, follow" />- 다양한 메타 데이터를 정의할 수 있다.
author: 페이지의 저자application-name: 웹 애플리케이션의 이름description: 페이지에 대한 간단한 설명generator: 페이지를 생성한 프로그램 표시keywords: 페이지와 관련된 키워드 (검색어로 사용, ',(comma)'로 구분하여 여러 단어 표현 가능)robots: 검색로봇의 검색 제한 (index, follow로 나누어 설정)
4. http-equiv
<meta http-equiv="Content-Language" content="ko">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome" />
<meta http-equiv="refresh" content="30" />
- meta 요소에 정의된 명령을 먼저 실행 후 페이지 로딩
- 문서의 초기 정보를 나타냄
- 웹 페이지의 동작을 제어
Content-Language: 기본언어 설정 (페이지 작성언어)Content-Type: MIME 설정 및 문서의 문자셋 설정(encoding)X-UA-Compatiable: 호환성 설정refresh: 페이지를 리로드하거나 다른 페이지로 이동Content-Script-Type: 스크립트 형식 지정 (javascript/VBscript)Content-Style-Type: 스타일 시트 형식 지정 (css)
5. Open Graph
<meta property="og:title" content="HTML 가이드">
<meta property="og:description" content="HTML에 대한 모든 것을 알아보세요.">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/html-guide">- 소셜 미디어에서 웹 페이지를 공유할 때 사용되는 메타 데이터를 정의
og:title: 콘텐츠 제목og:description: 콘텐츠 설명og:image: 썸네일 이미지 urlog:url: 공유 링크
어제보다 더 나은