우리는 검색의 시대에 살고있습니다. "나는 검색된다. 고로 존재한다."라는 말이 있을 정도로 웹사이트에서 검색 엔진 노출은 가장 중요합니다.
검색 엔진 최적화 (SEO, Search Engine Optimization)
검색 엔진 최적화는 웹 페이지 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 노출 될 수 있도록 하는 작업을 말합니다. 검색한 결과 상위에 웹 페이지가 노출된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중 하나라고 할 수 있습니다.
Robot
검색엔진은 로봇(Robot)이란 프로그램을 이용해 전세계의 웹사이트 정보를 수집합니다. 이를 크롤링이라고 하며, 검색엔진의 크롤러가 이를 수행합니다. 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스를 만들어둡니다. 이를 인덱싱이라고 하며 검색 엔진의 인덱서가 이를 수행합니다.
인덱스를 생성할 때 사용하는 정보는 검색 로봇이 수집한 정보인데, 이는 웹사이트 HTML코드입니다. 검색 엔진은 HTML코드 만으로 웹사이트의 의미를 인지하는데 이 때 시멘틱 요소(Sementic element)를 해석하게 됩니다.
시멘틱 요소(Sementic element)
<font size="6"><b>HELLO WORLD</b></html> <h1>HELLO WORLD</h1>
위 두 태그를 비교해봅시다. 두 태그의 브라우저에서의 실행값은 동일합니다.
하지만 1행의 요소는 의미론적으로 어떤 의미도 가지고 있지 않습니다.
그러나 2행의 요소는 제목중 가장 상위 레벨이라는 의미를 가지고 있어 개발자가 의도한 요소의 의미가 명확히 드러나고 있습니다. 이는 코드의 가독성을 높이고 유지보수를 쉽게 합니다.
검색엔진은 h1요소 내의 컨텐츠를 중요한 제목으로 인식하고 인덱스에 포함 시킬 확률이 높습니다. 사람들도 마찬가지겠죠. 시멘틱 요소로 구성되어 있는 웹페이지는 효과적인 크롤링과 인덱싱을 가능하게 합니다.
이렇게 의미론적인 문저 정보를 전달할 수 있게 하는 태그를 시맨틱 태그라고 합니다.
시맨틱 태그로 컴퓨터가 HTML요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 작성하길 바랍니다.
시멘틱 웹
시멘틱 웹이란 웹에 존재하는 수많은 페이지들에 메타데이터(Metadata)를 부여하겨, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상입니다.
HTML 요소는 non-semantic요소, semantic요소로 구분할 수 있습니다.
non-semantic 요소
<div>,<span>,<p>등이 있으며 이들 태그는 요소에 대해 어떠한 설명도 하지 않는다.
semantic 요소
<img>,<table>,<form>등이 있으며 이들 태그는 요소의 의미를 명확히 설명한다
시멘틱 태그
| 태그 | 설명 |
|---|---|
| header | 헤더를 의미한다 |
| nav | 내비게이션(메뉴)를 의미한다 |
| aside | 사이드에 위치하는 공간을 의미한다 |
| section | 본문의 여러 내용(article)을 포함하는 공간을 의미한다 |
| article | 본문의 주내용이 들어가는 공간을 의미한다 |
| footer | 하단 푸터를 의미한다 |
더 많은 semantic tag
