meta태그

해당 웹 문서에 대한 정보를 알리기 위한 태그
"나 이런 문서야"라고 문서 스스로 알려주는 것
메타 태그를 잘 작성해야 구글,네이버 다음과 같은 각종 검색 사이트에서
잘 검색될 확률이 높아짐
검색이 되게 하려면 구글 서치 콘솔, 네이버 서치어드바이저에 먼저 등록해야함
닫는 태그 x

1.문자 인코딩 방식

<meta charset="UTF-8">

UTF-8은 인코딩 방식중하나
인코딩: 코드를 컴퓨터가 잘 이해하도록 변환하는 과정
종류: UTF-8, ASCII, ANSI, CP949, EUC-KR

2.브라우저 호환성

<meta http-equiv="X-UA-Compatible" content="IE=edge">

인터넷익스플로러에서 작성한 페이지가 잘보여지게 하기 위한 것

3.뷰포트 설정(반응형 사이트)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

해석: viewport를 width를 디바이스에 맞추고 초기 배율을 1.0로 지정
스마트폰, 태블릿, 노트북등 모든 기기에서 사이트가 잘 보여지기 위해 사용
-뷰포트 속성들-
1)width: 화면너비
2)height: 화면높이
3)initial-scale: 초기 확대 비율
4)user-scalable: 확대 및 축소 가능 여부
5)minimum-scale: 최소 비율
6)maximum-scale: 최대 비율

<meta name="viewport" content="width=device-width, initial-sca=1.0, minimum-scale: 1.0, user-scalable:no">

4.해당 문서의 제목

<meta name="title" content="페이지 제목">
ex) <meta name="title" content="일기쓰는 방법">

5.해당 문서의 저자(작성자)

<meta name="author" content="페이지 작성자">
ex) <meta name="author" content="누구">

6.해당 문서에 대한 요약 설명

<meta name="description" content="페이지에 대한 요약 설명">
ex) <meta name="description" content="일기를 잘 쓰기 위한 방법들은 쓴 글입니다">

7.문서 작성시 사용한 편집기

<meta name="generator" content="페이지 작성시 사용한 편집기">
ex)<meta name="generator" content="visual studio code">

8.키워드 정리

<meta name="keywords" content="키워드를 콤마로 나누어 정렬">
ex)<meta name="keywords" content="날짜, 날씨, 제목"

9.사이트 주제

<meta name="subject" content="사이트 주제">
ex)<meta name="subject" content="일기 잘 쓰게 하는 법">

10.캐시(cache)방지

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="-1">

해당 페이지에 대해 캐시를 못하게 막아야 하는 경우에 사용합니다
캐시를 못하게 하면 모든 정보를 서버로부터 새로 가져와야 하기 때문에 페이지가 로드되는데
조금 더 많은 시간이 소요, 반면 페이지를 꾸며주기 위해 변경해준 css파일 등이 바로바로 적용

11.검색 로봇 수집 허용

<meta name="robots" content="index, follow">