시멘틱 마크업
HTML문서를 작성하다 보면 여러 태그를 사용하게 됩니다. 하지만, 아무 태그나 사용하게 되면, 약간의 문제가 생길 수 있습니다. 의미를 가지고 있는 태그는 그 의미에 맞게 사용하는 것이 좋습니다.
검색 엔진 최적화
구글이나 네이버와 같은 검색사이트를 이용해서 대부분의 사람들이 정보를 얻고 있습니다. 그렇기 때문에 이런 검색 사이트의 자신의 웹사이트가 쉽게 노출되어야 많은 사람들이 방문할 가능성이 높아지겠죠.
이런 검색 엔진에 잘 노출되기 위해서 검색 엔진 최적화를 통해 검색을 하는 유저들의 방문을 늘리는 방식을 이용하게 됩니다. 검색 엔진 최적화는 검색하는 유저들의 의도에 맞게 웹 페이지를 최적화해서 검색 엔진의 평가를 높여 결과 페이지에 노출되게 하여 자연스러운 유입을 만들기 위한 방법이라고 생각하면 됩니다.
다 모르겠고, 검색 엔진 최적화를 통해 내 웹사이트 방문을 늘릴 수 있겠구나 생각은 됩니다. 그렇다면 검색 엔진 최적화를 위한 방법은 무엇이 있을까요? 바로 시멘틱 요소를 이용하는 것입니다.
시멘틱 요소
검색 엔진은 HTML코드로만 정보를 수집하고 의미를 인지하는데, 이때 시멘틱 요소를 해석하게 됩니다. 즉, 의미가 명확하지 않은 코드는 검색 엔진이 검색 결과로 보여주기 어렵게 될 것입니다. 분명 검색한 사용자가 원한는 데이터가 있지만, 검색 엔진에 노출되지 않을 수도 있다는 것이죠.
그렇기 때문에 시멘틱 요소를 이용하여 코드를 작성하는 것은 중요합니다. 시멘틱 태그는 브라우저와 검색 엔진, 개발자에게 그 콘텐츠의 의미를 명확히 설명하는 역할을 하기 때문이죠.
주로 사용되는 태그들은 아래와 같습니다.
<article> <!-- 독립적이고 자체 포함된 콘텐츠 지정 -->
<aside> <!-- 본문의 주요 부분을 표시하고 남은 부분을 설명합니다. 주로 사이드바나 광고창에 사용됩니다. -->
<footer> <!-- 페이지나 해당 파트의 가장 아랫부분에 보통 위치하며, 사이트의 라이선스, 주소 연락처 등을 넣을 때 사용합니다. -->
<header> <!-- 주로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 보통 들어갑니다. 선택적으로 상단바나 검색창이 들어갈 수 있습니다. -->
<nav> <!-- 일반적으로 상단바 등 사이트를 안내한느 요소로 상요됩니다.-->
<main> <!-- 문서의 주된 콘텐츠를 표시합니다. -->