재설계 후 웹사이트의 상태를 확인하는 방법

재설계 과정은 복잡하고 많은 사람과 시간이 필요합니다. 디자이너는 사이트를 아름답게 만들고, 개발자는 빠르게 코딩하고, SEO는 최적화하기를 원합니다. 이 세 가지 의도가 항상 서로를 보완하지는 않습니다.

재설계는 CMS, 사용자 정의 코드, 프레임워크, 페이지 빌더 등 다양한 방법으로 수행할 수 있습니다. 그러나 모든 방법이 SEO 친화적이지는 않으므로 SEO 모범 사례를 사용하여 재설계를 구현하는 것이 좋습니다. 이 기사에서는 SEO 웹사이트 재설계를 실행하는 방법과 완료된 후 웹사이트 상태를 확인하는 단계를 살펴보겠습니다.

웹사이트 재설계 후 나타날 수 있는 SEO 문제

웹사이트 개발이 모범 사례에 따라 진행되지 않으면 SEO 측면에서도 많은 문제가 발생할 수 있습니다. 인덱싱 문제, 깨진 페이지, 웹사이트 속도, 미디어 최적화 불량, 응답성 문제 등. 이러한 모든 문제는 순위에 영향을 미치고 결과적으로 유기적 트래픽이 감소합니다.

재설계하기 전에 웹사이트를 확인하십시오

새 디자인을 게시하기 전에 할 수 있는 가장 좋은 일은 웹사이트 상태 검진을 실행하여 나중에 비교할 수 있도록 하는 것입니다. 먼저 모든 페이지 목록을 크롤링하고 저장하여 새 사이트에 표시되는지 확인합니다. URL 외에도 메타 태그, 콘텐츠 등 URL과 관련된 중요한 데이터를 저장하여 업데이트된 사이트에서 중요한 것이 손실되지 않았는지 확인해야 합니다. 수동으로 수집하는 것은 특히 큰 웹사이트의 경우 어려울 수 있지만 자동 웹사이트 상태 확인 소프트웨어를 사용하는 더 쉬운 방법이 있습니다. 예를 들어 SE Ranking 웹사이트 감사 도구는 사이트의 각 페이지에 대한 통계를 확인하고 저장하여 현재 상태와 변경 내역을 볼 수 있습니다. 전체 웹사이트 또는 각 페이지를 이전 크롤링과 비교할 수 있습니다. 우리는 필요합니다. 이 도구를 사용하여 한 번에 120개 이상의 기준이 있는 웹사이트를 검사하므로 필요한 모든 데이터를 한 곳에 모을 수 있는 프로세스를 보여줍니다.

재설계 후 웹사이트 상태를 확인하고 문제를 감지하는 방법

새 사이트 버전을 게시한 후 사이트 상태를 확인하는 가장 좋은 방법은 이전 버전과 비교하는 것입니다. 그렇게 하려면 SE Ranking 웹사이트 감사로 두 개의 크롤링을 실행해야 합니다. 하나는 변경 전과 하나는 변경 후입니다. 이 두 가지 크롤링을 사용하면 중요한 항목을 계속 사용할 수 있고 오래된 문제가 수정되었는지 확인할 수 있습니다. 자세히 살펴보겠습니다.

기본 크롤링 가능성 및 인덱싱 가능성 관련 문제

재설계 후 가장 먼저 확인해야 할 사항 중 하나는 모든 페이지에 액세스할 수 있고 새 버전에서 다시 인덱싱할 수 있다는 것입니다. 페이지 크롤링 및 인덱싱에 영향을 미치는 주요 문제는 다음과 같습니다.

• 200이 아닌 응답 코드(1)
  웹사이트에 이러한 URL이 없으면 응답 코드는 4xx입니다. 페이지가 리디렉션된 경우 응답 코드는 3xx입니다. 서버 측 오류가 있는 경우 응답 코드는 5xx입니다. 이러한 경우 페이지를 로드하여 사용자에게 표시할 수 없으므로 크롤링하거나 Google 색인에 추가할 수 없습니다. 모든 중요한 페이지에 200 응답 코드가 있는지 확인하세요.
• robots.txt에서 페이지가 차단됨(2)
• 페이지에 "noindex" 메타 로봇 ​​태그가 포함되어 있습니다(3).
• 표준 URL이 다른 페이지를 참조하고 있습니다. (4)

