#3 시맨틱 요소와 검색엔진 - <자바스크립트-HTML5>

출처 : https://poiemaweb.com/

웹 프로그래밍 튜토리얼 | PoiemaWeb

 

#1.3 Semantic Web

 

시맨틱 요소와 검색 엔진

 

 

 

필사 :

 

시맨틱 웹(Semantic Web)

 

2018년 기준 전세계적으로 웹사이트는 19억개, 인터넷 사용자 수는 40억명이다.

 

 

대부분의 인터넷 사용자는

원하는 정보를 취득하기 위해 Google이나 Naver 같은 검색사이트를 이용한다.

 

"나는 검색된다. 고로 존재한다"는 말이 있을 정도로

웹사이트는 검색엔진에의 노출이 매우 중요하다.

 

당연한 것이 검색엔진에 노출되지 않는 웹사이트에는 접속하는 이도 없기 때문이다.

 

검색엔진은 이 시대의 가장 강력한 권력 중의 하나라고 말할 수도 있겠다.

 

 

 

 

 

SEO(검색엔진 최적화 : Search Engine Optimization:최적화(optimize:최대한 적합하게 만들다))같은 마케팅 도구를 활용해

검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데,

이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다.

 

 

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.

(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.)

 

그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.

(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)

 

 

인덱스를 생성할 때 사용되는 정보는

검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다.

즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데

이때 시맨틱 요소(Semantic element)를 해석하게 된다.

 

 

HTML로 작성된 문서는

컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다.

 

 

아래 코드를 보면 1행과 2행은 브라우저에서 동일한 외형을 갖는다.

이는 h1 태그의 디폴트 스타일이 1행과 같기 때문이다.

 

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

Hello

Hello

 

 

그러나 1행의 요소는 의미론적으로 어떤 의미도 가지고 있지 않다.

즉, 의도가 명확하지 않다.

개발자가 의도한 요소의 의미를 명확하게 나타내지 않고

다만 폰트 크기와 볼드체를 지정하는 메타데이터만을 브라우저에게 알리고 있다.

 

 

그러나 2행의 요소는 header(제목) 중 가장 상위 레벨이라는 의미를 내포하고 있어서

개발자가 의도한 요소의 의미가 명확히 드러나고 있다.

이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.

 

 

검색엔진은 대체로 h1 요소 내의 콘텐츠를

웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다.

또한 사람도 h1 요소 내의 콘텐츠가 제목임을 인식할 수 있다.

 

시맨틱 요소로 구성되어 있는 웹페이지는

검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고

검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다.

 

즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

 

 

시맨틱 태그에 의해 컴퓨터가

HTML 요소의 의미를 보다 명확히 해석하고

그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

 

 

시맨틱 웹이란

웹에 존재하는 수많은 웹페이지들의 메타데이터(Metadata)를 부여하여,

기존의 잡다한 데이터 집합이었던 웹페이지를

'의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

 

 

 

 

 

HTML 요소는 non-sematic 요소, semantic 요소로 구분할 수 있다.

 

 

non-semantic 요소

div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.

 

semantic 요소

form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.

 

 

 

다음은 HTML5에서 새롭게 추가된 시맨틱 태그이다.

header : 헤더

nav : 네비게이션

aside : 사이드에 위치하는 공간

section : 본문의 여러 내용(article)을 포함하는 공간

article : 본문의 주내용이 들어가는 공간

footer : 푸터

 

 

 

 

 

 

 

느낀점 : 

 

왜 시맨틱을 하는지 알겠다.

 

기억해야할 것들을 메모장에 적어두기만 하고 분류를 안 해놓으면

해당 메모를 찾을 때 너무 힘들듯이

보다 효율을 높이기 위해 시맨틱 작업을 하나보다.

 

 

 

검색 키워드, 태그 등을 기입할 수 있게 한 것도 이런 이유 때문에 하나보다.

 

양질의 웹 페이지를 선별하기 위한 과정이랄까?

 

사용자 입장에서 얻고자 하는 정보를 보다 빠르고 정확하게 찾을 수 있고

 

플랫폼 입장에서는 그러한 정보들 중 양질의 컨텐츠를 걸러내기 위한 과정에 활용할 수 있고

결과적으로 해당 플랫폼의 사용시간을 늘림으로써 광고비를 더 높게 받을 수 있다.

 

제작자 입장에서는 자신의 컨텐츠를 보다 많은 사람들에게 알리기 위해 최대한의 시맨틱 정보들을 채운다.

 

 

 

시맨트와는 전혀 관련이 없다.

 

cement : 시멘트, 접합시키다, 결속시키다

semen : 정액

semantic : 의미의, 의미론적인

 

 

 

앞으로 티스토리 블로그 글 작성시 태그를 꼭 써야겠다.

내가 찾을 때 더 편리하게 하기 위해.

---

크롤링 - 웹사이트들의 정보 수집

인덱싱 - 검색키워드에 대응하는 색인 만들어 두기.

 

색인 - (찾을 색, 끌 인)

1. 책 속의 내용 중에서 중요한 항목, 인명 따위를 쉽게 찾아볼 수 있도록 일정한 순서에 따라 별도로 배열하여 놓은 목록

2. 어떤 것을 뒤져서 찾아내거나 필요한 정보를 밝힘

 

 

 

브라우저, 검색엔진, 개발자 모두에게 컨텐츠의 의미를 명확히 설명하는 역할

 

 

 

시맨틱 태그, 시맨틱 웹