1. 검색엔진 최적화 (SEO)와 시맨틱 태그의 연결고리 🤜🤛

웹사이트는 검색엔진에 노출 되는게 매우 매우 중요하다. 검색엔진에 노출되지 않는 웹사이트는 접속하는 사람도 없으니까 당연한 이야기다.

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.)
기본적으로 이 검색엔진봇은 어떤 컨텐츠의 구조를 이해하지 못한다. 텍스트를 읽을 수는 있지만 컨텐츠의 각각이 어떻게 연관되어있는지를 인식하지 못한다는것이다. 그래서 의미 없는 구조의 텍스트들에 의미를 부여하기 위해서 시맨틱 태그를 사용해서 검색엔진 봇에게 텍스트의 중요도 차이를 인식시켜야 한다.

이에 대해 검색엔진 봇은 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)

즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.

시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미있게 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다. 즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

2. 시맨틱 태그

HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.

non-semantic 요소

div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.

semantic 요소

블록 레벨 섹션 요소는 검색 엔진 봇이 읽을 수있는 문서의 개요를 작성할 수 있게 한다.

<article> for standalone content pieces such as articles or reviews,
<section> to mark up other content blocks that logically belong together, for instance tabbed content,
<aside> for sidebars,
<nav> for navigation sections.

그 외에도 headings <h1>, <h2>, <h3>, <h4>, <h5>, <h6> , ordered and unordered lists <ol>, <ul>, <li>, paragraphs <p>, images <img>, tables <table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, form elements <form>, <fieldset>, <label>, <input>, <textarea>, and links <a>가 시맨틱 요소에 해당한다.

3. 반드시 시맨틱태그만 써야할까?

Use Non-Semantic Elements Wisely

Besides semantic elements, you also need to pay attention to non-semantic tags if you want to do well in search engine rankings. Non-semantic tags do have their own purpose, too. They can be used when you need to mark up content solely for styling reasons.

For instance, when you want to add a left margin to a group of content that doesn’t relate to each other, you need to introduce a HTML class so that you can style it with CSS. This is when the non-semantic