Semantic Tag가 SEO에 어떤 영향을 줄까?

# SEO(Search Engine Otimization)

: 검색엔진최적화, 특정 검색어를 검색 했을 때 상단에 위치하게 하기 위해선? 검색엔진최적화 과정이 필요하다. 검색엔진은 검색결과를 낼 때, HTML에 담긴 태그를 분석한다. 특수하게 명명된 컨테이너는 검색 엔진 및 브라우저가 페이지 정렬 방식을 보다 쉽게 식별하는데 도움이 된다. = 컨텐츠를 보다 잘 해석 할 수 있다.

 semantic HTML은 웹 페이지의 다른 섹션과 레이아웃을 더 잘 정의해서 어떤 종류의 컨텐츠를 포함하고 있는지 알려주는 특정 역할을 한다. HTML을 보다 이해하기 쉽게 만드는 구문을 말한다. 콘텐츠가 있는 곳에 검색엔진을 표시하는 것이 중요한 이유는 기계는 의미를 가진 태그를 보고 추측을 한다.

💡semantic 태그는 클래스나 스타일을 적용하지 않아야한다.

//non-semantic
<div class="header">
	this is header
</div>
<div id="footer">
  	this is footer
</div>

//semantic
<header>
	this is semantic tag
</header>
<footer>
	this is semantic tag
</footer>
//를 쓰면 더 기계가 콘텐츠의 역할을 받아들인다.

 

# Semantic Tag란?

: 웹 페이지의 다른 섹션과 레이아웃을 잘 정의하여 HTML을 보다 이해하기 쉽게 만드는 구문이다.

• Semantic : 의미를 가진 요소로 브라우저와 개발자 모두에게 의미를 명확하게 설명하는 태그
• Non-Semantic : 의미를 가지지 않은 요소로 단순 구역을 나누는 용도, 의미가 없는 태그

---

• <article> : 독립적인 컨텐츠, 독자적으로 이해해야하며, 웹 사이트에서 독립적, 재사용 할 수 있는 구획(포럼 게시물, 블로그 포스트, 신문기사) → 요소의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아 보인다면 article요소가 더 좋은 선택일 것.

• <aside> : 주요 내용과 간접적으로만 연관된 부분 (사이드바, 콜아웃 박스)

• <details> : 열림 상태일 때만, 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. (기본값은 false로 정보가 보이지 않는다.)

• <figcaption> \ <figure> : <figure>가 포함하는 이미지와 <figcaption>캡션을 <figure> 요소로 그룹화 (figcaption < figure)

• <footer> : 바닥글을 지정한다. (문서작성자, 저작권 정보, 이용 약관 링크, 연락처 정보)

• <time> : 사람이 읽을 수 있는 시간/날짜, 날짜와 시간을 기계가 읽을 수 있는 방식으로 인코딩해서 사용. (유효시간 범위, 시간대 정보날짜, 24시간 표기법 시계)

• <header> : 소개 및 탐색에 도움을 주는 콘텐츠 (제목, 로고, 검색 폼, 작성자 이름등의 요소 포함가능)

• <main> : 문서의 주요 내용 = 문서의 핵심, 요소 내부의 내용은 문서에 고유해야한다. 반복되는 컨텐츠 X

• <mark> : 중요한 부분 표시, 하이라이트, <mark>는 연관성을 가진 부분을, <strong>은 중요도를 가진 부분을 나타낼 때 사용합니다) p태그나 span태그 내부에 사용할 것, 단독 사용 X

• <nav> : 탐색 링크의 집합을 정의한다. (현재 페이지 내, 또 다른 페이지로의 링크를 보여주는 구획 (메뉴, 목차, 색인))

• <section> : 문서의 섹션 정의, 일반적으로 제목이 있는 주제별 콘텐츠 그룹 (컨텐츠 및 연락처 정보) → 일반 요소 컨테이너로 사용하지 말 것. 단순 스타일링이 목적이라면 div 요소를 사용할 것. 해당 구획이 논리적으로 나타나야하면 section사용

• <summary> : 요약이나 레이블

• <address> : 사람, 단체, 조직등에 대한 연락처 정보를 나타낸다.

출처 :: https://www.pluralsight.com/guides/semantic-html

검색해보면서 느낀 부분은 경계가 모호하게 느껴져서 찾은 이미지, HTML5 요소의 순서도 :: flow chart를 참고해서 사용하면 더욱 좋을 것 같다!

HTML Semantic Elements

 

Semantics