TIL 36 , Semantic web, Semantic tag

heyho9292·2021년 8월 31일
0

HTML & CSS

목록 보기
16/18
post-thumbnail

Semantic Web

기계가 읽고 처리할 수 있는 웹을 개발하고자 탄생한 것이 Semantic Web이다. Semantic tag로 구성된 웹을 Semantic web이라고 한다.

의미 있는 Tag들이 등장 함으로 인해 기계는 정보들을 효과적으로 받아 들일 수 있게 된다.
사람이 원하는 정보를 'Tag'의 의미를 통해 더욱 정확하게 정보를 제공할 수 있게 된 것이다.

컴퓨터가 웹 정보의 의미를 이해하고 의미에 따라 선택적으로 정보를 획득, 통합, 가공할 수 있는 웹 환경을 제공하는 것을 말한다.

Semantic tag를 이용해 웹을 만들면 컴퓨터가 태그의 용도와 의미를 알아듣고 사용자가 검색했을때 알아들은 정보를 토대로 또 적절한 정보를 제공하기 때문으로 이해하겠다.


non-semantic Tag 와 semantic Tag 비교

div로 구성, class로 기능을 적어 사람만 알아볼 수 있게 했다. 같은 모양이 구현되더라도 div와 class를 사용하면 컴퓨터는 모양만 보일 뿐이지 기능을 이해하진 못한다.
Semantic tag를 이용해주면 컴퓨터도 요건 head, 요건 nav 식으로 이해를 한다.

semantic Tag 사용의 사례

img vs div backgroung-image

  • img태그를 사용시 alt속성에 문자열을 넣을 수 있다.
    alt속성은 이미지가 뜨지 않으면 나타난다.
    alt속성에 작성된 문자열은 meta정보*가 되며, 검색엔진은 alt속성에 지정된 문자열을 인식하게 된다.

  • div background-image의 경우 단순한 이미지 첨부일 뿐, 어떠한 정보도 담지 않는다.

  • 내 이미지를 사용자의 검색에 노출시키고 싶다면, img 태그를 사용하는 것이 좋다.

  • 이미지의 활용이 순수 사이트의 장식을 위해서라면, background-image를 사용하는 것이 좋다.

쉽게말해, 컴퓨터가 알아듣게 말을 하느냐 못하느냐.
컴퓨터가 알아 들어야 다른 사람이 검색했을때도 알아들은 말을 전달해 줄 수 있다.

meta data*
데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해 주는 데이터.



Semantic tag를 이용하여,Semantic web을 만들어야 하는 이유.

1. 웹 접근성(Web Accessibility)

웹 접근성(Web Accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리키는 것으로, 웹페이지에 일반적인 방법으로 접근할 수 없는 사람들이라도 웹사이트를 접근할 수 있도록 해야한다는 것이다. 이는 국가적으로도 법률 제도가 마련되어 있으며, 국가정보화기본법 제 32조에도 지정되어 있다. 국가기관 등은 인터넷을 통하여 정보나 서비스를 제공할 때 장애인·고령자 등이 쉽게 웹사이트를 이용할 수 있도록 접근성을 보장하여야 한다는 것이다.
예를 들어 그림이나 사진 등을 제공한다고 했을 때, 눈으로 볼 수 없는 경우 그림이나 사진을 대신할 수 있도록 텍스트로 제공해야하며, 동영상이나 오디오의 경우는 음성정보를 문자로 제공할 수 있도록 하는 것을 말한다.

2. SEO(Search Engine Optimization)

시멘틱 요소는 검색엔진 최적화(SEO: Search Engine Optimization)에도 많은 영향을 주기에 꼭 고려되어야만 한다. 검색사이트들(구글, 네이버, 다음 등)은 주기적으로 전 세계에 있는 공개된 웹을 수집하고 분석하고 있는데, 이것은 사람이 직접 하는 것이 아닌 로봇(검색엔진)을 통해 이루어지고 지고 있다.
로봇은 일반적으로 웹사이트에 방문할 때 미리 제공한 sitemap.xml 파일이나 robots.txt 파일을 이용해 수집 방법을 결정하고 있으며, 문서에 포함한 링크를 따라가며 관련 페이지를 모두 방문하여 수집한다. 수집된 페이지 및 문서는 검색엔진의 자체 알고리즘에 따라 주요 키워드를 추출하는데 이때 중요한 요소가 바로 시맨틱 태그들이다.
웹페이지 내용을 사람이 직접 작업을 하는 것이 아니기에 로봇이 해석 가능한 시맨틱 태그를 활용해야 정확한 내용전달이 가능할 수 있으며, 더 좋은 문서로 확인이 되어야 포털 사이트에서 상위 노출이 가능하게 된다. 따라서 우리는 페이지의 내용을 잘 파악할 수 있도록 적절한 태그를 활용하여 알맞게 구성해야 하는 이유이다.

출처 : https://goplanit.site/51.%20Semantic_Web/

profile
이전 개업 ---> https://heyho92.tistory.com/

0개의 댓글