On-Page SEO 실전: 제목 태그부터 구조화 데이터까지

On-Page SEO(페이지 내 최적화)는 외부 링크처럼 남의 손에 달린 요소와 달리 운영자가 완전히 통제할 수 있는 영역입니다. 제목 태그 한 줄, 소제목 하나, 이미지 설명 하나가 검색 결과의 표시와 클릭, 그리고 AI가 페이지를 이해하는 방식에 직접 영향을 줍니다.

3.1 제목 태그와 메타 설명 작성법

제목 태그(<title>)는 검색 결과에서 클릭할 수 있는 제목의 주된 재료이자, 검색엔진이 페이지 주제를 파악하는 핵심 신호입니다. 메타 설명(meta description)은 순위 요소는 아니지만 제목 아래 요약문으로 쓰여 클릭 여부를 좌우합니다.

제목 태그 작성 원칙

• 핵심 키워드를 앞쪽에: 검색어와 일치하는 핵심 표현을 제목 앞부분에 두세요. 길면 뒷부분이 잘리므로 중요한 내용을 먼저 씁니다.
• 길이는 화면 폭 기준: 구글은 정해진 글자 수 제한 대신 화면 폭에 맞춰 제목을 자릅니다. 저희는 핵심 내용을 한글 기준 앞쪽 30자 안팎에 담기를 권장합니다.
• 페이지마다 고유하게: 여러 페이지가 같은 제목을 쓰면 검색엔진이 어느 페이지를 보여 줄지 판단하기 어렵습니다.
• 내용과 일치하게: 구글은 제목이 내용과 맞지 않거나 키워드로 채워져 있으면 본문의 H1 등을 활용해 제목을 다시 만들어 보여 줄 수 있습니다.
• 브랜드는 끝에: "| 브랜드명" 형식으로 뒤에 붙이세요. 연도는 실제로 그해 내용으로 갱신한 경우에만 넣습니다.

<!-- 권장: 핵심 표현이 앞에, 대상과 내용이 분명함 -->
<title>종합소득세 신고 방법 2026: 프리랜서·개인사업자 단계별 안내 | 예시세무회계</title>

<!-- 피해야 할 형태: 키워드 나열, 무엇을 얻는지 알 수 없음 -->
<title>종합소득세 종소세 소득세 신고 세금 신고 방법 세무사 세무회계</title>

메타 설명 작성 원칙

• 얻을 것을 요약: 이 페이지에서 독자가 무엇을 알게 되는지 한두 문장으로 전달하세요.
• 핵심 내용은 앞쪽에: 모바일에서는 더 짧게 잘리므로, 저희는 중요한 정보를 앞쪽 80자 안팎에 담기를 권장합니다.
• 검색어와 같은 표현 사용: 검색어와 일치하는 단어는 검색 결과에서 굵게 표시되어 눈에 띕니다.
• 페이지마다 다르게: 모든 페이지에 같은 설명을 복사해 넣지 마세요.

<meta name="description" content="프리랜서와 개인사업자가 5월 종합소득세를 홈택스로 직접 신고하는 절차를 단계별로 정리했습니다. 신고 대상, 경비 처리, 가산세 기준까지 한 번에 확인하세요.">

3.2 헤딩 구조(H1~H6) 설계 원칙

헤딩 태그는 페이지 내용의 목차 역할을 하는 제목 계층입니다. 검색엔진과 AI는 헤딩으로 페이지의 구성과 각 부분의 주제를 파악하고, 독자와 스크린 리더 이용자도 헤딩으로 원하는 부분을 찾습니다.

• H1: 페이지의 주제를 대표하는 제목입니다. 하나만 쓰는 것이 가장 명확하며, 제목 태그와 같은 주제를 담습니다.
• H2: 주요 섹션을 나눕니다. 독자가 실제로 묻는 질문 형태로 쓰면 검색과 AI 답변 모두에 유리합니다.
• H3~H4: 섹션 안의 세부 항목을 나눕니다. H5, H6까지 깊어지면 구조를 단순하게 다시 나누는 편이 좋습니다.

