본문 바로가기

애매한 카테고리

SEO(Search Engine Optimization) 그리고 시맨틱 마크업

검색 엔진 최적화(Search Engine Optimization, SEO)

검색 엔진 최적화는 웹 페이지 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다. 웹 페이지와 관련된 검색으로 검색한 검색 결과 상위에 웹 페이지가 노출된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나라고 할 수 있다.

 

검색 엔진 최적화와 시멘틱 마크업

웹 페이지를 이루는 HTML요소들을 가지고 검색엔진에 노출 될 수 있도록 하기 위해 시멘틱한 마크업이 필요하다.

웹 페이지를 봤을 때 눈으로 보이는 모습은 같을 지언정, 어떤 HTML 태그가 쓰였느냐에 따라 다르게 해석된다. 또 웹 문서의 내용-구조를 파악하기 위해 중요하며 시멘틱 태그로 작업하게 되면 접근성에 유리하고 웹 표준이 된다. 또한 이해하기가 쉽고 유지 보수하기도 쉽다. 하지만 익스8 이하로는 호환이 안된다는 단점이 있다.

 

none-semantic element: <div><span>등이 있으며 이러한 태그는 content에 대해 아무 설명도 하지 않는다.

sementic element:  <form>, <table>, <article> 등이 content에 대해 설명하는 이름을 가지고 있다.

 

HTML5의 sementic element

링크로 가기 👉  HTML5 Reference 

 

주요 element

<header>

페이지 소개나 제목을 담당한다. 브라우저가 해당 페이지를 파악하거나, 검색엔진의 색인에 도움을 주는 영역이다.

 

<nav>

navigation영역을 말하며, 위치가 딱히 정해져 있지는 않다. 막연히 링크가 모여있다고 사용하는 것 보다는 중요한 메뉴 개념일 때만 nav태그를 사용해주는 것이 좋다.

 

<footer>

작권 정보, 사이트 제공자 정보를 넣는 공간이다.

 

<main>

해당 페이지의 몸통 부분이다. 한 페이지당 하나만 존재해야한다.

 

<section>

말 그대로 구획을 의미한다. 서로 관련 있는 구역을 나누는 역할을 한다. 내용의 흐름과 구조를 만들기 위해 내용을 나눈다. section은 독립적인 영역이라서 header와 footer를 가질 수 있다. 

 

<article>

article은 그 자체로 독립적이어서 재배포가 가능해야 한다. 즉, article 부분만 뚝 떼어서 다른 페이지에 놓아도 이해가 가능해야한다.

article도 header와 footer를 가질 수 있다.

section이 관련 있는 내용을 묶는 역할이라면 article은 관련 있는 내용 중에서 독립적으로 구성된 글을 별도로 묶는 역할을 한다.

article 요소 안에 article 요소가 들어갈 경우, 밖의 요소의 내용과 안쪽 요소의 내용이 관련이 있는 내용이라는 것을 의미한다.

 

<aside>

본문과는 따로 구성된 내용을 말한다. 흔히 사이드 바라고 부르는 영역으로, 본문 내용과는 거의 관련이 없거나 적은 내용으로 배너, 용어 설명, 관련 상품, 페이지 이동 등의 역할로 주로 사용된다.

 

 

알아보고 나니까 '와우 여태까지 정말 코드 막 짰구나'라는 생각이 들었다. 여태 지킨건 그나마 굵직한 <header>, <main>, <footer>, <nav>정도...? 윽... 페이지수도 많고 컴포넌트도 많은 roomieseoul은 더 갈수록 노오오오오답 코드가 되어가는구나...후 공부하면 할수록 어디서부터 다시 손대야할지 모르겠다ㅋㅋㅋㅋㅋ그래서 자꾸 더 만지지 않고 다른 프로젝트하려고 기웃거리나보다...