대부분의 최신 웹 사이트에는 JavaScript가 포함되어 있어 동적이고 상호 작용할 수 있습니다. 검색 엔진 봇은 매우 지능적이지만 여전히 많은 JavaScript 콘텐츠를 렌더링하지 않아 페이지 순위에 영향을 줄 수 있습니다.
JavaScript 콘텐츠는 웹사이트에서 코드를 렌더링하는 방식에 따라 크게 달라집니다.
예를 들어, 서버 측 렌더링에서 서버에는 웹 사이트의 콘텐츠가 포함됩니다. 요청 시 브라우저는 완전히 렌더링된 HTML을 수신합니다.
그러나 클라이언트 측 렌더링에서 JavaScript는 DOM을 사용하여 브라우저에서 렌더링됩니다.
렌더링을 위한 세 번째 옵션은 클라이언트 측에서 렌더링된 콘텐츠가 브라우저로 이동하는 반면 서버 측에서 렌더링된 콘텐츠가 검색 엔진으로 이동하는 동적 렌더링입니다.
렌더링 기술은 JS가 렌더링되는 방식에 영향을 미치므로 페이지 순위가 결정됩니다.
모든 웹사이트 JS 코드가 렌더링되도록 하려면 적절한 JavaScript SEO 관행을 따라야 합니다. 그러나 먼저 JavaScript SEO가 무엇인지 이해합시다.
목차
자바스크립트 SEO란?
JavaScript SEO를 사용하면 검색 엔진이 웹 사이트(또는 웹 페이지)의 JavaScript 코드(동적 콘텐츠)를 크롤링하고 색인을 쉽게 생성할 수 있습니다. Google 또는 기타 검색 엔진은 크롤링, 렌더링 및 색인의 세 단계로 JavaScript를 처리합니다. Google이 이 모든 작업을 수행하려면 JavaScript 콘텐츠가 SEO 친화적이어야 합니다. 즉, 가시적이고 사용 가능해야 합니다.
Google이 페이지에서 JavaScript 콘텐츠를 처리하는 방법
다음은 Googlebot이 JavaScript를 처리하기 위해 수행하는 단계입니다.
- HTTP 요청을 통해 크롤링 대기열에서 URL을 가져옵니다.
- 사이트에서 크롤링을 허용하지 않는 URL에 대해 robots.txt 파일을 확인합니다.
- ‘허용되지 않는’ URL을 건너뛰고 다른 URL에 대한 응답을 구문 분석하여 크롤링 대기열에 추가합니다.
- 인덱싱되지 않은 것으로 표시된 페이지를 제외하고 렌더링을 위해 페이지를 큐에 넣습니다.
- Chromium은 페이지를 렌더링하고, JavaScript를 실행하고, 페이지를 인덱싱합니다.
- 링크에 대해 렌더링된 HTML을 다시 구문 분석합니다.
- 크롤링을 위해 URL을 대기열에 넣습니다.
Google은 언제 JavaScript 콘텐츠를 색인화하지 않습니까?
Google은 올바르게 구현되면 JavaScript를 색인화할 수 있습니다. 예를 들어, 일부 JS 및 CSS 파일이 숨겨져 있으면 Google에서 웹사이트를 올바르게 크롤링하지 못할 수 있습니다. 마찬가지로, 렌더링된 HTML에 없는 원시 HTML의 링크가 있는 경우 Google은 해당 링크가 크롤링되거나 색인 생성되지 않도록 건너뛸 수 있습니다.
또한 JavaScript가 HTML에 직접 삽입되지 않은 경우 Google에서 파일을 다운로드하여 실행해야 합니다. 또한 검색 엔진에 웹 페이지의 캐시된 버전이 있을 수 있으며(성능 향상을 위해) 페이지의 JavaScript가 웹 페이지와 동기화되지 않을 수 있습니다.
JavaScript 코드의 모든 비트를 읽어야 하므로 JavaScript를 과도하게 사용하면 페이지 속도가 느려지거나 시간 초과 오류가 발생할 수 있습니다.
JavaScript SEO가 왜 중요한가요?
JavaScript SEO는 Google(또는 검색 엔진)이 SEO를 검색하는 많은 페이지 요소 및 순위 요소에 영향을 미치기 때문에 중요합니다.
온페이지 요소
잠재적인 SEO 문제
가능한 SEO 솔루션
렌더링된 콘텐츠
Google과 같은 검색 엔진은 사이트의 robots.txt 파일에서 리소스가 차단된 경우 페이지를 렌더링할 수 없습니다. 또한 Google은 차단되거나 숨겨진 JS 및 CSS 파일을 색인화하거나 렌더링할 수 없습니다.
페이지의 핵심 콘텐츠에서 JavaScript를 줄이십시오. 서버 측 렌더링, 동적 렌더링, 하이브리드 렌더링(클라이언트 측 및 서버 측 결합)과 같은 클라이언트 측 렌더링에 대한 대체 접근 방식을 따릅니다.
연결
일부 링크가 내부 링크이거나 JavaScript가 사용자가 해당 링크를 클릭할 때 URL에 대한 링크를 생성하는 경우 Google은 해당 링크를 검색할 수 없습니다.
링크에 대한 설명 앵커 텍스트인 href 속성이 있는 앵커 링크를 사용하십시오.
메타데이터
사이트에서 vue-meta와 같은 Node.js 패키지를 사용하지 않는 한 검색 엔진은 각 보기 또는 페이지에 대해 동일하거나 더 심하게는 메타데이터를 크롤링하지 않을 수 있습니다.
react-helmet, vue-meta, react-meta-tags와 같은 Node.js 패키지 사용
지연 로드 이미지
검색 엔진 크롤러는 지연 로드로 표시된 콘텐츠를 선택하지 않습니다. 검색 엔진은 콘텐츠를 스크롤할 수 없으므로 일부 콘텐츠는 렌더링되지 않을 수 있습니다.
DOM 요소를 사용할 수 있게 되면 가시성과 위치를 이해하는 IntersectionObserver API를 사용하십시오. 브라우저(Chrome)의 기본 지연 로딩 기능을 사용할 수도 있습니다.
페이지 로드 시간
JavaScript 콘텐츠가 많은 페이지는 로딩 속도가 느려 검색 순위에 영향을 줄 수 있습니다.
중요한 JS 코드를 인라인으로 추가하고 주요 콘텐츠가 렌더링될 때까지 중요하지 않은 JS 코드를 연기하여 전체 JS 코드를 줄입니다.
JavaScript SEO 모범 사례
몇 가지 모범 사례를 따르면 검색 엔진이 페이지를 더 잘 크롤링하고 렌더링하도록 할 수 있습니다.
정의된 웹 표준에 따라 링크 및 이미지 추가
onclick, #pageurl 또는 window.location.href=’/page-url 대신 ahreftag를 사용하여 모든 링크를 추가합니다. Google은 링크를 쉽게 크롤링하고 따라갈 수 있습니다.
<a href=”http://koreantech.org.com”>Welcome to Geek world</a>
같은 방식으로 img data-src 태그가 아닌 img src 태그를 사용하여 이미지를 추가합니다.
<img src=”myimg.png” />
서버 측 렌더링 선호
웹사이트 콘텐츠가 사용자 브라우저와 별개로 서버에서 사용 가능한지 확인하십시오.
렌더링된 HTML에 표시하려는 모든 중요한 콘텐츠가 있는지 확인하세요.
렌더링된 HTML에는 올바른 제목, 메타 로봇, 메타 설명, 이미지, 구조화된 데이터 및 표준 태그가 있어야 합니다.
JavaScript 웹사이트를 SEO 친화적으로 만들기
웹 페이지에서 JavaScript SEO 구현을 테스트하려면 다음 단계를 따르세요.
- 웹사이트에서 얼마나 많은 JavaScript를 사용하는지 확인: 이를 위해 브라우저에서 JavaScript를 비활성화하기만 하면 됩니다. 콘텐츠가 많지 않다면 웹사이트가 JavaScript에 크게 의존하고 있다는 의미입니다.
- Googlebot이 모든 중요한 콘텐츠와 태그를 가져오는지 확인합니다. Google 모바일 친화적 테스트 도구 또는 Googlebot이 원시 HTML을 사용하여 콘텐츠를 렌더링하는 방법을 확인하는 리치 결과 테스트 도구입니다.
- 다음과 같은 크롬 확장 프로그램을 사용할 수도 있습니다. 렌더링된 소스 보기 JavaScript가 페이지를 변경하고 소스 HTML과 렌더링된 HTML을 비교하는 방법을 이해합니다.
- 다음을 사용하여 렌더링된 HTML에서 중요한 태그(제목, 메타 설명 등)를 확인할 수 있습니다. SEO 프로 크롬 확장 프로그램.
결론
이 기사에서는 JavaScript를 사용하여 SEO 처리를 약간 복잡하게 만드는 방법과 많은 JavaScript를 코드에 추가하여 발생할 수 있는 잠재적인 문제를 해결하는 방법에 대해 배웠습니다.
또한 JavaScript 웹사이트를 SEO 친화적으로 만들기 위한 몇 가지 모범 사례와 도구를 보았습니다. Google에서 동적 콘텐츠를 인식하고 크롤링하는 데 도움이 되는 다른 훌륭한 도구는 Prerender, AngularJS그리고 허카바이.
웹 사이트 로딩 시간을 줄이는 가장 좋은 방법을 확인할 수도 있습니다.
기사를 재미있게 읽었습니까? 세상과 함께 나누는 건 어떨까요?