시멘틱 태그 & 검색엔진 (+크롤링)
이 글의 모든 출처는 : poiemaweb.com/
웹 프로그래밍 튜토리얼 | PoiemaWeb
Front-end Development Tutorial
poiemaweb.com
위 사이트임을 밝힙니다.
요즘은 웹사이트 개수가 19억개가 넘어간다고 합니다. 검색엔진에 노출 되는 것은 인터넷 상에서 매우 강력한 권력이지만, 웹사이트 개수가 19억개가 넘어가는 만큼 매우 어려운 일일 것입니다.
그래서 요즘은 SEO ( Search Engine Optimization = 검색엔진 최적화 도구 ) 라는 도구를 이용해서, 내가 만든 웹사이트를 검색엔진이 검색하기 쉽도록 구조를 조정하기도 합니다.
검색엔진은 로봇(Robot) 이라는 프로그램을 이용해서 매일 전세계 웹사이트 정보를 수집합니다. 목적은 검색을 빠르게 할 수 있도록 하기 위함입니다. 사용자가 검색할만한 키워드를 미리 예상해서 그 키워드에 대응하는 인덱스(색인)를 미리 만들어 둡니다. 이 때, 인덱스(색인)이란 검색을 빠르게 하기 위해 데이터를 저장해두는 장소와 내용물을 의미합니다.
미리 만들어 두는 것을 도서관의 책 찾기에 비교하면 이해가 쉽습니다. 책을 카테고리별로 분류해두면 특정 책을 찾을 때 빠르게 찾을 수 있는 것처럼, 예상 검색 키워드에 근접한 정보를 미리 모아두면 검색할 때 빠르게 찾아올 수 있습니다.
* 검색엔진이 사용하는 로봇을 크롤러 라고 합니다. 웹사이트 정보를 파악 & 추출 (스크래핑) 하는 것을 크롤링이라고 합니다.
이 때, 이 인덱스를 생성할 때 사용하는 정보가 HTML 코드입니다.
그 중에서도 시멘틱 요소 (Semantic element) 를 해석해서 사이트를 크롤링 하고 색인화 해둡니다.
예를 들어서
<font size="6"><b>Hello<b></font>
<h1>Hello</h1>
브라우저에서 위와 아래 각각 요소는
위와 같이 동일하게 보일 것 입니다. 하지만 의미를 해석해보면
<font size="6"><b>Hello<b></font>
위 코드는 사이즈 6의 볼드체 폰트를 가진 글자 Hello 를 의미한다면,
<h1>Hello</h1>위 코드는 헤더(제목)란 의미를 가진 글자 Hello 를 의미합니다. 제목중에서도 1번째 라는 의미 또한 가집니다.
즉, HTML 문서라는 맥락 (상황) 속에서 전자는 단순히 글자를 의미할 뿐이므로 별 의미가 없는 반면 후자는 제목이라는 특별한 의미를 가지게 되는 것입니다.
이렇게 시멘틱 요소를 사용함으로써, 개발자가 의도한 바(제목입니다)를 명확하게 드러내고 있습니다. 이는 코드의 가독성을 높이고 유지보수를 쉽게합니다. (한눈에 읽히므로 빠르게 찾아 수정 가능)
검색엔진은 대체로 h1 요소 내부의 콘텐츠(글자)를 중요한 제목으로 인식하고 인덱스에 포함 시킬 확률이 높습니다.
즉, 시멘틱 요소로 HTML 문서가 구성되어 있다면, 좀 더 효과적으로 크롤러에게 문서의 의미를 전달 할 수 있습니다.
검색 엔진 입장에서 보면, 시멘틱 요소를 검색함으로서 보다 효과적인 인덱싱이 가능해집니다.
결론 : 시멘틱 태그는 개발자, 검색엔진(+브라우저) 모두에게 HTML 문서가 의미하는 바를 명확하게 설명하는 역할을 합니다. 이 semantic element를 잘 구현한 웹 콘텐츠를 시맨틱웹이라고 합니다.
시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata = 이 데이터가 어떤 데이터 인지 나타내는 정보)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
non-semantic 요소
div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
semantic 요소
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다,
다음은 HTML5에서 새롭게 추가된 시맨틱 태그이다.
tagDescription
| header | 헤더를 의미한다 |
| nav | 내비게이션을 의미한다 |
| aside | 사이드에 위치하는 공간을 의미한다 |
| section | 본문의 여러 내용(article)을 포함하는 공간을 의미한다 |
| article | 분문의 주내용이 들어가는 공간을 의미한다 |
| footer | 푸터를 의미한다 |
