[HTML] 홈페이지 태그의 위계 관계와 검색엔진과 SEO

태그의 위계 관계

태그 간의 관계를 표현하는 방식으로 '부모'와 '자식'의 관계가 있습니다. 즉 상하 위계가 있습니다. '리스트 태그' 예를 들면 리스트 태그에서 상하관계는 다음과 같습니다.

메모장에서 코딩된 내용

이와 같은 HTML코드가 아래와 같은 모습으로 브라우저에 출력됩니다. [ol]태그는 [ordered list]를 의미합니다. 만약 위 예에서 [ol] 대신 [ul]을 사용하면 어떤 결과가 나올까요.

크롬브라우저에 표현된 내용

[ul]은 [unordered list]에서 나온 태그입니다. 짐작되시겠지만 넘버가 매겨지지 않은 리스트가 출력됩니다.

[ul] 태그 사용 결과

검색엔진과 HTML

HTML태그 중에는 검색엔진과 궁합이 잘 맞는 태그가 있습니다. 즉 제목태그인 [h]태그는 검색엔진이 검색하는데 우선권이 주어집니다. 그러나 같은 모습을 나타냈을지라도 제목 태그가 아닌 다른 태그로 코딩했을 때는 검색에서 제외되기도 합니다.

검색엔진 동작 원리

검색엔진은 사용자가 검색했을 때 원하는 결과를 빨리 보여주기 위한 수많은 정보를 미리 정리해 둡니다. 이 과정에서 사용되는 프로그램을 봇(bot) 또는 크롤러(crowler)라 합니다. 검색엔진은 봇이 주기적으로 웹 사이트들을 방문하여 쌓은 정보를 정리한 후, 데이터베이스에 저장합니다.

검색엔진 최적화란?

검색엔진 최적화란 Search Engine Optimization으로 약어로는 SEO라고 부릅니다. 즉 검색엔진 최적화란 검색이 잘 되도록 설계하는 일입니다. 검색엔진 최적화에 사용되는 태그는 두가지가 있습니다. 메타태그와 시멘틱태그. 메타태그는 검색엔진에 정보를 제공할 목적의 태그입니다. 시멘틱태그는 웹페이지 구조를 구성하는 태그입니다. 

 

메타태그는 화면에 보이는 태그가 아닌 웹페이지가 갖춘 정보를 검색엔진에 제공하는 역할을 수행합니다. [charset="utf-8"]을 사용할 때 [<meta charset="utf-8" />]이라고 코딩했었죠. 이런 메타태그는 주로 head 태그안에 들어갑니다. 이 메타 데이터는 추후 검색엔진이 웹페이지를 읽을 때 사용됩니다.

 

시멘틱태그는 Semantic 의미 그대로 '의미론적인'의 뜻을 갖고 있습니다. 시맨틱 태그는 의미있는 태그라고 해석되지요. 시멘틱 요소를 구성된 웹페이지는 검색엔진에 문서를 더 의미있게 전달할 수 있고 검색엔진 또한 시멘틱 요소를 이용하여 정보를 효과적으로 불러올 수 있습니다.

 

HTML 태그에는 시멘틱태그와 비시맨택태그가 있습니다. 시맨틱태그는 제목태그, p태그, form태그, label태그 등이 있습니다. HTML5에서는 header, nav, aside, section, article, footer 등 레이아웃과 관련한 태그들이 추가됐습니다.

 

비시맨틱태그는 요소에 대하여 어떤 설명도 하지 않는 태그입니다. div, span 등이 있습니다.