이 모든 문제를 동시에 확인하려면 웹사이트 감사 → 크롤링된 페이지로 이동하고 적절한 열을 선택하여 한 화면에서 크롤링 가능성 및 색인 가능성 문제를 확인합니다.

URL 구조

재설계가 항상 프론트 엔드에 관한 것은 아닙니다. 때로는 백엔드 및/또는 서버 구성에도 영향을 미칩니다. 다른 CMS로 이동하거나 변경 사항이 URL 구조에 영향을 미치는 경우 새 URL이 이전 URL과 동일한지 확인하거나 그에 따라 리디렉션을 구성해야 합니다. 이렇게 하지 않으면 이전 URL에 404 응답 코드가 포함되고 새 페이지는 새 페이지로 취급되기 때문에 이전 페이지의 신뢰를 상속하지 않습니다.

또한 페이지 경로에 관계없이 여러 문제가 발생할 수 있습니다.

• 끝에 슬래시
  ".../example-url"은 ".../example-url/"과 다릅니다. 표준 URL 끝에 슬래시가 없는 경우 슬래시로 끝나는 URL을 방문하면 SEO에 좋지 않은 404 응답 코드가 생성됩니다. 모든 새 URL이 이전 URL과 동일하게 끝나도록 하거나 표준을 구성하고 그에 따라 리디렉션해야 합니다.
• HTTPS)
  이전 문제와 마찬가지로 SSL 연결을 활성화/비활성화하는 것도 URL 구조에 영향을 미치며 잘못 구성하면 심각한 문제를 일으킬 수 있습니다.
• www
  "www.example.com"은 "example.com"과 같지 않습니다. 이 접두사는 웹 리소스가 공개적으로 액세스되어야 함을 나타내기 위해 월드 와이드 웹의 초기 시대에 일반적으로 사용되었습니다.
  엄밀히 말하면 "www." 은(는) 하위 도메인이고 Google은 하위 도메인을 폴더가 아닌 다른 도메인으로 취급합니다. 제대로 구성되지 않은 도메인이나 하위 도메인에 액세스하려고 하면 오류가 발생하고 검색 봇도 마찬가지입니다. 이러한 문제를 방지하려면 리디렉션을 설정하거나 웹사이트의 기본 버전을 가리키는 rel=canonical 태그를 추가해야 합니다.

메타 태그

웹사이트의 새 버전을 게시할 때 이전 페이지의 최적화된 모든 메타 태그가 제자리에 있는지 확인해야 합니다. 그렇지 않으면 누락되거나 잘못된 제목과 설명으로 인해 순위와 트래픽이 크게 떨어질 수 있습니다. 웹사이트의 상태를 확인하고 메타 태그가 누락되거나 잘못된 페이지가 없는지 확인하려면 웹사이트 감사 문제 보고서의 제목 및 설명 섹션으로 이동하십시오.

메타 제목과 설명이 재설계 전과 동일하도록 하려면 크롤링된 페이지 보고서를 사용하고 해당 열을 활성화하십시오. 그런 다음 재설계 전과 비교합니다.

콘텐츠

여러 페이지에 동일한 콘텐츠가 있는 경우 Google은 SERP에 어떤 페이지를 표시해야 하는지 파악하기 어려워 중복된 모든 페이지의 순위가 하락합니다.

특히 웹사이트가 큰 경우 콘텐츠를 비교하기 어려울 수 있습니다. 좋은 소식은 이러한 문제를 자동으로 감지할 수 있다는 것입니다.

중복 페이지

중복 페이지는 콘텐츠가 동일한 페이지입니다. URL이 다를 수 있기 때문에 때때로 찾기 어려울 수 있지만 식별하는 데 도움이 되는 매개변수가 있습니다. "콘텐츠 해시" 열을 활성화하면 페이지 콘텐츠의 고유 해시(콘텐츠와 동등한 암호화)가 표시됩니다. 해시가 두 페이지에 대해 동일한 경우 100% 동일하다는 의미입니다. 해당 항목을 살펴보고 페이지 사본을 하나만 남깁니다.

메타 태그

또 다른 복제 시나리오는 동일한 메타 태그입니다. 제목과 메타 설명은 검색 엔진이 페이지의 관련성을 평가할 때 상당한 영향을 미칩니다. 동일한 메타 태그가 있는 페이지와 Google을 혼동하지 마십시오. 어느 페이지도 높은 순위를 차지하지 않기 때문입니다.

