5. SEO와 시멘틱 웹

---

🥽 SEO와 Sementic Web의 연관성

SEO는 검색엔진 최적화다.
즉, 웹사이트에서 나의 글, 자료, 데이터 등이 잘 노출될 수 있도록 최적화 하는 것을 의미한다.

그리고 Sementic Web이란, ‘의미론적인 웹’이라는 뜻을 갖는다.
이는 사람과 브라우저, 검색엔진 모두가 쉽게 읽고 해석하기 좋은 HTML문서를 통칭하기도 한다.

그래서 SEO와 Sementic Web에는 어떤 연관성이 존재한다는 것일까?

우선, 우리들의 웹사이트가 기본적으로 어떻게 검색에 노출되는지에 대한 이해가 필요하다.

포털사이트들은 검색엔진을 통해 전세계 웹사이트들의 정보를 수집한다.

메타데이터 : 컴퓨터가 해석하는 언어

자연어 : 인간이 해석하는 언어

검색엔진이 웹사이트 정보들을 긁어 모으는 것을 ‘크롤링’이라고 하는데, 이때 크롤링이 되는 대상이 HTML문서다. 우리가 기존에 코딩을 할 때에는 div를 쓰던, section을 쓰던 똑같은 박스 엘리먼트로 보일 뿐이지만, 컴퓨터는 다르다. 컴퓨터는 우리와 다르게 메타데이터를 통해 웹사이트의 정보를 이해하기 때문이다.

// 이 두 코드의 결과물이 우리의 눈에 보여지는 것은 동일하겠지만, 컴퓨터는 다르게 해석한다.
<div id="header"></div>

<header></header>

따라서 우리는 인간의 관점에서만 읽기좋은 HTML 문서가 아닌, 컴퓨터(검색엔진)가 이해하기 좋은 HTML 문서의 작성 또한 중시해야 한다. 이를 시멘틱 웹이라고 한다. 즉, 우리는 시멘틱 웹을 구현하며 우리의 웹사이트에 의미와 관련성을 부여하며, 검색엔진에 잘 노출될 수 있도록 해야 한다.

정리!

• “의미” & “관련성”을 담는다
• 개발자와 브라우저, 검색엔진 모두가 읽고 해석하기 좋은 문서
• div와 span은 non-semantic 요소!

---

🐳 Sementic Web 가이드

태그	의미
<header>	헤더다!
<nav>	네비게이션을 의미한다
<aside>	양 옆 사이드에 위치하는 박스를 의미한다.
<article>	주요 내용이 들어가는 박스를 의미한다.
<section>	article들이 모여있는 박스를 의미한다.
<footer>	푸터다!
<ol>	순서가 있는 목록
<ul>	순서가 없는 목록
<dl>	정의 목록

1. <form>에는 Label을 사용해주자!

   주로 그냥 귀찮아서 h3태그를 쓰거나, span, div 등을 사용했었다. 하지만 인풋에 대한 이름(라벨)은 반드시 label을 사용해주도록 하자

2. 태그의 의미를 최대한 활용하자

   • <p> : 문단
   • <em> : 강조
   • <strong> : 강한 강조

3. <section>에는 h1~h2 태그가 포함되도록 하자

4. <section> 안에는 <header>와 <footer>가 들어가서는 안된다.

---

정리 및 요약

1. 내 웹사이트가 검색에 노출이 잘 되도록 하기 위해선 시맨틱 웹 표준을 따르자.
2. 시맨틱 웹은 개발자와 컴퓨터, 브라우저 모두가 읽기 쉽고 이해하기 쉬운 코드를 작성하는 것이다.
3. 명확한 기준을 갖고 코드를 작성하자!

---

포스팅에 참조한 자료

Semantic Web | PoiemaWeb

---