시멘틱 태그란 결국 Html의 태그를 봇(bot)이 어떻게 받아드리느냐의 문제입니다.
사람이 아닌 크롤러(검색에진의 bot)는 HTML 상의 태그들을 보고 정보성을 판단한 다는 것입니다. 아래 내용이 어렵다면, HMTL의 기초적인 부분부터 확인해보셔야합니다.
SEO 시멘틱 태그 목록
- header: 웹 페이지의 머리말을 나타내며, 대개 웹사이트 이름, 로고, 검색창 등이 들어갑니다.
- nav: 웹 페이지의 네비게이션 링크를 나타냅니다.
- section: 웹 페이지의 섹션을 나타냅니다. 섹션은 주제나 콘텐츠의 목적에 따라 나뉘어질 수 있습니다.
- article: 웹 페이지 내에서 독립적인 콘텐츠 블록을 나타냅니다. 뉴스 기사, 블로그 포스트 등이 이에 해당됩니다.
- aside: 웹 페이지의 부가 콘텐츠나 사이드바를 나타냅니다.
- footer: 웹 페이지의 푸터를 나타내며, 대개 저작권 정보, 연락처, 사이트맵 등이 들어갑니다.
- h1~h6: 웹 페이지의 제목을 나타냅니다. h1은 가장 중요한 제목이며, h2h6은 하위 제목을 나타냅니다.
- figure, figcaption: 이미지나 동영상 등의 멀티미디어 콘텐츠를 나타내며, figcaption은 콘텐츠에 대한 설명을 제공합니다.
- main: 웹 페이지의 핵심 콘텐츠를 나타냅니다.
- time: 날짜와 시간 정보를 나타냅니다.
- address: 주소나 연락처 정보를 나타냅니다.
- mark: 강조하고자 하는 텍스트를 감싸 강조합니다.
시멘틱 태그 활용 방법
푸터에 들어가는 ©는 “저작권”을 나타내는 HTML 엔티티(Entity)입니다. 이를 사용하면 “©” 문자를 표현할 수 있습니다. 웹 페이지에서는 일반적으로 footer 등에서 저작권 정보를 표시할 때 이 엔티티를 사용합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시맨틱 태그 예시</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Us</h2>
<p>We are a company that specializes in creating high-quality web content.</p>
<p>Our team consists of experienced writers and designers who are dedicated to providing the best service possible.</p>
</section>
<section>
<h2>Our Services</h2>
<article>
<h3>Content Writing</h3>
<p>We provide professional content writing services for businesses and individuals.</p>
</article>
<article>
<h3>Web Design</h3>
<p>We also offer custom web design services to help you create a website that stands out from the rest.</p>
</article>
</section>
<aside>
<h3>Recent Posts</h3>
<ul>
<li><a href="#">How to Create a Successful Blog</a></li>
<li><a href="#">The Importance of SEO for Your Website</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>