[HTML] Semantic tag & SEO

박세현·2021년 7월 8일
0

TIL

목록 보기
2/2

Semantic tag (시맨틱 태그)

semantic은 우리말로 번역하면 의미있는, 의미 라는 뜻이다.

시맨틱 태그란 의미가 있는 태그를 말한다.

🤔 의미가 있는 태그?

태그가 왜 의미를 가져야 할까?
그 이유를 알기 위해서는 우선 SEO가 무엇인지,
SEO가 왜 중요하고 SEO와 시맨틱 태그가 무슨 관련이 있는지 알아야 한다.

🤔 SEO?

SEO (Search Engine Optimization)

우리말로 검색 엔진 최적화라고 한다.

예를 들어 우리가 온라인 쇼핑몰을 만들었다고 가정해보자.

사람들이 검색사이트에 쇼핑몰 이름을 검색해도 쇼핑몰이 검색되지 않는다면, 열심히 만든 쇼핑몰은 얼마 가지 않아 저조한 매출로 인해 망해버릴 것이다.

위 예시를 통해 검색 사이트에 노출이 잘 되는 것이 웹으로 서비스를 제공할 때 매우 중요하다는 것을 알 수 있다.

이 때 검색 사이트에 우리의 서비스가 잘 노출 되도록(검색결과 상위에 노출되도록) 하는 것이 SEO, 검색 엔진 최적화다.

🤔 그래서 SEO랑 시맨틱 태그랑 무슨 관련이 있는데?

검색 엔진은 로봇(Robot)이라는 프로그램으로 매일 웹사이트의 정보를 수집하는데 이 때 수집되는 정보는 HTML 코드이며 이 코드를 분석한다.

분석하는 과정에서 사용자가 검색할 만한 키워드를 미리 예상해서 검색 키워드에 대응하는 인덱스를 만들어 두는데, 시맨틱 태그를 사용하여 HTML 문서를 작성하면 검색 엔진이 효과적으로 인덱스를 구성 할 수 있다.

<h1>제목!</h1>👍
<span class="title">제목!</span>👎

📜 대표적인 시맨틱 태그

<form>, <img>, <table>, <header>, <nav>
, <section>, <article>, <aside>, <footer>

각 태그들에 대한 설명
https://onelight-stay.tistory.com/61


🙏 잘못된 내용이 있다면 댓글 부탁드립니다.

출처

SEO, 시맨틱 태그 종류
https://poiemaweb.com/html5-semantic-web

profile
Front End 공부노트

0개의 댓글