SEO를 위한 HTML 태그: 중요한 태그와 예시

검색엔진과 AI 어시스턴트는 누군가 화면에서 페이지를 보기 전에 먼저 코드로 읽습니다. 몇 안 되는 SEO용 HTML 태그가 그 코드가 어떻게 이해될지를 결정합니다. 어떤 URL이 색인될지, 검색 결과에 어떤 제목이 나올지, 페이지가 무엇에 관한 것인지, 공유될 때 어떻게 보일지 말입니다. Google은 지원하는 meta 태그와 속성을 Search Central 문서의 한 페이지에 정리해 두었으며, 이 목록에 없는 것은 Google 검색에 아무런 영향을 주지 않습니다. 이 가이드는 유용한 태그를 예시와 함께 하나씩 소개하고, 피해야 할 실수와 잊어도 되는 태그를 알려 드립니다.

SEO에 중요한 HTML 태그는 무엇인가요?

아래 표가 기준 목록입니다. head의 태그는 기계에게 페이지를 설명하고, body의 태그는 사람이 읽는 내용을 구조화합니다.

Google에서의 표시 방식을 결정하는 head 태그는?

title 태그

title 태그는 페이지에서 가장 중요한 태그입니다. Google은 title 요소의 길이에 제한이 없다고 하지만, 제목 링크는 기기 화면 너비에 맞게 잘립니다. Google은 제목을 다시 쓰기도 하며, 문서에는 사용하는 출처로 title 요소와 화면에 보이는 주 제목부터 H1 제목, og:title 태그, 해당 페이지를 가리키는 링크의 앵커 텍스트까지가 나열되어 있습니다. H1과 본문 내용에 맞는 title이 Google이 그대로 유지하는 title입니다. 페이지마다 고유한 title을 쓰고, 핵심 키워드는 앞에, 브랜드명은 끝에 두세요.

meta description

meta description은 순위를 바꾸지 않지만, 제목 아래 스니펫으로 자주 쓰이기 때문에 클릭에 영향을 줍니다. Google은 검색어에 더 잘 맞는 페이지 내 문단으로 이를 대체하기도 합니다. 짧은 답변과 이점으로 구성하고, 같은 설명을 여러 페이지에 재사용하지 마세요.

meta robots 태그

robots meta 태그는 크롤러가 페이지를 어떻게 다뤄도 되는지 알려 줍니다. 가장 많이 쓰는 값은 페이지를 검색 결과에서 제외하는 noindex이고, 그 밖에 nofollow, nosnippet, 스니펫 길이를 제한하는 max-snippet 등이 있습니다. PDF처럼 head 영역이 없는 파일에서는 같은 지시를 HTTP 헤더 X-Robots-Tag로 전달합니다. 운영 중인 템플릿에 남아 있는 noindex는 트래픽 손실의 가장 흔한 원인 중 하나입니다. 배포할 때마다 확인하세요.

viewport와 charset

Google은 문서에서 viewport 태그가 있으면 페이지가 모바일 친화적이라는 뜻이라고 설명합니다. Google은 사이트의 모바일 버전을 색인하므로 이 태그는 모든 페이지에 있어야 합니다. 문자 인코딩 선언(Google은 UTF-8을 권장)은 제목과 스니펫의 글자 깨짐을 막아 주며, 다국어 사이트에서 특히 중요합니다.

어떤 URL을 색인할지 Google에 알려 주는 태그는?

head의 link 태그 두 개가 중복과 언어를 관리합니다. canonical 태그는 같은 콘텐츠에 여러 URL(필터, 추적 매개변수, HTTP와 HTTPS)로 접근할 수 있을 때 선호하는 버전을 지정합니다. Google은 이를 리디렉션, 내부 링크와 함께 강력한 힌트로 다루므로, 모든 신호가 같은 URL을 가리킬 때 가장 잘 작동합니다. 절대 URL을 쓰고, canonical은 페이지당 하나만 두며, 차단되었거나 noindex인 페이지를 가리키지 않도록 하세요.

hreflang 속성은 어떤 언어나 지역의 사용자에게 어떤 페이지를 보여 줄지 Google에 알려 줍니다. Google의 현지화된 버전 가이드에 따르면 각 버전은 자기 자신과 다른 모든 버전을 나열해야 하며, x-default 값으로 지원하지 않는 언어의 사용자를 위한 페이지를 지정할 수 있습니다. 반환 링크 누락은 가장 흔한 hreflang 오류입니다. 페이지 A가 페이지 B를 가리키면 페이지 B도 페이지 A를 다시 가리켜야 합니다.

검색엔진의 콘텐츠 이해를 돕는 body 태그는?

H1부터 H6까지의 제목

제목은 페이지의 뼈대입니다. 주제를 밝히는 H1 하나, 주요 섹션에는 H2, 섹션 안의 단계나 항목에는 H3를 쓰고, 보기 좋게 하려고 단계를 건너뛰지 마세요. Google은 H1이 여러 개여도 불이익은 없다고 밝혔지만, 명확한 H1 하나가 독자와 보조 기술에 가장 단순한 구조입니다. 질문 형태의 H2("X는 어떻게 작동하나요?")는 사람들이 검색어와 프롬프트를 입력하는 방식과도 잘 맞습니다.

이미지의 대체 텍스트

Google은 이미지 SEO 가이드라인에서 대체 텍스트를 컴퓨터 비전, 페이지 내용과 함께 사용해 이미지를 이해하며, alt 속성을 키워드로 채우면 사이트가 스팸으로 간주될 수 있다고 설명합니다. 이미지가 보여 주는 내용을 짧은 문장으로 설명하세요. 또한 Google은 CSS 배경 이미지를 색인하지 않으므로, 검색에 노출되어야 하는 이미지는 실제 img 요소가 필요합니다.

