시맨틱 태그 & 검색엔진 최적화
프론트엔드 중요 개념 - HTML 내용 정리 2편입니다.
프론트엔드 프로그래밍의 기반이 되는 개념 입니다.
HTML 시맨틱 태그 - 왜 중요할까?
웹 페이지를 만들 때 <div>나 <span>같은 태그만으로 구조를 잡는 것보다는 시맨틱 태그를 활용하여 요소가 어떤 역할을 하는지 직관적으로 구분하는 것이 좋습니다.
주요 태그
<header>: 페이지나 영역의 머리글<main>: 주요 콘텐츠 영역<nav>: 네비게이션 메뉴
이처럼 태그 이름을 통해 요소의 목적을 쉽게 파악할 수 있기 때문에, 개발자뿐만 아니라 검색엔진이나 보조 기기 또한 페이지를 더 정확하게 이해할 수 있습니다.
시맨틱 태그의 종류
<header>헤더</header>
<nav>내비게이션</nav>
<main>
<section>
<article>콘텐츠</article>
</section>
<aside>사이드바</aside>
</main>
<footer>푸터</footer>
| 태그 | 설명 | 예시 |
|---|---|---|
<header> | 페이지/섹션의 머리말 | <header>사이트 제목</header> |
<nav> | 내비게이션 | <nav>메뉴</nav> |
<main> | 메인 콘텐츠 | <main>내용</main> |
<section> | 주제별 영역 | <section>섹션 내용</section> |
<article> | 독립적인 콘텐츠 | <article>뉴스 기사</article> |
<aside> | 보조적인 컨텐츠 섹션 | <aside>광고</aside> |
<footer> | 페이지/섹션의 바닥글 | <footer>저작권</footer> |
<details> | 토글 | 추가 세부 정보 |
<summary> | <details> 의 제목 부분 | <summary>더보기</summary> |
<figure> | 이미지, 도표, 코드 블록 등 묶음 | <figure> <img src="a.jpg"><figcaption>설명</figcaption></figure> |
<figcaption> | <figure> 에 대한 설명 | <figcaption>설명</figcaption> |
검색엔진최적화(SEO) 방법
검색 사이트는 사용자에게 더 정확하고 유용한 검색 결과를 제공하기 위해 검색엔진 최적화(SEO) 기술을 적용합니다. SEO는 검색엔진이 웹 사이트의 콘텐츠를 더 잘 이해하고 평가할 수 있도록 최적화하는 작업입니다. 개발자들은 검색엔진에 친화적인 사이트를 구축해야하며, 이를 위해 다양한 전략을 활용할 수 있습니다.
코드 최적화
- HTML 구조와 마크업 최적화 : 불필요한 태그 제거
- 시맨틱 태그 사용 :
<head><nav><main> - 적절한 제목 태그 사용 :
<h1>~<h6> - 이미지
alt속성 작성 : 이미지에 대체 설명 작성하기 <title>태그 : 페이지 주제를 명확히 설명
콘텐츠 최적화
- 키워드 전략 : 주제와 관련된 주요 키워드를 제목, 본문, 이미지 설명 등에 포함
- 정기적인 업데이트 : 최신 정보로 갱신하기
URL 구조 최적화
- 단어 구분시 하이픈 사용
/html-semantic-tags (굿)
/category?id=1234(땡)
기타
- 관련 콘텐츠끼리 내부 링크 연결
- HTTPS 적용 : HTTPS 사이트를 더 신뢰함
- 신뢰성 있는 사이트로부터 링크를 받기