H1 종합소득세 신고 방법: 프리랜서·개인사업자 단계별 안내
  H2 종합소득세 신고 대상은 누구인가요?
  H2 신고 기간은 언제인가요?
  H2 홈택스로 직접 신고하는 방법
    H3 1단계: 신고 도움 서비스 확인
    H3 2단계: 수입금액과 경비 입력
  H2 기한을 놓치면 가산세는 얼마인가요?
  H2 세무사에게 맡기면 비용은 얼마인가요?

질문형 H2 바로 아래 첫 한두 문장에는 그 질문의 답을 먼저 쓰세요. 이렇게 하면 그 문단만 떼어 내도 답이 되므로 추천 스니펫과 AI 답변에 인용되기 쉽습니다.

3.3 URL 경로와 슬러그 최적화

URL은 검색엔진과 방문자 모두에게 페이지의 위치와 주제를 알려 주는 주소입니다. 좋은 URL은 짧고, 읽을 수 있고, 한 번 정하면 바뀌지 않습니다.

• 짧고 의미 있게: /board/view.php?no=1234&cat=7보다 /guide/income-tax-filing이 주제를 잘 드러냅니다.
• 단어 구분은 하이픈(-)으로: 구글은 밑줄(_)보다 하이픈을 단어 구분자로 권장합니다.
• 소문자로 통일: URL은 대소문자를 구분하므로 섞어 쓰면 같은 페이지가 여러 주소로 나뉠 수 있습니다.
• 한글 슬러그는 선택 사항: 한글 URL도 검색엔진이 처리할 수 있지만, 복사해 공유하면 %EC%A2%85…처럼 긴 인코딩 문자열로 바뀝니다. 공유가 잦은 사이트라면 짧은 영문 슬러그가 관리하기 편합니다.
• 날짜는 꼭 필요할 때만: 뉴스처럼 날짜가 의미 있는 콘텐츠가 아니라면 /2024/04/ 같은 경로는 넣지 않는 편이 갱신과 관리에 유리합니다.

3.4 이미지 최적화: 대체 텍스트, 차세대 포맷, 지연 로딩

이미지 최적화는 이미지 내용을 텍스트로 설명하고, 파일 용량을 줄이고, 필요한 순간에만 불러오도록 설정하는 작업입니다. 이미지는 페이지 용량과 로딩 속도에 가장 큰 영향을 주는 요소이면서, 이미지 검색을 통한 추가 유입 경로이기도 합니다.

대체 텍스트 (alt)

대체 텍스트는 이미지를 볼 수 없는 사람과 검색엔진에게 이미지 내용을 설명하는 속성입니다. 스크린 리더가 읽어 주며, 검색엔진이 이미지 주제를 이해하는 주요 단서가 됩니다.

<!-- 피해야 할 형태 -->
<img src="IMG_2031.jpg" alt="이미지1">
<img src="IMG_2031.jpg" alt="치과 임플란트 치과 송도 치과 추천 임플란트 가격">

<!-- 권장 형태: 보이는 내용을 구체적으로 -->
<img src="songdo-clinic-consultation-room.webp" alt="창가에 상담 테이블과 구강 스캐너가 놓인 치과 상담실">

• 보이는 내용을 구체적이고 간결하게 설명하세요. 키워드는 자연스럽게 들어갈 때만 넣습니다.
• 순수 장식용 이미지는 alt=""로 비워 스크린 리더가 건너뛰게 하세요.
• 파일 이름도 IMG_2031.jpg 대신 내용을 설명하는 영문 소문자와 하이픈으로 지으세요.

차세대 이미지 포맷과 크기 지정

• WebP·AVIF: 같은 화질이라면 일반적으로 JPEG·PNG보다 용량이 작습니다. 구형 브라우저를 고려해 <picture>로 대체 형식을 함께 제공하면 안전합니다.
• SVG: 로고와 아이콘 같은 벡터 그래픽에 적합하며, 어떤 해상도에서도 선명합니다.
• width·height 지정: 이미지에 가로·세로 크기를 지정해 두면 이미지가 늦게 로드되어도 화면이 밀리지 않습니다. 레이아웃 이동 지표인 CLS의 '좋음' 기준은 0.1 이하입니다.

