SOYOYU
페이지 영역

<article>

페이지에서 독립적으로 배포 가능한 콘텐츠 단위. 블로그 글·뉴스 기사·카드뉴스 한 장.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

●●●●○높음

Schema.org Article과 결합 시 검색 결과의 rich snippet 후보. 작성자·발행일 마크업과 함께.

GEO

●●●●○높음

AI가 페이지에서 인용할 단위를 식별. article 단위로 답변 인용 가능성이 올라간다.

AEO

●●●●○높음

article 안의 헤딩 + 본문 쌍이 Featured Snippet 후보 형태와 일치.

A11y

●●●○○중간

스크린리더가 article 진입 시 "article" 발화. 사용자가 콘텐츠 단위를 인지.

올바른 사용

  • 독립적으로 의미가 통하는 콘텐츠 단위
  • article 안에 자체 header·footer 가능
  • 헤딩(h1-h6) 포함 권장
  • Schema.org Article과 함께
블로그 글
<main>
  <article>
    <header>
      <h1>오늘의 글</h1>
      <p>작성자 · 2026-05-26</p>
    </header>
    <p>본문...</p>
    <footer>
      <p>태그: SEO, GEO</p>
    </footer>
  </article>
</main>

article 자체가 자체 header/footer를 가질 수 있다.

카드뉴스 리스트
<main>
  <h1>오늘의 뉴스</h1>
  <article>
    <h2>첫 번째 기사</h2>
    ...
  </article>
  <article>
    <h2>두 번째 기사</h2>
    ...
  </article>
</main>

한 페이지에 독립적인 여러 article. 각각 자체 헤딩 보유.

자주 보는 안티패턴

  • section과 article을 무차별 혼용
  • 모든 div를 article로 — 시맨틱 노이즈
  • article에 헤딩 없음
  • 한 페이지의 본문 전체를 단일 article로 (그건 main)
모든 div를 article로
<main>
  <article>
    <article>
      <article>...</article>
    </article>
  </article>
</main>

의미 없는 중첩. 시맨틱 노이즈만 발생.

헤딩 없는 article
<article>
  <p>본문만 있고 제목이 없음</p>
</article>

헤딩이 있어야 accessibility tree에서 article의 정체성이 드러남.

해설

페이지에서 떼어내도 그 자체로 의미가 통하는 콘텐츠 단위. 블로그 글 한 편, 뉴스 기사 한 건, 댓글 한 개, 제품 카드 한 장. RSS 피드에 하나의 아이템으로 들어갈 수 있는 단위가 article의 정의다.

SEO 관점에서 article은 Schema.org Article 타입과 짝을 이룬다. 둘이 함께 마크업되면 — 검색 결과에 작성자·발행일·이미지 미리보기가 함께 노출되는 rich snippet 후보가 된다. 같은 콘텐츠라도 article + Schema 조합이 있는 페이지가 검색 노출에서 시각적으로 더 두드러진다.

GEO 관점에서 AI는 페이지에서 답변을 추출할 단위를 식별해야 한다. article은 그 단위의 명시적 신호. "이 사이트의 최근 블로그 글 3개를 요약해줘" 같은 질문에 AI가 답할 때 — article 단위로 페이지를 분해해 각 article의 헤딩과 본문을 추출한다. article이 없으면 어디까지가 한 글인지를 시각·텍스트 패턴으로 추측한다.

AEO 관점에서 "질문 형식 헤딩 + 짧은 답변 본문"의 article 패턴이 Featured Snippet 인용에 가장 강하다. FAQ 페이지의 각 질문을 article로 감싸면 — 같은 콘텐츠가 더 자주 인용된다.

A11y 관점에서 스크린리더가 article 진입 시 "article 시작""article 끝"을 명시적으로 발화한다. 사용자가 지금 한 콘텐츠 단위 안에 있다는 사실을 인지. 페이지에 article이 여러 개면 사용자가 어느 단위의 어느 부분에 있는지를 따라간다.

자주 보는 안티패턴: 모든 div를 article로 바꾸는 과도한 시맨틱화(아무 의미 없는 중첩만 늘림), article에 헤딩이 없음(accessibility tree에서 제목 없는 article은 정체성이 약함), 한 페이지의 본문 전체를 단일 article로 감싸는 케이스 — 그건 main의 역할이고 article은 main 안에 들어가는 게 표준.

section과의 구분: article은 그 자체로 독립. 페이지에서 떼어내도 의미가 통함. section은 주제별 그룹이지만 페이지 안에서만 의미가 있음. 블로그 글 = article, 그 글 안의 "결론" 영역 = section.