[html] HTML5와 SEO

22 Dec 2023

html

HTML5는 웹 사이트를 개발하는 데 사용되는 가장 최신의 HTML 버전입니다. 이는 검색 엔진 최적화 (SEO) 측면에서 중요합니다. SEO를 향상시키기 위해 다양한 HTML5 기능을 활용하는 것이 중요합니다.

기본 구조

HTML5는 SEO를 위한 기본 구조를 제공합니다. 제목 태그, 메타 태그, 그리고 이미지 및 링크에 대한 대체 텍스트를 포함하여 웹 페이지의 기초적인 구조를 정확하게 작성함으로써 검색 엔진이 콘텐츠를 올바르게 이해하게 할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="웹 페이지 설명">
  <title>웹 페이지 제목</title>
</head>
<body>
  <header>
    <h1>메인 제목</h1>
    <nav>
      <ul>
        <li><a href="#">링크1</a></li>
        <li><a href="#">링크2</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>글 제목</h2>
      <p>글 내용</p>
    </article>
  </main>
  <footer>
    <p>저작권 정보</p>
  </footer>
</body>
</html>

시맨틱 태그

HTML5는 시맨틱 태그를 도입하여 콘텐츠의 의미를 명확하게 표현할 수 있습니다. <header>, <footer>, <article>, <nav> 등의 태그를 사용하여 웹 페이지의 구조를 더 명확하게 정의함으로써 SEO를 향상시킬 수 있습니다.

<header>
  <h1>메인 제목</h1>
</header>
<article>
  <h2>글 제목</h2>
  <p>글 내용</p>
</article>
<footer>
  <p>저작권 정보</p>
</footer>

미디어 태그

비디오 및 오디오 콘텐츠를 웹 페이지에 추가하는 경우, HTML5의 <video> 및 <audio> 태그를 사용합니다. 이를 통해 검색 엔진은 해당 미디어 콘텐츠를 이해하고 색인화할 수 있습니다.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<audio controls>
  <source src="sound.mp3" type="audio/mp3">
  Your browser does not support the audio tag.
</audio>

HTML5를 사용하여 웹 페이지를 구축하고 SEO를 고려함으로써 검색 엔진에서의 노출이 향상될 뿐만 아니라 사용자 경험도 개선될 수 있습니다.

기본 구조

시맨틱 태그

미디어 태그

참고 문헌