지연 로딩과 대표 이미지 우선 로딩

지연 로딩(lazy loading)은 화면에 보이기 직전까지 이미지 로딩을 미루는 기법으로, 첫 화면의 로딩 속도를 높여 줍니다. 단, 첫 화면에 크게 보이는 대표 이미지는 가장 큰 콘텐츠가 그려지는 시간인 LCP(Largest Contentful Paint)를 결정하므로 지연 로딩하지 말고 우선 로딩하세요. LCP의 '좋음' 기준은 2.5초 이하입니다(web.dev).

<!-- 첫 화면 대표 이미지: 우선 로딩 -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <img src="hero.webp" alt="송도 센트럴파크가 내려다보이는 상담실 전경"
       width="1200" height="675" fetchpriority="high">
</picture>

<!-- 스크롤해야 보이는 본문 이미지: 지연 로딩 -->
<img src="step-2-hometax.webp" alt="홈택스 종합소득세 신고 2단계 입력 화면"
     width="800" height="500" loading="lazy">

Core Web Vitals 전반과 측정 방법은 PART 05 기술적 SEO에서 다룹니다.

3.5 내부 링크(Internal Linking) 설계

내부 링크는 같은 사이트 안의 다른 페이지로 연결하는 링크입니다. 검색봇이 페이지를 발견하는 경로이자, 페이지 사이의 주제 관계와 중요도를 알려 주는 신호이며, 독자가 다음에 읽을 글을 찾는 길잡이입니다.

내부 링크의 세 가지 기능

1. 발견: 검색봇은 링크를 따라 이동합니다. 어디에서도 링크되지 않은 '고아 페이지'는 발견과 색인이 늦어질 수 있습니다.
2. 중요도 전달: 외부 링크를 많이 받은 페이지에서 핵심 페이지로 링크하면, 그 페이지가 사이트에서 중요하다는 신호가 전달됩니다.
3. 주제 구조 전달: 허브 페이지와 하위 글을 서로 연결하면 검색엔진이 사이트의 주제 구조를 정확히 이해합니다(PART 02의 토픽 클러스터 참조).

효과적인 내부 링크 원칙

• 앵커 텍스트는 설명적으로: "여기를 클릭" 대신 "종합소득세 경비 인정 항목"처럼 대상 페이지의 주제가 드러나는 문구를 쓰세요.
• 새 글을 발행하면 기존 관련 글에서도 링크하세요. 새 글로 들어오는 링크가 있어야 빨리 발견됩니다.
• 전환 페이지로 가는 길을 만드세요. 정보 글에서 관련 서비스·상품 페이지로 자연스럽게 연결합니다.
• 본문과 관계없는 링크를 쌓지 마세요. 링크가 지나치게 많으면 정말 중요한 링크가 묻히고 독자도 길을 잃습니다.
• 링크는 크롤링 가능한 형태로: <a href="…"> 태그를 쓰세요. 자바스크립트 클릭 이벤트로만 이동하는 버튼은 검색봇이 따라가지 못할 수 있습니다.

3.6 콘텐츠 분량과 읽기 편의성

적정 분량은 정해진 글자 수가 아니라 독자의 질문에 빠짐없이 답하는 데 필요한 만큼입니다. 구글은 유용한 콘텐츠 가이드에서 선호하는 단어 수가 따로 없다고 밝히고 있습니다. 500자로 충분한 답이면 500자로, 5,000자가 필요하면 5,000자로 쓰세요.

긴 글이 상위에 자주 보이는 것은 길어서가 아니라, 주제를 깊이 다루다 보니 길어진 경우가 많기 때문입니다. 분량을 늘리려고 같은 말을 반복하면 오히려 핵심 답을 찾기 어려워집니다.

읽기 편한 글의 조건

