CodeGym /자바 코스 /Frontend SELF KO /SEO 최적화

SEO 최적화

Frontend SELF KO

레벨 11 , 레슨 4

사용 가능

10.1 시맨틱 마크업

SEO (검색 엔진 최적화)는 웹 개발에서 중요한 역할을 해. 왜냐면 검색 엔진 결과에서 웹 페이지의 가시성을 향상시키는 데 도움을 주거든. 현대 HTML 마크업은 SEO에 상당한 영향을 미쳐서, 검색 엔진이 내용을 더 잘 이해하고 색인화할 수 있게 해줘. 현대 HTML 마크업과 SEO의 주요 영향력을 살펴보자.

HTML5의 시맨틱 태그는 검색 엔진이 웹 페이지의 구조와 콘텐츠를 이해하는 데 도움을 줘. 올바른 태그를 사용하면 접근성을 개선하고 검색 엔진이 콘텐츠를 더 쉽게 이해할 수 있게 만들어.

시맨틱 태그의 예시:

<header>: 페이지 또는 섹션의 헤더
<nav>: 네비게이션 링크
<main>: 페이지의 주요 콘텐츠
<section>: 주제와 관련된 섹션
<article>: 독립적인 콘텐츠 블록
<aside>: 추가 정보 또는 사이드바
<footer>: 페이지 또는 섹션의 바닥글

사용 예시:

HTML

    
      <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>&copy; 2024 내 사이트. 모든 권리 보유.</p>
        </footer>
      </body>

10.2 마이크로데이터

마이크로데이터 (structured data)는 페이지의 내용을 검색 엔진에 추가 정보로 제공하는 데 사용돼. 이게 검색 엔진이 내용을 더 잘 이해하게 하고 검색 결과에서 페이지의 가시성을 향상시켜줘.

스키마 예시 (Schema.org):

Article: 기사 및 뉴스에 사용
BreadcrumbList: 네비게이션 경로에 사용
Product: 제품 설명에 사용
Event: 이벤트 설명에 사용

마이크로데이터 사용 예:

HTML

    
      <body>
        <article>
          <h1>기사 제목</h1>
          <p>저자: 저자 이름</p>
          <p>게시 날짜: 2024년 1월 1일</p>
          <img src="https://example.com/image.jpg" alt="이미지 예시">
          <p>기사 내용...</p>
        </article>
      </body>

JavaScript

    
      <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

    
      <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)을 통해 빠른 로딩 시간을 보장하는 것을 포함해.

사용 예:

HTML

    
      <body>
        <h1>이미지 최적화 예</h1>
        <img src="example.jpg" alt="이미지 설명" title="이미지 제목" loading="lazy">
      </body>

10.5 브레드크럼

브레드크럼 (breadcrumbs)은 사용자가 메인 페이지에서 현재 페이지까지 이동한 경로를 보여주는 네비게이션 요소야. 이거는 사용자가 사이트에서 쉽게 탐색할 수 있도록 도와주는데, 이전 네비게이션 레벨로 링크를 제공함으로써 가능해. 이 요소는 특히 깊은 계층 구조를 가진 대형 사이트에서 사용자 인터페이스의 중요한 부분이야.

브레드크럼의 주요 측면

브레드크럼은 일반적으로 페이지 상단의 제목이나 메뉴 아래에 표시되는 링크의 문자열이야. 이 체인의 각 링크는 사용자가 현재 페이지에 도달하기 위해 거친 페이지들로 연결돼 있어.

HTML

    
      <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에서 중요한 역할을 해. 왜냐면 검색 엔진이 사이트 구조를 더 잘 이해하게 돕고 사용자에게 네비게이션을 개선해 주기 때문이야. 올바른 브레드크럼 사용은 검색 결과에서 사이트의 랭킹에 긍정적인 영향을 미칠 수 있어.

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION