SEO 규칙
엔진 사양
SEO 요소
웹사이트 콘텐츠
자바스크립트 로딩은 SEO에 중요한 영향을 미치며, 주로 크롤링 능력, 페이지 속도, 렌더링 문제, SEO 친화성 등의 측면에서 나타납니다. 서버 사이드 렌더링, 사전 렌더링, 자바스크립트 코드 최적화 및 핵심 콘텐츠가 직접적으로 보이도록 함으로써 페이지의 크롤링 및 색인화 효과를 향상시키고 SEO 성능을 개선할 수 있습니다. 페이지 성능을 정기적으로 모니터링하고 테스트하며 최적화 전략을 적시에 조정하는 것은 자바스크립트 로딩이 SEO에 긍정적인 영향을 미치도록 하는 핵심입니다. 자바스크립트 로딩의 SEO 영향은 주로 다음과 같은 측면에서 나타납니다:
1. 크롤링 가능성
크롤링 능력: 검색 엔진(예: 구글)은 자바스크립트를 크롤링하고 실행할 수 있지만, 이는 더 많은 시간과 자원이 필요할 수 있습니다. 구글은 이 분야에서 강력하지만, 다른 검색 엔진(Bing, Yahoo, DuckDuckGo 등)은 자바스크립트 처리에서 구글만큼 성능을 발휘하지 못할 수 있습니다.
지연 크롤링: 자바스크립트의 동적 특성으로 인해 검색 엔진은 자바스크립트로 생성된 콘텐츠의 크롤링 및 색인화를 지연시킬 수 있습니다. 이로 인해 새로운 콘텐츠나 업데이트된 콘텐츠의 색인화 시간이 길어질 수 있습니다.
2. 가시성
숨겨진 콘텐츠: 페이지의 주요 콘텐츠가 자바스크립트를 통해 로드되고, 검색 엔진이 크롤링 시 자바스크립트를 올바르게 실행하지 못하면 이러한 콘텐츠가 색인화되지 않을 수 있습니다. 이는 페이지 순위에 직접적인 영향을 미칩니다.
핵심 콘텐츠: 페이지 로드 시 핵심 콘텐츠가 즉시 보이도록 하고, 자바스크립트에 완전히 의존하지 않도록 해야 합니다. 이는 서버 사이드 렌더링(SSR) 또는 정적 생성(SSG) 기술을 사용하여 구현할 수 있습니다.
3. 페이지 속도
로딩 시간: 많은 양 또는 복잡한 자바스크립트는 페이지 로딩 시간을 증가시켜 사용자 경험과 페이지 속도 점수에 영향을 미칩니다. 느린 페이지 속도는 검색 엔진의 크롤링 효율성과 사용자 만족도에 영향을 주어 SEO에 간접적으로 영향을 미칩니다.
코드 최적화: 자바스크립트 파일을 압축하고 병합하며, 비핵심 자바스크립트를 비동기 로딩하고, 렌더링을 차단하는 자바스크립트 코드를 줄임으로써 페이지 로딩 속도를 향상시킬 수 있습니다.
4. 렌더링 문제
동적 렌더링: 검색 엔진이 페이지를 크롤링할 때 자바스크립트가 올바르게 실행되지 않으면 페이지 콘텐츠가 완전히 렌더링되지 않을 수 있습니다. 이는 검색 엔진의 페이지 콘텐츠 이해 및 색인화에 영향을 미칩니다.
사전 렌더링: Prerender.io와 같은 사전 렌더링 기술을 사용하여 자바스크립트로 생성된 페이지를 정적 HTML로 미리 렌더링하면 검색 엔진의 크롤링 및 색인화에 도움이 됩니다.
5. SEO 친화성
내부 링크: 자바스크립트를 통해 생성된 내부 링크가 검색 엔진에 의해 크롤링되고 추적될 수 있도록 해야 합니다. 자바스크립트 이벤트를 통해 링크를 바인딩하는 대신 표준 HTML <a> 태그를 사용하십시오.
메타데이터: 모든 핵심 SEO 메타데이터(제목, 설명, Open Graph 태그 등)가 페이지 로드 시 즉시 보이도록 하고, 자바스크립트의 동적 생성에 의존하지 않도록 해야 합니다.
모범 사례 구현
1. 서버 사이드 렌더링(SSR) 및 정적 생성(SSG)
Next.js, Nuxt.js와 같은 프레임워크를 사용하여 서버 사이드 렌더링 또는 정적 생성을 수행하여 페이지 콘텐츠가 클라이언트 사이드 자바스크립트에 의존하지 않고 서버 사이드에서 생성되도록 하십시오.
이를 통해 검색 엔진이 완전한 페이지 콘텐츠를 크롤링할 수 있도록 하여 SEO 효과를 향상시킬 수 있습니다.
2. 지연 로딩 및 지연 로딩
핵심이 아닌 자바스크립트의 경우 지연 로딩 또는 지연 로딩 기술을 사용하여 초기 페이지 로딩 시간을 줄이십시오.
이를 통해 페이지 속도를 향상시키고 사용자 경험을 개선하여 SEO를 간접적으로 향상시킬 수 있습니다.
3. 사전 렌더링
Prerender.io 또는 유사한 도구를 사용하여 자바스크립트로 생성된 페이지를 검색 엔진이 크롤링할 수 있도록 정적 HTML로 사전 렌더링하십시오.
검색 엔진이 완전한 콘텐츠를 크롤링할 수 있도록 하여 페이지 색인화 효과를 향상시키십시오.
4. 자바스크립트 최적화
자바스크립트 파일을 압축하고 병합하여 HTTP 요청 횟수를 줄이십시오.
비동기 로딩(async 또는 defer 속성)을 사용하여 자바스크립트가 페이지의 초기 렌더링을 차단하지 않도록 하십시오.
5. 핵심 콘텐츠에 집중
핵심 콘텐츠가 자바스크립트의 동적 생성에 완전히 의존하지 않고 HTML에서 직접 보이도록 하십시오.
이를 통해 페이지 로드 시 콘텐츠가 즉시 보이도록 하여 검색 엔진의 크롤링 및 색인화 효율성을 향상시킬 수 있습니다.
6. 모니터링 및 테스트
Google Search Console 및 기타 SEO 도구를 사용하여 페이지의 크롤링 및 색인화 상태를 정기적으로 모니터링하십시오.
테스트 도구(구글의 Lighthouse 또는 PageSpeed Insights 등)를 통해 자바스크립트가 페이지 속도 및 SEO에 미치는 영향을 확인하고 최적화하십시오.
상세 사양:
1. 웹페이지의 중요한 태그, 예: title, canonical 등은 자바스크립트를 통해 로드하는 것을 권장하지 않습니다;
2. 웹페이지 콘텐츠가 정상적으로 로드될 수 있도록 하고, 리치 결과 테스트 또는 URL 검사 도구를 사용하여 확인하십시오;
3. 소프트 404 상태 방지에 주의하십시오;
4. 중요 콘텐츠 로드 시, 구글 봇에 해당 액세스 권한을 제공해야 합니다;
예시:
<script src="/_next/static/chunks/webpack-f91db86dfa97c972.js" async=""></script>
<script>(self.__next_f=self.__next_f||[]).push([0])</script>
참조 웹사이트:
구글 공식 설명:
자바스크립트 문제가 웹페이지 또는 자바스크립트 웹페이지의 특정 콘텐츠가 구글 검색 결과에 나타나지 않도록 할 수 있다고 의심되는 경우, 다음 단계를 따르십시오.
1. 구글이 URL을 크롤링하고 렌더링하는 효과를 테스트하려면, Search Console의 리치 결과 테스트 또는 URL 검사 도구를 사용하십시오. 로드된 리소스, 자바스크립트 콘솔 출력 및 예외, 렌더링된 DOM 및 더 많은 정보를 볼 수 있습니다. 경고: 캐시된 링크를 사용하여 웹페이지 디버깅을 하지 마십시오. 웹페이지의 최신 버전을 확인하므로 URL 검사 도구 사용을 권장합니다.
또한, 사용자(구글봇 포함)가 귀하의 웹사이트에서 경험하는 자바스크립트 오류를 수집하고 검토하여 콘텐츠 렌더링 효과에 영향을 줄 수 있는 잠재적인 문제를 식별하는 것을 권장합니다.
다음 예시는 전역 onerror 핸들러에 기록된 자바스크립트 오류를 기록하는 방법을 보여줍니다. 특정 유형의 자바스크립트 오류(예: 구문 분석 오류)는 이 방법으로 기록할 수 없습니다.
2. 소프트 404 오류를 방지해야 합니다. 단일 페이지 애플리케이션(SPA)에서는 매우 어려울 수 있습니다. 오류 페이지가 색인화되지 않도록 하려면 다음 전략 중 하나 또는 두 가지를 사용할 수 있습니다:
(1) 서버가 404 상태 코드로 응답하는 URL로 리다이렉션합니다.
(2) robots 메타 태그를 추가하거나 noindex로 변경합니다.
오류를 처리하기 위해 클라이언트 사이드 자바스크립트를 사용하는 SPA는 해당 상태 코드 대신 일반적으로 200 HTTP 상태 코드를 보고합니다. 이로 인해 오류 페이지가 색인화되고 검색 결과에 나타날 수 있습니다.
3. 구글봇은 사용자 권한 요청을 거부할 수 있습니다.
사용자 권한이 필요한 기능은 구글봇이나 모든 사용자에게 적합하지 않습니다. 예를 들어, 카메라 API가 필요한 경우, 구글봇은 카메라를 제공할 수 없습니다. 이러한 경우, 카메라 접근 권한을 부여하지 않고도 콘텐츠에 접근할 수 있는 방법을 사용자에게 제공해야 합니다.
4. 조각 URL을 사용하여 다른 콘텐츠를 로드하지 마십시오.
SPA는 다른 뷰를 로드하기 위해 조각 URL(예: https://example.com/#/products)을 사용할 수 있습니다. 2015년부터 AJAX 크롤링 방식이 폐기되었으므로, 구글봇이 크롤링할 수 있도록 조각 URL을 제공할 수 없습니다. SPA에서 URL에 따라 다른 콘텐츠를 로드하려면 History API 사용을 권장합니다.
5. 콘텐츠 제공을 위해 데이터 지속성에 의존하지 마십시오.
일반 브라우저와 마찬가지로, WRS는 각 URL을 로드하고 서버 및 클라이언트 리다이렉션을 실행합니다. 그러나 페이지 로드 중에는 WRS가 상태를 유지하지 않습니다:
(1) 페이지 로드 중에 로컬 저장소 및 세션 저장소의 데이터가 지워집니다.
(2) 페이지 로드 중에 HTTP 쿠키가 지워집니다.
6. 콘텐츠 지문을 사용하여 구글봇 캐싱 문제를 피하십시오.
구글봇은 네트워크 요청 및 리소스 사용량을 줄이기 위해 콘텐츠를 적극적으로 캐싱합니다. WRS는 캐시 헤더를 무시할 수 있습니다. 이로 인해 WRS가 오래된 자바스크립트 또는 CSS 리소스를 사용할 수 있습니다. 이 문제를 피하려면 파일 이름의 일부가 되는 콘텐츠 지문을 생성하십시오(예: main.2bb85551.js). 지문은 파일 내용에 따라 달라지므로 업데이트할 때마다 다른 파일 이름이 생성됩니다.
7. 애플리케이션이 필요한 모든 핵심 API에 대해 기능 감지를 사용하고, 적용 가능한 경우 대체 동작 또는 폴리필을 제공해야 합니다.
일부 웹 기능은 모든 사용자 에이전트에서 채택되지 않을 수 있으며, 일부 사용자 에이전트는 특정 기능을 고의로 비활성화할 수 있습니다. 예를 들어, 브라우저에서 WebGL을 사용하여 사진 효과를 렌더링하는 경우, 기능 감지는 구글봇이 WebGL을 지원하지 않는다는 것을 보여줍니다. 이 문제를 해결하려면 사진 효과 렌더링 단계를 건너뛰거나 서버 사이드 렌더링을 사용하여 사진 효과를 미리 렌더링하여 모든 사용자(구글봇 포함)가 콘텐츠에 접근할 수 있도록 하십시오.
8. 콘텐츠가 HTTP 연결에서 작동하도록 하십시오.
구글봇은 HTTP 요청을 사용하여 서버에서 콘텐츠를 검색합니다. WebSockets 또는 WebRTC 연결과 같은 다른 유형의 연결은 지원하지 않습니다. 이러한 연결 관련 문제를 피하려면 콘텐츠 검색을 위한 HTTP 대체 메커니즘을 제공하고, 강력한 오류 처리 및 기능 감지 메커니즘을 사용해야 합니다.
9. 웹 구성 요소가 예상대로 렌더링되도록 하십시오. 리치 결과 테스트 또는 URL 검사 도구를 사용하여 렌더링된 HTML이 예상하는 모든 콘텐츠를 포함하는지 확인하십시오.
WRS는 라이트 DOM 및 쉐도우 DOM을 평탄화합니다. 사용하는 웹 구성 요소가 라이트 DOM 내의 콘텐츠에 대해 <slot> 메커니즘을 사용하지 않는 경우, 해당 웹 구성 요소의 문서를 참조하여 자세한 내용을 확인하거나 다른 웹 구성 요소를 사용하십시오. 자세한 내용은 웹 구성 요소 모범 사례를 참조하십시오.
10. 이 체크리스트의 내용을 수정한 후, Search Console의 리치 결과 테스트 또는 URL 검사 도구를 사용하여 웹페이지를 다시 테스트하십시오. 문제가 해결된 경우 녹색 체크 표시가 표시되며 오류가 표시되지 않습니다.