시맨틱(Semantic)
시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다.
즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.
<Header>, <article>, <nav>, <footer> 같은 태그들이 시맨틱 태그이다. 태그가 의미를 가짐으로써 검색엔진의 크롤링에게 사이트에 대한 정보를 비교적 정확히 제공할 수 있게 된다.
메타태그
메타태그는 웹 페이지의 보이지 않는 정보를 제공하는데 쓰인다. 페이지에 대한 설명, 제작자, 크롤링 정책 등의 정보를 제공할 수 있다.
SEO
SEO는 Search Engine Optimization의 약자로 검색 엔진 최적화를 의미한다.
메타태그를 이용해 description, keywords, author, subject, classification 등의 정보를 표기할 수 있으며, 검색엔진은 이런 정보를 적극적으로 활용한다.
<meta charset="utf-8">
HTML5의 인코딩 지정 방법으로 보통 UTF-8(전세계 거의 모든 문자를 표현할 수 있는 문자 집합)을 값으로 지정하는 편이다.
<meta name="viewport" content="width=device-width, initial-scale=1">
뷰포트는 화면에 보이는 영역을 뜻한다. 즉, 내가 보고 있는 모니터 화면 영역을 말하며, 스크롤로 봐야할 영역은 제외한다.
위 코드는 문서의 넓이는 기기의 넓이이며, 초기 화면 배율은 1로 한다는 의미이다.
<meta name=”keywords” content = “키워드 1, 키워드 2″>
해당 컨텐츠의 대표적인 키워드를 지정한다.
검색 엔진의 검색 결과에 반영될 수 있다. (구글은 반영 X)
<meta name = “description” content = “페이지 내용을 정리한 소개 글(검색 결과 프리뷰로 나타나는 영역)”>
해당 페이지에 대한 설명을 설정한다. 검색사이트에서 검색했을 때 제목 아래에 노출되는 부분이다
<meta name="author" content="소유자">
웹 사이트의 소유자를 적는다.
<meta name="robot" content="noindex nofollow">
인덱싱을 제어하는데 사용되며, 사용가능한 content는 index, noindex, follow, nofollow가 있다.
index와 noinde는 페이지의 인덱스 여부를 말해주며, follow, nofollow는 페이지내의 링크를 크롤러가 따라갈 수 있는지 여부를 말해준다.
