- 01.28 1차 피드백을 받고 정리한 내용입니다.
<head>태그 내 <meta charset="UTF-8"> 태그는 자동 완성으로 항상 들어가있고, 재학 당시에도 그냥 넘어가라고 해서 그렇게 크게 눈여겨보지 않았었다.
하지만 이번 프로젝트에선 "코드 한 줄을 작성하더라도 알고 작성하자"가 목표였기에 메타 태그에 대해서 처음으로 찾아보게 되었다. 무지성 복붙을 하다보니 내 코드에 들어가 있는 메타 태그가 왜 필요한지 설명을 못한 것도 공부하게 된 계기이다
<meta> 태그란?
웹 서버와 브라우저 간 상호 교환되는 정보를 정의하는데 사용하는 태그이다. HTML 문서에서 <head> 태그 안에 입력되는 특수 태그로, 사이트 디자인엔 영향을 미치지 않는다. 문서가 어떤 내용이고 어떤 키워드를 가지며 누가 만들었는지 등의 문서 자체의 특성을 담는다.
<meta> 태그의 속성엔 http-equiv, name, content의 3가지가 있다.
http-equiv 속성
- 웹 브라우저가 서버에 명령을 내리는 속성
- HTML 문서가 응답 헤더와 함께 웹 서버로부터 브라우저에 전송되었을 때만 의미를 가진다.
- name 속성을 대신하여 사용 가능
name 속성
<meta>정보의 이름을 지정- 지정하지 않으면 http-equiv와 같은 기능 수행
content 속성
<meta>정보의 내용 지정
출처: Web Club
구글에서 인식하는 메타 태그들
<meta> 태그 예시
- 검색 엔진에 의해 검색되는 단어 지정
- 검색 결과에 표시되는 문자 지정
- 검색 로봇 제어
<meta name="robots" content="noindex">- 문자 인코딩 설정
- 문서 제작일
- 웹 페이지에 쓰인 프로그래밍 언어 지정
- 브라우저 호환성 지정
- 홈페이지 주제 지정
- 제목,제작자명,제작사,웹 책임자, 메일 주소, 제작 도구 등을 지정
<meta name="author" content="">- 그림 위에 마우스를 올려놓을 시 이미지 관련 툴바를 막기
- 캐시 방지 및 만료일 정의
- 새로고침 정의
- 입력한 주소로 이동
<meta http-equiv="refresh" content="0; url="https://">- 페이지 들어갈 때 장면 전환
출처: Web Club
SEO(search engine optimization; 검색엔진최적화)란?
- 검색 엔진으로부터 웹 사이트나 웹 페이지에 대한 웹 사이트 트래픽의 품질과 양을 개선하는 과정
출처: 위키백과 - 컨텐츠를 검색 결과의 상위에 표시함으로써 사이트 유입을 늘릴 수 있다
- 이를 위해 사용되는 것 중 하나가
<meta>태그
SEO에 <meta> 태그가 중요한 이유
페이지에서 가장 처음 수집되는 정보, 검색엔진이 가장 처음 수집한다. 검색 결과에서 사이트 제목에 해당되는 것이 <title>, 그 아래 들어간 설명이 <meta> 태그에서 name="description" 속성에 해당한다.
따라서 사람들에게 적절하게 보여지고 원하는 효과를 얻기 위해 적절하게 <meta> 태그를 사용해야 한다.
출처: hightch
