SEO를 위한 시맨틱 마크업

의미 있는 마크업이 좋은 서비스를 만든다.

웹의 본질은 정보전달.

시맨틱 HTML은 정보를 정확하고 효율적으로 전달하는 방법.

 

시맨틱(Semantic) HTML란

시맨틱 HTML은 의미있는 태그를 사용하므로써, 브라우저, 개발자, 검색엔진이  그 구조를 이해시키는 것

 

시맨틱하게 작성했을 때의 장정

- 검색엔진 최적화 (SEO) HTML을 분석해 페이지의 중요도를 파악

- 웹 접근성 스크린 리더는 시맨틱 태그를 기준으로 페이지를 읽음

- 개발자경험 DX 태그의 역할로 파악할 수있음

 

시맨틱 태그

서비스 페이지를 만들 때, 사용해야할 태그 모음

태그	의미 및 권장 사용법
<header>	페이지, 세션의 도입부. 로고, 검색창, 내비게이션 등을 포함
<nav>	주요 링크 모음. (메뉴바, 탭).
<main>	해당 페이지의 독점적인 본문. 문서당 하나만 존재
<section>	문서의 논리적 구역. 대개 내부에 제목태그를 동반함
<article>	뉴스기사, 블로그 포스트 처럼 그 자체로 독립적인 의미를 갖는 콘텐츠
<aside>	본문 내용과 간접적으로 연관된 정보 (광고, 사이드바, 연관링크)
<footer>	저작권 정보, 연락처, 사이드맵 등의 하단 영역

 

SEO를 극대화 - 검색엔진이 좋아하는 디테일한 태그

• <figure> <figcaption>  이미지나 도표 캡션을 달 때 사용
• <time> 날짜, 시간을 표시할때 datetime 속성과 함께 사용
• <address> 푸터 영역에서 연락처 정보를 감싸서 사용

 

---

 

 

W3Schools.com