• 답을 먼저: 각 섹션의 첫 문장에서 결론이나 정의를 말하고, 근거와 설명은 그 뒤에 씁니다.
• 짧은 문단: 한 문단은 2~4문장, 한 문단에는 한 가지 생각만 담습니다.
• 소제목으로 구조화: 훑어보는 독자도 원하는 부분을 바로 찾을 수 있어야 합니다.
• 목록과 표 활용: 나열할 정보는 목록으로, 비교할 정보는 표로 정리합니다. 목록과 표는 AI가 정보를 추출하기에도 좋은 형식입니다.
• 근거 표시: 수치와 주장에는 출처와 기준 시점을 적어 두세요.

3.7 구조화 데이터(Schema Markup): 2026년 기준 정리

구조화 데이터는 페이지가 무엇에 관한 것인지(누가 운영하는 사이트인지, 어떤 글이나 상품인지, 언제 작성되었는지)를 schema.org 어휘로 기계가 읽을 수 있게 설명하는 코드입니다. 구글은 JSON-LD 형식을 권장합니다. 2026년 현재 구조화 데이터의 역할은 '검색 결과를 화려하게 꾸미는 도구'에서 '엔티티를 정확히 설명하는 도구'로 무게중심이 옮겨졌습니다.

사라지거나 줄어든 리치 결과

구글은 최근 몇 년간 검색 결과 화면을 단순화하며 여러 리치 결과를 정리했습니다. 과거 자료에 나온 "FAQ 마크업으로 검색 결과 면적을 넓히세요" 같은 조언은 더 이상 유효하지 않습니다.

2026년에도 유용한 구조화 데이터

리치 결과로 표시되는지는 항상 구글이 결정합니다. 예를 들어 회사나 매장(Organization, LocalBusiness)이 자기 자신에 대한 리뷰를 직접 마크업한 별점은 리뷰 리치 결과로 표시되지 않습니다. 구조화 데이터는 '표시를 보장하는 장치'가 아니라 '정확한 설명'으로 이해하세요.

JSON-LD 작성 예시

아래는 세무사무소 사이트를 가정한 예시입니다. 홈페이지와 하위 페이지에 공통으로 넣는 조직·사이트·이동 경로 정보를 @graph로 묶고, 가이드 글에는 Article을 추가합니다.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://www.example.co.kr/#organization",
      "name": "예시세무회계",
      "url": "https://www.example.co.kr/",
      "logo": "https://www.example.co.kr/images/logo.png",
      "telephone": "+82-32-000-0000",
      "sameAs": ["https://blog.naver.com/example-tax"]
    },
    {
      "@type": "WebSite",
      "@id": "https://www.example.co.kr/#website",
      "name": "예시세무회계",
      "url": "https://www.example.co.kr/",
      "publisher": { "@id": "https://www.example.co.kr/#organization" }
    },
    {
      "@type": "BreadcrumbList",
      "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "홈", "item": "https://www.example.co.kr/" },
        { "@type": "ListItem", "position": 2, "name": "세무 가이드", "item": "https://www.example.co.kr/guide/" },
        { "@type": "ListItem", "position": 3, "name": "종합소득세 신고 방법" }
      ]
    }
  ]
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "종합소득세 신고 방법: 프리랜서·개인사업자 단계별 안내",
  "image": ["https://www.example.co.kr/images/income-tax-guide.webp"],
  "datePublished": "2026-04-01T09:00:00+09:00",
  "dateModified": "2026-09-15T10:00:00+09:00",
  "author": {
    "@type": "Person",
    "name": "홍길동",
    "jobTitle": "세무사",
    "url": "https://www.example.co.kr/about#hong"
  },
  "publisher": { "@id": "https://www.example.co.kr/#organization" }
}
</script>

작성 규칙과 검증