링크와 rel 속성

a 요소는 크롤러가 페이지를 발견하는 통로이므로, 내부 링크는 JavaScript로 동작하는 버튼이 아니라 href가 있는 진짜 링크여야 합니다. rel 속성은 외부 링크를 구분합니다. 유료 게재에는 sponsored, 댓글과 포럼 게시물에는 ugc, 보증하고 싶지 않은 링크에는 nofollow를 씁니다. Google은 2020년부터 이 값들을 힌트로 취급합니다. 설명적인 앵커 텍스트는 독자와 검색엔진 모두에게 도움이 됩니다.

HTML5 시맨틱 요소

main, article, nav, header, footer, section 같은 요소는 페이지의 어느 부분이 주요 콘텐츠이고 어느 부분이 모든 페이지에 반복되는지를 기계에 알려 줍니다. 그 자체로 순위를 올리지는 않지만, 검색엔진, 스크린 리더, AI 도구 모두가 주요 콘텐츠를 쉽게 분리할 수 있게 해 줍니다. 각 요소는 시맨틱 HTML 가이드에서 자세히 설명합니다. 본문의 strong과 em은 강조를 나타내므로 문단 전체가 아니라 핵심 용어에만 쓰세요.

소셜 미리보기와 리치 결과를 만드는 태그는?

Open Graph 프로토콜은 Facebook이 만들었고 지금은 대부분의 소셜 네트워크와 메신저가 읽습니다. og:title, og:description, og:image, og:url 태그를 정의하며, 페이지가 공유될 때 미리보기 카드를 구성합니다. 이 태그가 없으면 플랫폼이 추측하고, 엉뚱한 이미지가 쓰이는 경우가 많습니다. 게시 전에 Open Graph 미리보기 도구로 결과를 확인하세요.

script 태그에 넣는 JSON-LD 형식의 구조화 데이터는 Schema.org 어휘로 페이지를 설명합니다. 기사, 제품, 조직, 탐색경로, FAQ 등입니다. Google은 이를 리치 결과에 사용하며, AI 시스템에는 페이지 뒤에 있는 개체에 대한 명확한 사실을 제공합니다. 마크업은 페이지에 보이는 내용을 설명해야 합니다. AI 답변에서의 역할은 구조화 데이터와 AI 검색 가이드에서 다룹니다.

Google이 무시하는 HTML 태그는?

Google이 지원하는 태그 목록은 더 이상 관리하지 않아도 되는 것도 알려 줍니다.

• Meta keywords: Google은 meta keywords 태그를 Google 검색에서 사용하지 않으며 색인과 순위에 전혀 영향이 없다고 밝힙니다.
• 알 수 없는 meta 태그: Google은 meta author나 meta revisit-after처럼 지원하지 않는 meta 태그를 무시합니다.
• lang 속성: Google은 페이지의 언어를 lang 속성이 아니라 텍스트로 판단합니다. 접근성과 다른 도구를 위해 속성은 유지하고, 언어별 버전 연결에는 hreflang을 사용하세요.
• 리디렉션용 meta refresh: 작동은 하지만 Google은 서버 측 301 리디렉션을 권장합니다.

HTML 태그는 AI 답변에도 중요한가요?

그렇습니다. 이유는 간단합니다. ChatGPT, Claude, Gemini, Perplexity는 페이지에서 문단을 뽑아 답변하는데, 깔끔한 HTML은 그 문단을 찾기 쉽게 만듭니다. 여러 AI 크롤러가 JavaScript를 실행하지 않고 원본 HTML만 가져오기 때문에, 스크립트로 삽입된 title, canonical, 텍스트 블록은 끝내 전달되지 않을 수 있습니다. 명확한 제목 구조는 페이지를 독립적인 답변 단위로 나누고, 목록과 표는 사실을 한데 묶으며, 구조화 데이터는 사실을 모호함 없이 전달합니다. 이것이 생성형 엔진 최적화(GEO)의 기술적인 측면입니다. Google에 도움이 되는 태그는 AI 어시스턴트가 여러분을 정확하게 인용하는 데에도 도움이 됩니다.

페이지의 HTML 태그는 어떻게 확인하나요?

1. 원본 소스를 읽습니다. 소스 코드(Ctrl+U)를 열고 title, meta description, robots, canonical, hreflang 태그를 찾으세요. 렌더링된 페이지에만 나타나는 태그는 JavaScript에 의존하는 것입니다.
2. Google이 보는 화면과 비교합니다. Google Search Console의 URL 검사 도구는 Google이 렌더링한 HTML과 선택한 표준 URL을 보여 줍니다.
3. 페이지별로 점검합니다. 무료 Sorank Chrome 확장 프로그램은 보고 있는 페이지에서 빠졌거나 중복된 태그와 수정 방법을 보여 줍니다.
4. 사이트 전체를 점검합니다. 크롤러를 쓰면 수천 개의 URL에서 중복 title, 누락된 대체 텍스트, 잘못된 canonical을 찾을 수 있습니다. 선택지 비교는 테크니컬 SEO 도구 글을 참고하세요.
5. 배포할 때마다 다시 확인합니다. noindex, 깨진 canonical, 빈 title은 템플릿을 바꿀 때 나타납니다.

위의 열두 가지 남짓한 태그만 제대로 다루면 HTML이 SEO를 위해 할 수 있는 거의 모든 것을 해결할 수 있습니다. 나머지는 콘텐츠와 링크의 몫입니다. 깔끔한 title, 제목, 내부 링크, 구조화된 콘텐츠를 처음부터 갖춘 페이지를 원한다면, Sorank의 글 생성기가 autopilot으로 작성하고 게시합니다. 연간 결제 시 월 49달러부터입니다(요금제 참고).