해당 페이지를 찾으려면 웹사이트 감사 도구의 크롤링된 페이지 보고서에서 "중복 제목" 및 "중복 설명" 열을 활성화하거나 문제 보고서의 해당 섹션으로 이동하십시오.

제목 H1

메타 태그와 마찬가지로 검색 엔진이 페이지의 내용을 결정할 때 페이지의 헤드라인이 다른 (하위) 헤더보다 우선합니다. 페이지가 서로 표절되지 않도록 동일한 H1이 없는지 확인해야 합니다. 메타 태그 확인과 마찬가지로 보고서에서 "Duplicate H1" 열을 활성화합니다.

핵심 웹 바이탈

새로운 디자인을 구현하는 경우 사용자 경험이 향상될 것임을 확신해야 합니다. 그렇지 않으면 할 의미가 없습니다. 운 좋게도 Google은 개발자가 UX를 평가하는 데 도움이 되는 일련의 측정항목인 Core Web Vitals를 개발했습니다.

SE Ranking을 사용하면 웹사이트 감사가 모든 페이지에서 필요한 모든 페이지 경험 메트릭을 확인하기 때문에 Web.dev 또는 Chrome의 Lighthouse에서 각 페이지를 확인할 필요가 없습니다. 살펴보겠습니다.

가장 먼저 핵심 Web Vitals(LCP, FID 및 CLS)를 확인하는 것입니다. 다음은 웹사이트가 UX 측면에서 얼마나 잘 수행되고 있는지를 반영하는 세 가지 매개변수입니다.

1. 가장 큰 콘텐츠가 포함된 페인트는 첫 번째 뷰포트가 사용자 브라우저에서 인쇄되는 속도를 의미합니다. 이 측정항목은 웹사이트 로딩 속도와 밀접하게 관련되어 있습니다. 이에 대해서는 몇 초 후에 설명하겠습니다.
2. 첫 번째 입력 지연은 사용자가 페이지와 얼마나 빨리 상호작용할 수 있는지 측정합니다(예: 링크, 버튼 클릭). 이 매개변수는 사이트 속도와도 관련이 있습니다.
3. 누적 레이아웃 이동은 콘텐츠가 로드되는 동안 얼마나 안정적인지 알려줍니다. 페이지를 로드하는 동안 콘텐츠 요소의 크기와 위치가 변경되면 매우 짜증납니다.

이 정보는 개요 대시보드 또는 문제 보고서 -> 성능 섹션에서 찾을 수 있습니다. 좋은 점은 이 보고서가 실제 사용자 및 실험실 환경 테스트의 데이터를 기반으로 한다는 것입니다. 이것은 추가 최적화를 위한 시작점입니다.

웹사이트 속도

Core Web Vital 3개 중 2개는 로딩 시간과 관련이 있습니다. 뿐만 아니라 통계에 따르면 사용자의 3분의 1이 페이지가 로드될 때까지 3초 이상 기다리지 않을 것이라고 합니다. 따라서 웹사이트 속도는 사용자 경험에 관한 핵심 매개변수라고 할 수 있습니다. SE Ranking이 로딩 시간 문제를 식별하고 해결하는 데 어떻게 도움이 되는지 살펴보겠습니다.

HTML

모든 웹 페이지는 HTML로 작성되기 때문에 재설계 후 가장 먼저 유효성을 검사해야 합니다. 문제는 매우 기본적이지만 추가 조정을 위한 기본 사항입니다. 이와 관련하여 HTML 크기가 너무 커서 큰 DOM 크기를 제외하지 않도록 해야 합니다. 렌더링하기가 어려워 전체 로딩 시간에 영향을 미칠 수 있기 때문입니다. 또한 문서 크기와 백엔드 처리 시간을 최소화하기 위해 HTML이 압축 및 캐시되었는지 확인하십시오.

JS와 CSS

현대 웹은 JavaScript 및 CSS와 얽혀 있습니다. 이러한 기술은 민첩한 기능을 갖춘 아름다운 웹 사이트를 만드는 데 도움이 됩니다. 그러나 때때로 이러한 기능은 사이트 성능을 저하시킬 수 있으므로 새로운 디자인을 배포할 때 리소스가 최적화되었는지 확인하는 것이 중요합니다.

JS 및 CSS 파일에 대한 최적화 기술은 유사합니다.

1. 축소
   모든 주석, 줄 바꿈, 추가 공백 등을 제외하고 중요한 문자만 남겨둡니다.
