3-2. HTML 구조화

3-2-1. HTML 구조화란

HTML의 구조화는 검색 엔진이 웹 페이지의 내용과 구조를 명확하게 파악하여 크롤러가 페이지를 더 정확하게 인덱싱하고 검색 결과에 반영할 수 있게 합니다. 또한, 구조화된 HTML은 검색 결과의 품질을 향상해서 사용자가 웹 페이지와 관련된 정보를 쉽게 찾을 수 있도록 도와줍니다.

HTML의 기본 구조는 문서 형식을 선언하는 <!DOCTYPE html>, 문서의 전체 내용을 표시하는 <html>, 검색엔진이 문서의 정보를 이해할 수 있도록 설정하는 <head>, 화면에 표시되는 콘텐츠를 작성하는 <body>로 구성되어 있습니다.

<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>프론트엔드 개발자를 위한 SEO 가이드</title>
</head>
<body>
    <h1>프론트엔드 개발자를 위한 SEO 가이드 - HTML</h1>
</body>
</html>

3-2-2. HTML 구조화 시 사용되는 태그

① 시맨틱 태그(Semantic Tag)

시맨틱 태그(Semantic Tag)는 의미론적인(Semantic) 태그로 구체적이고 목적에 맞는 의미가 있어 웹 페이지의 구조와 내용을 더 명확하게 표현할 수 있습니다. 다양한 시맨틱 태그 중 몇 가지 중요한 태그를 살펴보겠습니다.

<header> 주로 웹 페이지의 제목이나 로고가 ****<header>에 포함됩니다. 검색 엔진은 이곳에 작성된 제목을 주요 제목으로 인식하거나, 내용에서 웹 페이지의 주제와 관련된 핵심 키워드를 분석해서 검색 결과에 표시합니다.
<nav> 웹 페이지의 내비게이션 영역을 표현하는 데 사용되는 태그로 웹 페이지의 메뉴, 목차, 사이트 내부 링크 등을 표현합니다. 검색 엔진은 <nav> 영역을 웹 페이지의 중요한 내용이라고 인식하기 때문에 검색 결과에 내용 일부를 포함할 수 있습니다.
<main> 웹 페이지의 핵심 콘텐츠를 감싸는 태그로 검색 엔진은 해당 영역이 웹 페이지의 내용 중 가장 핵심이라고 인식할 수 있습니다. 웹 페이지에서 가장 중요한 내용이기 때문에 <main>은 웹 페이지에서 한 번만 사용해야 합니다.
<article> 뉴스 기사, 블로그 글, 잡지 기사와 같이 독립적으로 읽을 수 있는 콘텐츠를 표현할 때 사용하는 태그입니다. 검색 엔진은 해당 콘텐츠를 독립적인 정보로 인식합니다.
<section> 본문 내에서 비슷한 주제의 콘텐츠를 그룹으로 묶어서 구분 지을 때 사용하는 태그입니다. 검색 엔진은 콘텐츠를 구조화하고 각 섹션의 내용을 더 잘 이해하는 데 도움을 받습니다.
<footer> HTML 문서의 하단 또는 <section>의 하단 영역에 작성되는 태그로, 이용 약관, 개인정보 처리 방침, 페이지 작성자, 연락처 등과 같은 보충 정보를 제공합니다.
<h1> - <h6> 헤딩 태그(Heading Tag)는 HTML 문서에서 각 콘텐츠의 제목을 표시하는 데 사용됩니다. 숫자가 작을수록 더 큰 제목을 의미합니다. 가장 중요한 제목을 정의하는 태그는 **<h1>**으로, 페이지나 주요 섹션의 제목으로 사용됩니다. 헤딩 태그는 웹 페이지의 정보를 계층적으로 표현하기 위해 사용되므로 페이지에 한 번만 사용하는 것이 권장됩니다.
<img>

<img> 사용 시 src에는 주소를 사용하고 alt에는 이미지를 설명을 작성합니다.

<img>는 이미지를 웹 페이지에 삽입하는 데 사용되는 태그입니다. 검색 엔진은 이미지 파일을 직접 읽을 수 없으므로 alt 속성에 쓴 대체 텍스트를 통해 이미지를 이해할 수 있습니다. 또한, 이미지 파일 이름에 키워드를 포함하여 작성하면 검색 엔진이 색인할 때 이미지 파일 이름을 고려할 수 있습니다.
<a> <a>는 HTML 문서에서 하이퍼링크를 생성하는 데 사용됩니다. 내부 링크를 생성하여 검색 엔진이 웹 사이트의 구조를 이해하는 데 도움을 줄 수 있으며, 외부 링크를 생성하여 검색 엔진이 사이트의 신뢰성을 결정하는 데 사용되는 외부 링크의 수와 품질을 측정할 수 있습니다.

② 태그 작성 시 주의 사항

시맨틱 태그를 사용할 때 주의해야 할 점은 태그를 목적에 부합하게 사용하는 것입니다. 시맨틱 태그를 사용하면 검색 엔진은 웹 페이지의 콘텐츠 구조를 명확하게 파악할 수 있으며, 웹 페이지는 콘텐츠의 유형을 더욱 잘 나타낼 수 있게 됩니다.

<header>, <main>, <footer>, <h1>은 한 페이지에 하나만 사용하는 것이 좋습니다.