1. 메타태그란? (META = Most Effective Tactics Available)
메타태그는 헤드태그 안에서 존재하는 요소중에서 없어도 별 문제가없는,
필수가 아닌 놈이지만, 페이지 최적화에서 중요한 놈이다.
웹페이지를 가장 적합하게 사용하기위해서 그 정보를 제공해주는 놈이 META,
페이지에 보여지지 않고, 페이지를 엔더링하는 브라우져 서치엔진 웹서비스에서 읽혀지는 하나의 헤더이다.
소셜미디어를 위한 태그, 페이지를 공유할수있는 매개체를 위한 정보까지 메타태그,
마케팅과 직접적인 연관이 있다.
2.메타태그의 종류
메타태그는 <meta http-equiv="" name="" content="" charset=""/>
이렇게 4개 속성을 가지고있고, content는 말그대로 내용물을 나타내는 태그이다.
1) charset
!tab을 하거나, codesandbox에서도 항상 기본적으로 이렇게 <meta charset="UTF-8"/> 설정되어 있는 태그이다. (한국이라면..?)
UTF-8이란 문자열을 인코딩하는 방식 중 하나라고 한다. charset 은 그런 방식을 선택하는 셀렉터 역할이라고 생각된다.
2) name
넌 이름이 뭐니~? 할때 그 name인데..
속성으로는
- author
- description
- generator
- keywords
- viewport
이런 종류들의 속성이 있다고 한다.
(1) viewPort
모바일 기기에서 크기 결정 하는값을 지정, 반응형을 위해 사용한다.
컨텐츠의 width를 모바일의 width에 맞게 하기위해
<meta name="viewport" content="width=device-width",initial-scale=1.0/>
height도 있으나, 일반적으로 width에 맞춘다.
추가적으로 , <meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=3.0"/>
이것은 사용자가 사용할수 있는 줌인 아웃 한계치 설정, 안되게 하려면+ user-scalable=no 로 하면된다.
(2) description, Keyword
description은 페이지에 대한 설명을 나타내며, 그 설명을 사용자가 아닌 서치엔진에게 한다.
<meta name="Description content="This is HTML page description"/>
Keywords는 검색엔진에 걸리는 특정 단어를 나타낸다.
<meta name="Keywords" content="html,정복"/>
여기서 주의할 점은 검색에 걸리기 위해 컨텐츠에 일치하지 않는 내용을 입력하게 되면
검색엔진이 스캠으로 간주하거나 검색순위에서 떨어지게 된다고 한다.
(3) Robot
Robot이란 검색엔진을 칭하고, 거기에 대한 액션을 content에서 정의 해준다.
<meta name="Robot"content="all"/>이것이 기본값으로 설정 되어 있다.
=== <meta name="Robot"content=""index,follow"/> 동일하다
이 설정은 페이지를 검색 엔진의 결과물로 뿌려지게 하고,
페이지를 포함해 링크가 걸린 모든 페이지를 수집대상으로 정하게 하는 설정이다.
그렇다면 반대 되는 noindex,nofollow는
<meta name="Robot" content="noindex, nofollow"/> 이렇게 사용하고,
효과는 위에서 설명한것의 반대라고 생각하면 된다.
3) http-equiv
<meta http-euqiv="x-UA-Compatible" content="ie=edge"/>
호환성표기,인터넷익스플로러가 어떤 렌더링 엔진을 사용할지 선택하는 태그
<meta http-equiv="Subject,Title,Author,Publisher,other Agent, Location, Distribution, Copyright" content="" />
언어뜻 그대로 저런 정보들을 담을수 있다.
<meta http-equiv="cashe-control" content="no-cashe"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="expires" content="mon,08,jun 2020 12:00">
만료일,만료일이 경과하면 캐쉬를 사용하지 않고 서버에서 로드함
<meta http-equiv="refresh" content="60"/>
컨텐트를 그때마다 페이지를 refresh되도록 설정할수 있다.
<meta http-equiv="Refresh" content="10; url=https:daqko.com" />
이렇게하게되면 지정된 주소로 10초후에 이동한다.
개발자 첫 공부로 HTML을 시작했지만
추후에 너무나 많은것들을 배워가면서 처음에 배웠던 지식은 무의식적으로 중요순위가 낮아지면서 차츰
잊어 먹게 된다.
Meta태그 공부를 다시 하다보니 굉장히 중요한 태그란것을 느끼게 되었고
이렇게 정리했다.
한번 정리한 내용들의 디테일한 내용들은 잊어먹더라도,
이 메타태그가 어떤 역할을 하는지는 잊어먹진 않을테니
프로젝트를 진행할때 메타태그를 꼼꼼히 사용 해봐야 겠다.
코린이? 개린이!