[HTML] Viewport, SEO (검색엔진최적화)

최근 HTML 관련 "HTML5 독학백서"라는 책이 밀리의 서재에 있어서 읽게 되었다. 대부분 아는 내용이였지만, 실무에서 접하기만 하고 제대로 파악하지 못했던 2가지를 정리해보고자 한다.

Viewport

Viewport(뷰포트)란?

웹페이지가 표현되는 영역으로 화면의 왼쪽 끝부터 오른쪽 끝까지를 의미한다.
뷰포트는 meta태그를 통해 설정할 수 있다. 모바일 환경과 PC환경등 다양한 웹 환경이 등장하면서 반응형 웹의 필수요소가 되었다.

주요 속성 (속성들은 content="" 형식으로 추가 가능)

width, height : 화면 폭과 높이
(width=device-width 설정 시 디바이스 화면에 맞춰짐)
initial-scale : 초기 화면 확대 비율 (기본은 1.0)
user-scalable : 사용자가 직접 화면 크기를 조절할 수 있는지 여부

SEO (검색엔진최적화)

구글, 네이버, 다음등 검색엔진에 최적화를 시키는 방법이다.
보통 robots.txt를 통해 크롤링을 차단하는 방법은 알고 있었는데, html상에서 이런 최적화를 할 수 있는지는 처음 알았다.

사실 기능이라기 보다는 html의 규칙을 명확하게 잘 지키고 의미론적으로 명확하게 만들어서 최적화를 진행한다.

명확하고 간결한 title 태그 사용.
meta 태그를 통한 요약 정보 제공.
제목 태그 활용
중복키워드 사용 자제

등등 검색엔진이 보다 잘 이해할 수 있도록 하는 방법이다.

사실 실무에서 이렇게 까지 신경을 쓸일은 없었던 것 같지만, 재밌어보여서 정리를 해보았다.