2. 결합
   가능한 한 적은 수의 파일을 제공하십시오(이상적으로는 페이지당 하나의 JS와 하나의 CSS). 각 파일 요청은 서버가 응답하고 브라우저가 이를 다운로드하는 데 시간이 걸립니다. 단일 파일이 훨씬 더 편리한 방법입니다.
3. 캐싱
   서버 측 캐싱을 활성화하면 사용자가 페이지를 요청할 때마다 파일이 처음부터 생성되지 않습니다. 대신 저장된 사본이 제공됩니다. 이는 서버의 불필요한 부하를 많이 제거하고 로딩 시간을 향상시킵니다.

다음은 몇 가지 일반적인 권장 사항입니다.

• 프레임워크 및 테마 사용을 피하세요.
  JS 프레임워크와 미리 만들어진 CSS는 시간을 절약할 수 있지만 속도 최적화를 염두에 두고 만들어지지 않는 경우가 많습니다. 그들은 당신이 필요로하지 않는 많은 기능을 가지고 있으며 모든 추가 기능은로드하기에는 너무 무거울 수 있습니다.
• JS 파일 병합에 주의
  JS 파일에 단일 오류가 있는 경우 파일 내의 다른 기능이 작동하지 않을 수 있습니다. 따라서 단일 JS 파일이 있는 경우 모든 기능이 작동을 멈출 수 있습니다. 핵심 기능과 프론트 엔드 아름다움을 위해 별도의 파일을 만드는 것이 현명한 결정일 수 있습니다.

이미지

SEO와 관련하여 이미지 최적화도 필수적입니다.

1. 이미지에는 대체 텍스트가 있어야 하므로 검색 엔진과 스크린 리더를 사용하는 사람들은 이미지가 무엇인지 이해할 수 있습니다. 재설계 후에 모든 이미지에 의미 있는 대체 텍스트가 있는지 확인하세요.
2. 이미지 크기
   가장 좋은 방법은 상위 컨테이너와 동일한 해상도로 이미지를 제공하는 것입니다. 그러나 컨테이너가 크기를 변경할 수 있는 반응형 디자인으로 인해 가능한 모든 컨테이너에 맞게 이미지 복사본을 만드는 것은 거의 불가능합니다. 당신이 할 수 있는 것은 사이트의 다른 위치에서 사용할 여러 이미지 변형(즉, 원본 크기, 300px 너비, 100px 너비)을 만드는 것입니다. 예를 들어 기사의 추천 이미지는 원본 크기여야 하며 아카이브 페이지의 썸네일에는 너비 300px 이하의 작은 이미지를 사용하는 것이 좋습니다.
3. 이미지 압축
   이미지 압축은 이미지에 사용되는 고유한 색상의 수를 줄이는 과정입니다. 보통의 압축은 사람의 눈에는 거의 보이지 않지만 파일 크기의 최대 30%를 절약할 수 있습니다. 특히 이미지가 다른 페이지 리소스에 비해 파일 크기가 크다는 점을 고려할 때 많은 양입니다.

반응형 디자인

대부분의 트래픽이 모바일 장치에서 발생하고 Google이 모바일 우선 인덱싱으로 전환했기 때문에 모바일 최적화 문제를 확인하는 것이 필수입니다. SE Ranking에서도 이를 다루고 있습니다.

문제 보고서에서 모바일 최적화 카테고리로 이동하면 웹사이트가 기본적인 반응형 디자인 원칙에 부합하는지 확인할 수 있습니다.

마무리

재설계는 특히 재설계된 사이트가 SEO에 최적화되어야 한다는 점을 고려하면 복잡한 과정입니다. 이를 달성하는 가장 좋은 방법은 SEO 및 성능 관행을 염두에 두는 것입니다.

변경 사항을 게시한 후에는 모든 것이 정상인지 확인해야 합니다. 여기에서 웹 사이트 상태 확인 도구가 작동합니다. 새 사이트가 더 나은지 또는 SEO 및 성능 면에서 아무 것도 손상되지 않았는지 확인하려면 이전 버전과 비교해야 합니다. SE Ranking은 웹사이트 감사 데이터를 크롤링, 확인 및 저장하여 필요한 작업을 정확하게 수행하므로 결과를 날짜별로 쉽게 모니터링하고 비교할 수 있습니다. 이러한 감사를 사용하면 재설계 후 웹사이트의 상태를 비교하고 개선할 수 있습니다.