• 마크업은 페이지에 실제로 보이는 내용과 일치해야 합니다. 화면에 없는 가격, 리뷰, 저자를 마크업에만 넣지 마세요.
• 발행일·수정일은 본문에 표시한 날짜와 같게 유지하고, 내용을 실제로 고쳤을 때만 수정일을 바꾸세요.
• 구글이 지원하는 유형은 리치 결과 테스트(Rich Results Test)로, schema.org 문법 전반은 Schema Markup Validator로 검증하세요.
• 배포 후에는 Search Console의 관련 보고서에서 오류와 경고를 정기적으로 확인하세요.

3.8 추천 스니펫(Featured Snippet)과 답변 우선 문단

추천 스니펫은 구글 검색 결과 상단에 페이지의 한 부분을 발췌해 질문의 답처럼 보여 주는 결과입니다. 질문에 짧고 완결되게 답하는 문단, 목록, 표가 선택되며, 이 작성 방식은 AI 개요와 네이버 AI 브리핑 같은 AI 답변에 인용되는 조건과도 거의 같습니다.

추천 스니펫의 형태

• 문단형: "종합소득세 신고 기간은 언제인가요?"에 대한 두세 문장의 답
• 목록형: "홈택스 종합소득세 신고 방법"에 대한 번호 붙은 단계
• 표형: "간편장부 복식부기 차이"에 대한 비교표
• 동영상형: 방법을 보여 주는 동영상의 특정 구간

추천 스니펫과 AI 인용을 함께 노리는 방법

1. 이미 1페이지에 있는 검색어부터: 추천 스니펫은 주로 상위 결과에서 발췌되므로, Search Console에서 1페이지 안팎의 질문형 검색어를 먼저 고릅니다.
2. 질문형 소제목 + 바로 답하기: 질문을 H2나 H3로 쓰고, 바로 아래 첫 문장에서 조건과 함께 답합니다. 예: "종합소득세 확정신고 기간은 매년 5월 1일부터 5월 31일까지입니다(성실신고확인 대상자는 6월 30일까지)."
3. 절차는 목록, 비교는 표로: HTML의 <ol>, <ul>, <table>을 그대로 쓰세요. 이미지 속 글자는 텍스트로 발췌되기 어렵습니다.
4. 답 다음에 깊이를: 짧은 답 뒤에 예외, 근거, 사례를 이어서 써야 클릭한 독자도 만족합니다.

3.9 표준 URL(canonical)과 중복 콘텐츠 처리

중복 콘텐츠는 같거나 거의 같은 내용이 여러 URL에 존재하는 상태입니다. 이때 검색엔진은 그중 하나를 대표 URL로 골라 색인하는데, 운영자가 원하는 URL이 선택되도록 알려 주는 것이 표준 URL 태그(canonical)입니다.

<link rel="canonical" href="https://www.example.co.kr/guide/income-tax-filing">

표준 URL 태그가 필요한 대표 상황

• 쇼핑몰에서 정렬·필터 매개변수로 주소가 늘어날 때 (예: /cleaner?sort=price&color=white)
• 광고·이메일 추적 매개변수(utm_ 등)가 붙은 주소가 공유될 때
• www와 non-www, http와 https, 끝 슬래시 유무가 섞여 있을 때(이 경우는 301 리다이렉트로 하나로 합치는 것이 우선입니다)
• 같은 글을 다른 사이트에 다시 게재하면서 원본을 알려야 할 때

표준 URL 사용 원칙

• 모든 페이지에 자기 자신을 가리키는 canonical을 넣으세요. 추적 매개변수가 붙어도 대표 URL이 흔들리지 않습니다.
• canonical은 지시가 아니라 힌트입니다. 내부 링크, 사이트맵, 리다이렉트가 모두 같은 URL을 가리켜야 검색엔진이 그 URL을 대표로 받아들입니다.
• 다른 방법과 섞어 쓰지 마세요. 통합할 페이지는 301 리다이렉트, 검색에서 뺄 페이지는 noindex로 처리하고, noindex 페이지를 canonical 대상으로 지정하지 마세요.
• 매개변수는 사이트에서 관리하세요. Search Console의 URL 매개변수 도구는 2022년에 종료되었으므로 canonical, 내부 링크, 필터 URL 설계로 직접 관리해야 합니다.

