Page SEO Analyzer: 무료 온페이지 SEO 감사 도구
페이지의 HTML을 붙여넣고 메타 태그, 헤딩, canonical, Open Graph, Twitter Card, JSON-LD, 접근성 신호의 점수가 매겨진 감사를 받아보세요.
Page SEO Analyzer 란 무엇인가요?
Page SEO Analyzer는 페이지의 HTML을 파싱하여 온페이지 순위에 실제로 영향을 미치는 항목을 보고합니다. title과 description의 길이, 헤딩 계층, canonical URL, Open Graph 및 Twitter Card 커버리지, JSON-LD 구조화 데이터, 그리고 charset, hreflang, 렌더링 차단 스크립트, 이미지 alt 텍스트 같은 기술적 신호의 긴 목록입니다. 클라이언트가 감사를 위해 단일 템플릿을 보내주지만 CMS에는 접근할 수 없을 때 저는 이 도구를 씁니다 — 렌더링된 HTML을 한 번 붙여넣으면 번호가 매겨진 수정 목록이 돌아옵니다. 오류, 경고, 정보 수준 발견은 색상 코드되어 심각도순으로 정렬되며, 5탭 분석이 파서가 찾은 모든 신호를 표면화하여 누락된 것만큼이나 존재하는 것을 쉽게 확인할 수 있습니다.
주요 기능
- 카테고리별 분류가 있는 SEO 점수 — 모든 분석은 0-100의 종합 점수와 함께 크롤러빌리티, 콘텐츠, 소셜, 구조화 데이터, 접근성 카테고리별 서브 점수를 생성하므로 페이지가 어디에서 점수를 잃고 있는지 볼 수 있습니다.
- 메타 태그 감사 — title(길이와 Google의 데스크톱 ~600px 캡에 대한 픽셀 폭 추정), description, canonical, robots, viewport, charset,
<html lang>을 추출하고 검증하여 누락 또는 과도하게 큰 필드를 표시합니다. - 헤딩 계층 보기 — H1부터 H6까지의 모든 헤딩을 문서 순서대로 들여쓰기와 함께 나열하고, H1 누락, 다중 H1, 건너뛴 레벨(예: H2에서 H4로 바로 점프)을 표시합니다.
- Open Graph 및 Twitter Card 커버리지 —
og:title,og:description,og:image,og:url,og:type,og:site_name과 네 개의twitter:*필드를 모두 확인하고,og:url과<link rel="canonical">이 일치하지 않을 때 경고합니다. - JSON-LD 파싱 및 검증 — 모든
<script type="application/ld+json">블록을 추출하여 파싱하고, 파싱할 수 없는 블록을 별도로 카운트하며, 각 스키마에 해결된@type을 표시합니다. - 이미지 alt 텍스트 및 치수 검사 —
alt이 없는 이미지, 빈alt인 이미지, 파일명이 alt(IMG_1234.jpg)인 이미지, 명시적 width/height가 없는 이미지(Cumulative Layout Shift 신호),loading="lazy"를 사용하지 않는 below-fold 이미지를 카운트합니다. - 링크 감사 — 내부 vs 외부 카운트, 일반 앵커 텍스트 감지(click here, read more, learn more), 존재하지 않는 ID를 가리키는 페이지 내 프래그먼트 링크,
rel="noopener"이 없는target="_blank". - Tech 탭 — canonical, charset, viewport, html lang, robots, favicon, hreflang 카운트, main 랜드마크, preload 힌트, 렌더링 차단 스크립트, 사용 중지된 태그(
<center>,<font>,<marquee>...), base href를 한눈에 볼 수 있는 상태. - 브라우저 측 파싱 — 네이티브
DOMParser를 사용하여 HTML을 순회합니다. 업로드 없음, 외부 API 없음.
Page SEO Analyzer 사용 방법
단계 1: HTML 붙여넣기
페이지의 단일 입력은 "HTML Input" 레이블이 붙은 textarea입니다. 한 페이지의 전체 HTML 소스를 붙여넣으세요 — 일반적으로 브라우저의 "소스 보기"(Ctrl+U / Cmd+Option+U), curl -L 요청의 응답 본문, 프레임워크에서 내보낸 렌더링된 HTML에서 얻을 수 있는 것입니다. 2 MB 상한이 적용되며, 그보다 큰 페이지는 파싱 전에 경고가 발생합니다. 메인 스레드의 DOMParser가 멈추기 시작하기 때문입니다.
단계 2: Analyze 클릭
textarea 아래의 Analyze 버튼을 누릅니다. 파싱은 브라우저에서 실행되며 결과가 즉시 표시됩니다. textarea가 비어 있으면 도구는 조용히 실패하는 대신 "Please enter HTML to analyze" 토스트를 표시합니다.
단계 3: 점수 요약 읽기
상단에 4개 카드 행이 나타납니다. 종합 Score(80+에서 녹색, 50-79에서 노란색, 50 미만에서 빨간색), Errors, Warnings, 발견된 Schemas 카운트입니다. 카드 아래의 Issues 목록은 모든 발견 사항을 심각도순으로 표시합니다 — 먼저 오류(빨간 XCircle), 그 다음 경고(노란 AlertTriangle), 그 다음 정보 노트(파란 CheckCircle)입니다. 각 issue에는 관련 숫자가 채워진 i18n 메시지가 있습니다(예: "8 of 12 images missing alt text").
단계 4: 탭으로 깊이 들어가기
issues 아래에 5개의 탭이 있습니다.
- Meta — 문자 수와 50-60자 사이의 "Optimal" 배지가 있는 title, 150-160자 사이의 동일한 배지가 있는 description, 그리고 canonical과 robots.
- Headings — 문서 순서대로의 모든 헤딩에
H1-H6배지와 텍스트. 들여쓰기로 중첩 깊이를 시각화합니다. - Social — Open Graph와 Twitter Card 카드를 나란히 표시하며 각 필드가 채워졌거나 "Not set"으로 표시됩니다.
- Schema —
@type과 구문 강조된 JSON 덤프가 있는 모든 JSON-LD 블록. - Tech — charset, viewport, hreflang, main 랜드마크, preload 힌트, 렌더링 차단 스크립트, 치수가 누락된 이미지, lazy-load 커버리지, 사용 중지된 태그, 내부/외부 링크 카운트, base href를 다루는 16개의 작은 상태 카드.
단계 5: 수정하고 다시 분석
소스에서 수정 사항을 적용하고 새 HTML을 붙여넣은 다음 Analyze를 다시 클릭합니다. 각 실행은 오류, 경고, 헤딩 카운트를 요약한 기록 항목을 기록하므로 동일한 템플릿에서 두 실행을 비교할 수 있습니다. 서포터는 라벨이 있는 스냅샷을 저장하고, PDF 보고서를 생성하며, 가장 일반적인 발견에 대한 번역된 수정 스니펫을 가져올 수도 있습니다.
실용 예제
마케팅 랜딩 페이지 감사
랜딩 페이지가 <title>Welcome to ProductX — The All-in-One Customer Platform</title>(74자, 60자 경고선을 훨씬 초과)을 가지고 있고 <meta name="description">이 없습니다. HTML을 붙여넣으면 다음을 반환합니다. titleTooLong 경고, missingDescription 오류, 그리고 title이 Google의 ~600px 데스크톱 캡보다 넓기 때문에 titlePixelTooLong 경고. title을 약 50-60자로 다듬고 150-160자의 description을 작성한 후 다시 실행하면 Meta 탭이 두 길이 옆에 녹색 "Optimal" 배지를 표시합니다.
게시 전 Article 구조화 데이터 검증
블로그 게시글 템플릿이 Article JSON-LD 블록을 추가합니다. 렌더링된 HTML을 붙여넣으면 Schema 탭에 전체 블록이 정렬된 Schema #1 (Article)이 표시됩니다. 쉼표가 빠지면 issues 목록에 카운트와 함께 invalidJsonLd이 표시되고 schema 탭에는 해당 블록이 나열되지 않습니다 — push 전 빠른 검증입니다. 옆의 Open Graph 카드는 og:type이 article인지도 표시합니다(Facebook은 게시글 유형의 article에 대해 이를 기대합니다).
접근성 및 성능 냄새 잡기
페이지가 빠른 Lighthouse 스캔은 통과하지만 Tech 탭이 더 철저합니다. Render-blocking scripts는 <head> 내 네 개의 <script src> 태그가 async 또는 defer를 갖고 있지 않기 때문에 노란색으로 4를 표시합니다. Images Missing Dimensions는 팀이 width와 height를 설정하지 않아서 12를 표시합니다. Lazy Images는 1 / 14를 표시합니다 — 적격한 below-fold 이미지 중 하나만 loading="lazy"을 사용합니다. 각각은 작은 수정이지만 템플릿 전체에서 누적됩니다.
팁과 모범 사례
소스 HTML이 아닌 렌더링된 HTML을 붙여넣으세요. 현대 프레임워크는 메타 태그, 헤딩, JSON-LD를 JavaScript로 렌더링합니다. 사전 렌더링된 템플릿 소스를 붙여넣으면 analyzer는 빈 <head>를 보고 거짓 양성 오류 목록을 길게 보고합니다. DevTools에서 <html> 요소에 "Copy outerHTML"을 사용하거나, 리디렉션을 따르려면 -L로 URL을 curl하세요.
먼저 오류, 그 다음 경고, 그 다음 정보를 수정합니다. issue 목록은 이미 심각도순으로 정렬되어 있습니다. 오류(빨간색)는 크롤/인덱스를 차단합니다 — noindexDetected, missingViewport, invalidJsonLd. 경고(노란색)는 실제 누락입니다 — title 길이, alt 누락, canonical 누락. 정보(파란색)는 넛지입니다 — metaKeywordsDeprecated, genericAnchorText, paginationLinks. 정보 발견을 음소거하여 완벽한 점수를 추구하지 마세요. 그것들은 신호이지 오류가 아닙니다.
동일한 템플릿의 두 스냅샷을 비교합니다. 수정 전후로 analyzer를 실행하고 Errors와 Warnings 카운트가 어떻게 변하는지 봅니다. 도구 아래의 기록 패널은 빠른 차이 비교 소스로 마지막 몇 개의 실행을 보관합니다. 더 큰 감사를 위해 서포터 스냅샷을 사용하면 실행에 라벨을 지정하고 나중에 HTML을 복원할 수 있습니다.
문자 수만이 아닌 픽셀 폭 검사를 신뢰하세요. 두 개의 60자 title은 글자 모양 때문에 다른 픽셀 폭으로 렌더링될 수 있습니다 — "WWW Information Initiative"는 같은 문자 수의 "lily lily lily lily lily i"보다 폭이 더 넓습니다. Google의 SERP 잘림은 약 600px의 픽셀 기반입니다. titlePixelTooLong 경고는 문자 예산에는 맞지만 여전히 잘리는 title을 잡습니다.
일반적인 문제와 문제 해결
"Please enter HTML to analyze" — textarea가 비어 있거나 공백만 있습니다. 실제 HTML을 붙여넣으세요(<!DOCTYPE html>로 시작할 필요는 없으며 부분 조각도 잘 파싱되지만, <head>이 없으면 대부분의 필드가 "not set"으로 표시됩니다).
"HTML too large (max 2 MB)" — 입력이 2 MB를 초과합니다. 관심 있는 섹션으로 다듬거나(대부분의 검사에는 일반적으로 <head>와 본문 골격으로 충분합니다) HTML을 파일로 저장하고 로컬 스크립트를 사용하세요. 2 MB 캡은 메인 스레드의 DOMParser가 더 큰 입력에서 탭을 멈추거나 정지시킬 수 있기 때문에 존재합니다.
"Failed to parse HTML" — 파서가 입력을 이해하지 못했습니다. 일반적으로 입력이 HTML이 아님을 의미합니다(실수로 JSON이나 URL을 붙여넣음). 입력이 <로 시작하고 태그 구문을 포함하는지 확인하세요.
문제없다고 알려진 페이지에서 점수가 예상보다 낮음. Tech 탭을 확인하세요. 많은 점수는 issues 목록 요약에 표시되지 않는 정보 발견에서 빠집니다 — favicon 누락, 콘텐츠가 풍부한 페이지에 preload 힌트 없음, 내비게이션의 일반 앵커 텍스트. 어느 것도 차단 요소가 아니지만 모두 점수에서 차감됩니다.
JSON-LD 카운트가 예상보다 하나 적음. 해당 스키마 블록에 JSON 구문 오류가 있어 schema 탭이 아닌 issues 목록에 invalidJsonLd로 표시됩니다. 블록을 JSON Formatter에 복사하여 누락된 쉼표나 일치하지 않는 중괄호를 찾으세요.
hreflang 카운트는 맞아 보이는데 hreflangInvalid가 발생. hreflang 값은 BCP-47이어야 합니다 — en, en-US, pt-BR, 또는 특수한 x-default. 도구는 ^([a-z]{2,3}(-[A-Za-z0-9]+)*|x-default)$(대소문자 구분 없음)와 일치하지 않는 코드를 표시합니다. 일반적인 원인: 밑줄이 있는 en_US, english, 또는 후행 공백.
개인정보 보호 및 보안
Page SEO Analyzer는 네이티브 DOMParser를 사용하여 브라우저에서 HTML을 파싱합니다. 붙여넣은 HTML은 기기를 떠나지 않으며 이를 받는 서버 엔드포인트도 없습니다. 이는 스테이징과 미공개 페이지에 중요합니다 — 아직 인증 뒤에 있는 초안 템플릿을 타사 크롤러에 노출하지 않고도 감사할 수 있습니다. 도구의 JavaScript가 로드된 후에는 분석 자체가 오프라인으로 실행됩니다.
자주 묻는 질문
도구는 어떤 것이 심각한 issue로 간주되고 어떤 것이 넛지인지 어떻게 결정하나요?
세 가지 심각도 등급은 각 신호에 대한 W3C/Google 지침에 매핑됩니다. 오류는 차단 요소입니다 — noindex 지시어, <meta viewport> 누락, JSON-LD의 파싱 실패, 콘텐츠 페이지의 H1 누락. 경고는 SERP 외관 또는 접근성을 손상시키지만 인덱싱을 차단하지 않는 실제 누락입니다 — 권장 길이를 벗어난 title 또는 description, canonical과 og:url 불일치, rel="noopener"이 없는 target="_blank". 정보 발견은 품질 넛지입니다 — 일반 앵커 텍스트, favicon 누락, 사용 중지된 태그. 심각도는 소스의 issue 생성 단계에서 설정되며 실행마다 구성할 수 없습니다.
analyzer가 저를 위해 URL을 가져올 수 있나요?
현재로서는 그렇지 않습니다. textarea는 붙여넣은 HTML만 허용합니다. 임의의 origin에 대한 in-browser fetch가 CORS로 차단되어 서버 프록시가 필요하기 때문입니다. 원격 URL을 감사해야 한다면 터미널에서 curl -L -A "Mozilla/5.0" https://example.com > page.html을 실행하고 파일 내용을 붙여넣으세요.
title 길이 검사는 통과하는데 titlePixelTooLong이 여전히 발생하는 이유는 무엇인가요?
Google이 표준 20px Arial 렌더링에서 약 600픽셀에서 title을 잘라내기 때문입니다. 60자가 아닙니다. 넓은 글자(M, W, 일반적인 대문자, em-dash)는 문자 수가 괜찮아 보일 때도 픽셀 카운트를 캡 위로 밀어 올립니다. 픽셀 추정은 canvas measureText를 20px Arial,Helvetica,sans-serif에 대해 사용하며, Google이 데스크톱 SERPs에서 사용하는 것에 가까운 근사치입니다.
점수는 실제로 무엇을 의미하나요?
점수는 다섯 카테고리에 걸친 가중 합계입니다. 크롤러빌리티(검색 엔진이 인덱싱할 수 있는지), 콘텐츠(title, description, 헤딩), 소셜(Open Graph, Twitter Card), 구조화 데이터(JSON-LD 존재 및 유효성), 접근성(alt 텍스트, lang, 랜드마크). 각 issue는 심각도에 따라 고정된 점수를 차감합니다. 80+ 점수는 주요 신호가 존재하고 잘 형성되어 있음을 나타내고, 50-79는 실제 누락을 의미하며, 50 미만은 적어도 하나의 오류 등급 차단 요소가 발생하고 있음을 의미합니다. 점수를 절대 등급이 아닌 방향성 요약으로 취급하세요.
도구가 페이지 실행이 필요한 것을 검사하나요?
아니요 — 모든 검사는 정적 파싱 시간입니다. 실행 또는 네트워크가 필요한 것(Core Web Vitals 타이밍, 서버 응답 코드, robots.txt 가져오기, 사이트맵 도달 가능성)은 범위 밖입니다. 그것들에 대해서는 크롤 시점 링크 검증을 위한 곧 출시 예정: Broken Link Checker와 사이트맵 진단을 위한 곧 출시 예정: Sitemap Tools를 사용하세요.
로그인으로 보호된 페이지를 감사할 수 있나요?
네, 그것이 이 도구를 사용하는 이유 중 하나입니다. 로그인한 상태로 페이지를 열고 DevTools에서 렌더링된 HTML을 복사하여(<html> 마우스 오른쪽 클릭 → Copy → Copy outerHTML) 붙여넣고 분석합니다. 브라우저에서 아무것도 나가지 않으므로 인증된 페이지와 미공개 템플릿을 안전하게 테스트할 수 있습니다.
관련 도구
- 곧 출시 예정: Meta Tag Generator — 이 analyzer가 검사하는 title, description, Open Graph, Twitter Card 태그를 생성합니다.
- 곧 출시 예정: Schema Generator — JSON을 손으로 작성하지 않고 유효한 Article, FAQ, Product, Organization JSON-LD를 빌드합니다.
- 곧 출시 예정: SERP Preview — 변경 사항을 배포하기 전에 title과 description이 Google에서 어떻게 보일지 확인합니다.
- 곧 출시 예정: Accessibility Suite — ARIA, 명도 대비, 키보드 탐색, 폼 라벨을 다루는 더 깊은 접근성 감사.
- JSON Formatter — 문제가 되는 블록을 다시 포맷하고 검증하여
invalidJsonLd경고를 디버그합니다.
지금 Page SEO Analyzer 사용해보기: 곧 출시 예정: Page SEO Analyzer