시맨틱 요소와 검색 엔진

시맨틱 웹

대부분의 인터넷 사용자들은 검색 사이트를 통해 원하는 정보를 얻는다. 웹사이트가 검색되기 위해서 즉, 검색 엔진에 노출되기 위해서 SEO(검색 엔진 최적화)같은마케팅 도구를 사용하여 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 한다. 이것은 기본적으로 검색 엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로부터 시작된다.

검색엔진은 로봇(Robot)이라는 크롤러로 매일 전세계의 웹사이트 정보를 수집(크롤링)한다. 그리고 이용자의 예상 검색 키워드의 인덱스(색인)을 생성한다.(인덱싱)

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보 즉, 웹사이트의 HTML 코드이다. 검색 엔진은 HTML 코드의 시맨틱 요소(Semantic element)만을 해석하여 그 의미를 인지한다.

<font size='6'><b>Hello</b></font>
<h1>Hello</h1>

위와 같은 코드의 1,2행은 브라우저에서 동일한 외형을 갖지만, 다른 의미를 가진다. 우선 1행의 요소는 어떠한 의미도 갖지 않는다. 하지만 2행의 요소는 header(제목) 중 가장 상위 레벨이라는 의미를 가진다. 이는 개발자가 의도한 요소의 의미가 명확하게함으로써 코드의 가독성을 높이고 유지보수를 쉽게한다.

시맨틱 웹이란 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 의미와 관련성을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

• non-semantic 요소
  content에 대하여 어떤 설명도 하지 않는다.
  div, span 등
• semantic 요소
  content의 의미를 명확히 설명한다.
  form, table, img 등

HTML5에 새롭게 추가된 시맨틱 태그

tag	Description
header	헤더 도입부에 해당하는 콘텐츠나 네비게이션 링크의 집합와 같은 정보
nav	내비게이션
aside	사이드에 위치하는 공간
section	본문의 여러 내용(article)을 포함하는 공간
article	본문의 주 내용이 들어가는 공간
footer	푸터 저자, 저작권, 사이트맵, 연락처와 같은 정보

👨‍🏫 참고

https://poiemaweb.com/html5-semantic-web