semantic web이란 무엇인가?
컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹이며 기계가 읽고 처리할 수 있는 웹이라고 정의한다.
semantic web의 기능?
검색엔진 최적화(SEO)
검색 엔진 최적화(영어: search engine optimization, SEO)는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다.
웹 페이지와 관련된 검색어로 검색한 검색 결과 상위에 나오게 된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나이며 비용처리 없는 마케팅이라고 할 수 있다.
사용자의 접속량을 늘리려면 검색사이트의 상위노출이 되는것이 중요하다.
SEO를 마케팅 도구로 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다.
검색엔진은 매일 전세계의 웹사이트 정보를 수집하는데, 수집한 정보는 결국 그 웹사이트의
HTML이다.
검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.
시맨틱 웹은 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 갖게한다.
당연히 그 '의미'와 '관련성'은 검색엔진 성능향상에 도움을 준다.
컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만드는 것이다.
그러므로
semantic web에 semantic tag를 사용하여 코드를 작성하면
검색엔진이 각각의 semantic tag를 파악하여 정보를 수집하게 되면서
사용자와 개발자 모두에게 정확한 콘텐츠의 의미를 명확하게 설명할 수 있게 되고,
검색 엔진 최적화를 통해 검색사이트의 상위노출이 가능하게 된다.
semantic tag
Semantic Elements(시맨틱 요소)는 브라우저, 검색엔진, 개발자에게 명확한 의미를 전달한다.
개발자가 의도한 요소의 의미가 명확히 드러나고 있기 때문에, 코드의 가독성을 높이고 유지보수를 쉽게할 수 있다는 장점도 있다.
html의 태그는 semantic tag 와 non-semantic elements 가 있다.
non-semantic elements
<div> <span> 과 같은 태그 자체로는 아무 의미가 없는 것을 말한다.
semantic tag
<section> <header> <nav> 와 같이 뜻이 명확한 태그를 말한다.
주요 semantic tag
<article> : 내용을 정의한다.
<aside> : 페이지 콘텐츠를 제외한 콘텐츠를 정의한다.
링크, 광고, 사이드바 표시 등.
<details>: 사용자가 보거나 숨길 수있는 추가 세부 정보를 정의한다.
<figcaption> <figure> : 요소에 대한 캡션을 정의한다.
<figure> : 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정한다.
<footer> :문서 또는 섹션의 바닥글을 지정한다.
주로 저작권, 연락처 정보 등 내용이 삽입되며
<header>, <section>,<article>등 다른 레이아웃 사용가능.
<header> :문서나 섹션의 머릿글을 지정한다.
사이트 맨 위쪽이나 왼쪽에 사용하며 헤더 안에 <form> 태그를 이용, 검색창을 넣거나 <nav>태그를 이용해 사이트메뉴를 넣는다.
<main>:문서의 주요 내용을 지정한다.
<mark>: 강조표시된 텍스트를 정의한다. 형광펜을 칠한 것처럼 노랗게 칠해진다.
<nav> : 네비게이션 링크를 정의한다.
같은 사이트내의 링크나 다른 사이트로의 링크들의 모음이다.
<section>: <header>, <footer>와 함께 문서의 구역을 정의한다.
<section>안에 <section>을 넣을 수도 있고, <article>을 이용해 내용을 넣는다.
<summary>:<details> 요소를 위한 눈에 보이는 제목을 정의한다.
<time>: 날짜/시간을 정의한다.
<hn>: 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용한 태그.
<h1>은 페이지당 단 한 번만 사용하는 것이 권장된다.
웹표준에서는 <hn>을 사용해 제목을 표시해야 하며, 단순히 크기를 키우고 굵게 표시하고 싶다는 이유로 <hn>태그를 쓰는 것은 금지된다.
유용한 예
<img> 를 사용하여 이미지를 가져오는것과 div태그에 css background-image를 이용하여
이미지를 가져오는것은 어떤 차이가 있을까?
img 태그를 사용했을 때 장점
1.우선 img는 alt=""를 통해 이미지 업로드가 불가능 할때, 이미지의 설명을 알려줄 수 있고, 그 설명덕분에 SEO에 노출이 가능하다.
2.이미지 프린트가 가능하다.
백그라운드 이미지는 출력시 포함되지 않는다.
CSS background-image 백그라운드 이미지 사용하는 경우 장점
1.이미지위에 텍스트를 추가할 수 있다.
이미지 위에 텍스트가 들어가는 경우에는 백그라운드 이미지를 넣고 그 태그 내부에 간단히 텍스트를 넣어 사용할 수 있다.
- CSS sprites를 사용해 이미지 속도를 향상
수 많은 img 태그를 퍼블리싱한 방법보다 CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 로딩 속도도 향상할 수 있다.
정리
CSS background-image 이미지에 대한 정보가 없기 때문에 장식적인 용도로 사용
검색엔진최적화를 통한 상위노출을 노린다면 의미를 포함할 수 있는 <img>태그 사용을 권장한다.