3.10 다국어 태그(hreflang): 언어·지역별 페이지 연결

hreflang은 같은 내용의 페이지가 여러 언어나 지역 버전으로 있을 때, 검색엔진에 그 관계를 알려 이용자에게 맞는 버전을 보여 주게 하는 태그입니다. 한국어 사이트에 영어·일본어 버전을 함께 운영한다면 필요합니다.

<link rel="alternate" hreflang="ko" href="https://www.example.co.kr/ko/guide/">
<link rel="alternate" hreflang="en" href="https://www.example.co.kr/en/guide/">
<link rel="alternate" hreflang="ja" href="https://www.example.co.kr/ja/guide/">
<link rel="alternate" hreflang="x-default" href="https://www.example.co.kr/en/guide/">

해외 검색엔진과 글로벌 사이트 구조는 PART 09에서 자세히 다룹니다.

3.11 소셜 미리보기 태그(Open Graph, X 카드)

소셜 미리보기 태그는 카카오톡, 페이스북, 링크드인, X(구 트위터) 등에서 링크를 공유할 때 표시되는 제목, 설명, 이미지를 지정합니다. 검색 순위 신호는 아니지만, 공유 링크의 클릭과 브랜드 인상에 직접 영향을 줍니다.

<!-- Open Graph: 카카오톡, 페이스북, 링크드인 등 -->
<meta property="og:type" content="article">
<meta property="og:title" content="종합소득세 신고 방법: 프리랜서·개인사업자 단계별 안내">
<meta property="og:description" content="홈택스 직접 신고 절차와 경비 처리, 가산세 기준을 정리했습니다.">
<meta property="og:image" content="https://www.example.co.kr/og/income-tax-guide.png">
<meta property="og:url" content="https://www.example.co.kr/guide/income-tax-filing">

<!-- X(구 트위터) 카드 -->
<meta name="twitter:card" content="summary_large_image">

• og:image: 1200×630 픽셀 비율로 만들면 대부분의 플랫폼에서 잘리지 않고 표시됩니다. 핵심 문구는 가장자리를 피해 가운데에 두세요.
• og:url: 표준 URL(canonical)과 같은 주소를 쓰세요.
• 캐시 갱신: 이미지를 바꿨는데 예전 미리보기가 보이면 각 플랫폼이 제공하는 공유 디버거로 캐시를 새로 고치세요.

3.12 로봇 메타 태그와 스니펫 제어

로봇 메타 태그는 개별 페이지의 색인 여부와 링크 추적, 검색 결과에 보여 줄 스니펫의 범위를 제어합니다. robots.txt가 '크롤링'을 제어한다면, 로봇 메타 태그는 '색인과 표시'를 제어합니다.

<!-- 기본값: 따로 쓰지 않아도 색인·링크 추적 허용 -->
<meta name="robots" content="index, follow">

<!-- 검색 결과에서 제외 (링크는 따라감) -->
<meta name="robots" content="noindex, follow">

<!-- 스니펫 길이 제한, 큰 이미지 미리보기 허용 -->
<meta name="robots" content="max-snippet:160, max-image-preview:large">

<!-- 특정 부분만 스니펫에서 제외 -->
<div data-nosnippet>회원 전용 상담 내용 요약</div>

nosnippet, data-nosnippet, max-snippet, noindex는 일반 검색 스니펫뿐 아니라 구글 AI 개요와 AI 모드에서 내 콘텐츠가 쓰이는 범위도 제한합니다. data-nosnippet은 span, div, section 요소에 붙입니다(Google Search Central). 스니펫을 지나치게 제한하면 AI 답변의 근거로 쓰일 기회도 줄어들므로 꼭 필요한 부분에만 쓰세요.

noindex가 필요한 페이지

• 사이트 내부 검색 결과 페이지(/search?q=…)
• 로그인, 회원가입, 장바구니, 결제 단계 페이지
• 테스트·임시 페이지, 인쇄용 중복 페이지
• 내용이 거의 없는 태그·카테고리 목록 페이지

PART 3 정리

학습자별 점검 사항