10.1 시맨틱 마크업
SEO (검색 엔진 최적화)는 웹 개발에서 중요한 역할을 해. 왜냐면 검색 엔진 결과에서 웹 페이지의 가시성을 향상시키는 데 도움을 주거든. 현대 HTML 마크업은 SEO에 상당한 영향을 미쳐서, 검색 엔진이 내용을 더 잘 이해하고 색인화할 수 있게 해줘. 현대 HTML 마크업과 SEO의 주요 영향력을 살펴보자.
HTML5의 시맨틱 태그는 검색 엔진이 웹 페이지의 구조와 콘텐츠를 이해하는 데 도움을 줘. 올바른 태그를 사용하면 접근성을 개선하고 검색 엔진이 콘텐츠를 더 쉽게 이해할 수 있게 만들어.
시맨틱 태그의 예시:
<header>: 페이지 또는 섹션의 헤더<nav>: 네비게이션 링크<main>: 페이지의 주요 콘텐츠<section>: 주제와 관련된 섹션<article>: 독립적인 콘텐츠 블록<aside>: 추가 정보 또는 사이드바<footer>: 페이지 또는 섹션의 바닥글
사용 예시:
<body>
<header>
<h1>사이트 제목</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>
<article>
<h2>기사 1</h2>
<p>기사 내용...</p>
</article>
<section>
<h2>섹션</h2>
<p>섹션 내용...</p>
</section>
</main>
<aside>
<h2>사이드바</h2>
<p>추가 정보...</p>
</aside>
<footer>
<p>© 2024 내 사이트. 모든 권리 보유.</p>
</footer>
</body>
10.2 마이크로데이터
마이크로데이터 (structured data)는 페이지의 내용을 검색 엔진에 추가 정보로 제공하는 데 사용돼. 이게 검색 엔진이 내용을 더 잘 이해하게 하고 검색 결과에서 페이지의 가시성을 향상시켜줘.
스키마 예시 (Schema.org):
- Article: 기사 및 뉴스에 사용
- BreadcrumbList: 네비게이션 경로에 사용
- Product: 제품 설명에 사용
- Event: 이벤트 설명에 사용
마이크로데이터 사용 예:
<body>
<article>
<h1>기사 제목</h1>
<p>저자: 저자 이름</p>
<p>게시 날짜: 2024년 1월 1일</p>
<img src="https://example.com/image.jpg" alt="이미지 예시">
<p>기사 내용...</p>
</article>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "기사 제목",
"author": "저자 이름",
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg"
}
</script>
10.3 헤더 및 메타 태그 최적화
헤더와 메타 태그는 SEO에서 중요한 역할을 해. 왜냐면 이게 페이지의 콘텐츠에 대한 정보를 제공해주거든.
메타 태그:
<title>: 검색 결과에 표시되는 페이지 제목<meta name="description">: 검색 결과 스니펫에 사용되는 페이지 설명<meta name="keywords">: 키워드 (현대 검색 엔진에서는 큰 의미가 없음)
메타 태그 사용 예:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지 제목 예</title>
<meta name="description" content="이것은 SEO를 위한 페이지 설명 예입니다.">
<meta name="keywords" content="예, SEO, HTML">
</head>
<body>
<h1>페이지 제목</h1>
<p>페이지 내용...</p>
</body>
</html>
10.4 이미지 최적화
이미지 최적화는 alt 및 title 속성 사용과 압축 및 현대적인 이미지 형식 사용(예: WebP)을 통해 빠른 로딩 시간을 보장하는 것을 포함해.
사용 예:
<body>
<h1>이미지 최적화 예</h1>
<img src="example.jpg" alt="이미지 설명" title="이미지 제목" loading="lazy">
</body>
10.5 브레드크럼
브레드크럼 (breadcrumbs)은 사용자가 메인 페이지에서 현재 페이지까지 이동한 경로를 보여주는 네비게이션 요소야. 이거는 사용자가 사이트에서 쉽게 탐색할 수 있도록 도와주는데, 이전 네비게이션 레벨로 링크를 제공함으로써 가능해. 이 요소는 특히 깊은 계층 구조를 가진 대형 사이트에서 사용자 인터페이스의 중요한 부분이야.
브레드크럼의 주요 측면
브레드크럼은 일반적으로 페이지 상단의 제목이나 메뉴 아래에 표시되는 링크의 문자열이야. 이 체인의 각 링크는 사용자가 현재 페이지에 도달하기 위해 거친 페이지들로 연결돼 있어.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/home">홈</a></li>
<li class="breadcrumb-item"><a href="/category">카테고리</a></li>
<li class="breadcrumb-item active" aria-current="page">현재 페이지</li>
</ol>
</nav>
브레드크럼의 종류:
- 계층적: 메인 페이지부터 사이트의 계층 구조를 보여줘.
- 예: 홈 > 카테고리 > 하위카테고리 > 현재 페이지
- 시간순: 사용자 동작의 순서를 보여줘서 다단계 네비게이션이나 구매 과정에서 특히 유용해.
- 예: 홈 > 카테고리 > 제품 > 장바구니 > 결제
- 속성기반: 현재 페이지의 속성이나 태그 표시를 위해 사용되고, 대규모 카테고리나 필터가 있는 사이트에서 특히 유용해.
- 예: 홈 > 전자제품 > 휴대폰 > 스마트폰 > Apple
브레드크럼의 장점:
- 네비게이션 개선: 사용자가 이전 페이지로 신속하게 돌아갈 수 있게 해줘.
- SEO 장점: 검색 엔진이 사이트 구조를 이해하고 색인을 개선하는 데 도움을 줘.
- 사용자 편의성: 사이트를 더 직관적이고 사용하기 쉽게 만들어줘.
- 이탈률 감소: 쉬운 네비게이션을 제공함으로써 이탈률을 줄일 수 있어. 그러니까 사용자가 이전 페이지로 쉽게 돌아갈 수 있어서 사이트를 떠나지 않아도 되거든.
SEO에 대한 장점
브레드크럼은 SEO에서 중요한 역할을 해. 왜냐면 검색 엔진이 사이트 구조를 더 잘 이해하게 돕고 사용자에게 네비게이션을 개선해 주기 때문이야. 올바른 브레드크럼 사용은 검색 결과에서 사이트의 랭킹에 긍정적인 영향을 미칠 수 있어.
GO TO FULL VERSION