메타(meta) 태그란?
웹 서버와 웹 브라우저간에 상호 교화노디는 정보를 정의하는데 사용합니다.
HTML 문서의 <head></head> 사이에 입력하는 특수 태그로
문서가 어떤 내용을 담고 있고 키워드는 무엇인지, 누가 만들었는지 등의 특성을 담고 있습니다.
메타태그의 속성
http-equiv, name, content 3가지 속성이 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="대표적인 키워드">
<meta name="description" content="해당 페이지 설명">
<meta name="author" content="소유자">
<meta name="generator" content="">
<meta name="robots" content="">
<meta http-equiv="refresh" content="">
<meta property="og:type" content="website">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="../img/thumbnail.jpg"><!-- 썸네일 -->
<meta property="og:url" content="사이트주소">
</head>
</html>
meta charset
<meta charset="UTF-8">HTML5의 인코딩 지정 방법입니다.
보통 UTF-8를 값으로 주면 전세계 대부분의 문자를 표현할 수 있습니다.
meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1">뷰포트는 화면에 보이는 영역으로 스크롤해야 보이는 영역을 제외한 보이는 그대로 크기의 영역입니다.
예제 코드는 흔히 쓰이는 코드로 기기의 넓이이며 그에 맞춰 초기 화면 배율을 1로 지정한다는 의미입니다.
meta keywords
<meta name="keywords" content="대표적인 키워드">해당 페이지의 핵심 키워드를 쉼표로 분리하여 표시하면 문서에 대한 정보를 검색 엔진에 제공합니다.
SEO에 중요한 메타 태그입니다.
meta description
<meta name="description" content="해당 페이지 설명">페이지에 대한 설명으로 검색 엔진에 검색 결과 제목 아래 페이지 설명이 나옵니다.
meta author
<meta name="author" content="소유자">웹 페이지의 소유자
'IT > Develop' 카테고리의 다른 글
| [JavaScript]자바스크립트와 제이쿼리 차이점? (0) | 2020.05.04 |
|---|---|
| [JavaScript] 데이터 타입(Data Type) String & Numbers (0) | 2020.05.04 |
| [JavaScript] 이벤트란? 이벤트 핸들러 종류 (0) | 2020.05.04 |
