JavaScript SEO에 대해 알아야 할 모든 것

게시 됨: 2020-08-07

프로그래머에게 물어보면 JavaScript에 대해 어떻게 생각하는지 알려줄 것입니다.

JavaScript(JS)는 출시 이후 전 세계 웹 개발자들이 가장 많이 사용하는 프로그래밍 언어였습니다. 최근 Stack Overflow에서 웹 개발자를 대상으로 한 설문 조사에 따르면 JavaScript는 8년 연속 가장 선호되는 프로그래밍 언어입니다.

JS를 사용하면 웹 개발자가 대규모 웹 애플리케이션을 쉽게 구축할 수 있습니다. 페이지를 동적으로 업데이트하고 대화형으로 만드는 탁월한 기능이 있습니다. 또한 AngularJS, ReactJS, Vue 및 NodeJS와 같은 JavaScript 프레임워크는 JS 기반 사이트를 개발하는 데 필요한 시간과 노력을 크게 줄여줍니다. JavaScript가 전 세계 웹사이트의 96%를 구성하는 것은 당연합니다.

그러나 JS 기반 사이트는 Google과 애증의 관계를 맺고 있는 것 같습니다. JavaScript는 HTML을 쉽게 제어하고 변경하여 웹 페이지를 동적이고 대화형으로 만들어 사이트의 UX를 개선할 수 있습니다. 그러나 검색 엔진은 JS를 다루기 어려워 대부분의 JavaScript 콘텐츠를 색인화하지 않은 상태로 남깁니다.

JavaScript가 Google의 업무를 더 어렵게 만드는 이유와 JS 콘텐츠를 봇 친화적으로 만들기 위해 할 수 있는 일에 대해 조금 더 자세히 살펴보겠습니다.

Javascript는 SEO에 어떤 영향을 미칩니까?

JavaScript를 사용하면 페이지를 빠르게 로드할 수 있고 풍부한 인터페이스를 제공하며 구현하기 쉽습니다. 그러나 브라우저의 유동성은 사용자 상호 작용에 따라 달라지므로 검색 엔진이 페이지를 이해하고 콘텐츠에 값을 연결하기가 어렵습니다.

검색 엔진은 JavaScript 콘텐츠를 포함하는 웹 페이지를 렌더링할 때 제한 사항이 있습니다. Google은 페이지의 초기 크롤링을 수행하고 찾은 항목의 색인을 생성합니다. 리소스를 사용할 수 있게 되면 봇은 해당 페이지에서 JS를 다시 렌더링합니다. 이는 JavaScript에 의존하는 콘텐츠와 링크가 검색 엔진에 표시되지 않아 사이트의 SEO에 잠재적으로 해를 끼칠 위험이 있음을 의미합니다.

원천

그러나 Google은 JavaScript가 계속 존재한다는 것을 알고 있습니다! 그 결과, 검색 엔진의 거인은 검색 전문가가 JS 기반 사이트를 최적화할 수 있도록 많은 리소스를 투입했습니다.

JS 콘텐츠를 온라인에서 더 쉽게 검색할 수 있도록 도와주는 Google의 JavaScript SEO에 대한 이 비디오 시리즈를 확인하십시오.

SEO 전문가는 JS 기반 웹 페이지를 Google이 인정하는 형식으로 랭글링해야 합니다. 검색 엔진이 JS 콘텐츠를 처리하는 방법을 약간만 이해하면 JavaScript와 SEO를 함께 사용하여 사이트 순위를 높일 수 있습니다.

검색 엔진은 JavaScript를 어떻게 처리합니까?

Google 봇은 JS가 아닌 페이지와 다르게 JS를 처리합니다. 봇은 크롤링, 인덱싱 및 렌더링의 3단계로 처리합니다. 아래 Google 개발자의 그래픽 덕분에 이러한 단계를 쉽게 이해할 수 있습니다.

원천

크롤링

이 단계는 콘텐츠의 검색 가능성에 관한 것입니다. 하위 프로세스, 즉 시드 세트, 크롤링 대기열 및 일정, URL 중요도 등을 포함하는 복잡한 프로세스입니다.

우선 Google의 봇은 크롤링 및 렌더링을 위해 페이지를 대기열에 넣습니다. 봇은 구문 분석 모듈을 사용하여 페이지를 가져오고 페이지의 링크를 따라가며 페이지가 인덱싱될 때까지 렌더링합니다. 모듈은 페이지를 렌더링할 뿐만 아니라 소스 코드를 분석하고 <a href=”…”> 스니펫에서 URL을 추출합니다.

봇은 robots.txt 파일을 확인하여 크롤링이 허용되는지 여부를 확인합니다. URL이 허용되지 않음으로 표시된 경우 봇은 해당 URL을 건너뜁니다. 따라서 오류를 방지하려면 robots.txt 파일을 확인하는 것이 중요합니다.

표현

사이트의 콘텐츠, 템플릿 및 기타 기능을 사용자에게 표시하는 프로세스를 렌더링이라고 합니다. 서버 측 렌더링과 클라이언트 측 렌더링이 있습니다.

서버 측 렌더링(SSR)

이름에서 알 수 있듯이 이 유형의 렌더링에서는 페이지가 서버에 채워집니다. 사이트에 액세스할 때마다 페이지가 서버에서 렌더링되어 브라우저로 전송됩니다.

즉, 사용자나 봇이 사이트에 액세스하면 콘텐츠를 HTML 마크업으로 받습니다. 이는 Google이 콘텐츠에 액세스하기 위해 JS를 별도로 렌더링할 필요가 없기 때문에 일반적으로 SEO에 도움이 됩니다. SSR은 전통적인 렌더링 방법이며 대역폭과 관련하여 비용이 많이 들 수 있습니다.

클라이언트 측 렌더링

클라이언트 측 렌더링은 개발자가 JavaScript를 사용하여 브라우저에서 완전히 렌더링된 사이트를 구축할 수 있도록 하는 상당히 최근의 렌더링 유형입니다. 따라서 경로당 별도의 HTML 페이지를 사용하는 대신 클라이언트 측 렌더링을 사용하면 브라우저에서 직접 각 경로를 동적으로 생성할 수 있습니다. 이러한 유형의 렌더링은 서버에 여러 라운드를 수행하기 때문에 처음에는 느리지만 요청이 완료되면 JS 프레임워크를 통한 경험이 빠릅니다.

페이지가 크롤링된 후 발생하는 작업으로 돌아가서 원시 HTML 코드의 robots 메타 태그가 Googlebot에 페이지의 색인을 생성하지 않도록 지시하지 않는 한 봇은 렌더링해야 하는 페이지를 식별하고 렌더링 대기열에 추가합니다.

페이지는 몇 초 동안 렌더링 대기열에 유지되지만 사용 가능한 리소스의 양에 따라 시간이 걸릴 수 있습니다.

원천

리소스가 허용되면 WRS(Google Web Rendering Service)가 페이지를 렌더링, 구문 분석 및 컴파일하고 페이지에서 JavaScript를 실행합니다. 봇은 링크에 대해 렌더링된 HTML을 다시 구문 분석하고 크롤링을 위해 찾은 URL을 대기열에 넣습니다. 렌더링된 HTML은 페이지 인덱싱에 사용됩니다.

인덱싱

WRS가 외부 API 및 데이터베이스에서 데이터를 가져오면 Google의 Caffeine 인덱서가 콘텐츠를 인덱싱할 수 있습니다. 이 단계에서는 URL을 분석하고, 페이지의 콘텐츠와 관련성을 이해하고, 검색된 페이지를 색인에 저장합니다.

SEO를 위해 JavaScript를 최적화하는 방법

JavaScript를 잘못 구현하면 SEO를 망칠 수 있습니다. 사이트 순위를 높이려면 다음 자바스크립트 SEO 모범 사례를 따르십시오.

페이지 SEO 노력을 지속적으로 유지하십시오.

검색 엔진에서 순위를 매기는 데 도움이 되도록 페이지를 최적화하는 모든 페이지 SEO 규칙은 여전히 적용됩니다. 제목 태그, 메타 설명, 이미지의 alt 속성, 메타 로봇 태그를 최적화하세요. 독특하고 설명적인 제목과 메타 설명은 사용자와 검색 엔진이 콘텐츠를 쉽게 식별하는 데 도움이 됩니다. 검색 의도와 의미적으로 관련된 키워드의 전략적 배치에 주의하십시오.

또한 SEO 친화적인 URL 구조를 갖는 것이 좋습니다. 몇몇 경우에 웹사이트는 URL에 pushState 변경을 구현하여 표준을 찾으려고 할 때 Google을 혼란스럽게 합니다. 이러한 문제에 대한 URL을 확인하십시오.

JavaScript가 DOM 트리에 나타나는지 확인하십시오.

JavaScript 렌더링은 페이지의 DOM이 충분히 로드되었을 때 작동합니다. DOM 또는 문서 개체 모델은 페이지 콘텐츠의 구조와 각 요소와 다른 요소의 관계를 보여줍니다. 페이지 코드의 브라우저 ''요소 검사'에서 찾을 수 있습니다. DOM은 동적으로 생성된 페이지의 기초입니다.

DOM에서 콘텐츠를 볼 수 있다면 콘텐츠가 Google에서 구문 분석되고 있을 가능성이 있습니다. DOM을 확인하면 검색 엔진 봇이 귀하의 페이지에 액세스하는지 여부를 판별하는 데 도움이 됩니다.

메타 로봇 태그에 처음에 noindex가 포함된 경우 봇은 렌더링 및 JS 실행을 건너뜁니다. Googlebot은 페이지에서 이벤트를 실행하지 않습니다. 콘텐츠가 JS의 도움으로 페이지에 추가되면 페이지가 로드된 후에 완료되어야 합니다. 버튼을 클릭할 때, 페이지를 스크롤할 때 등의 내용이 HTML에 추가되면 색인이 생성되지 않습니다.

마지막으로 구조화된 데이터를 사용할 때 JavaScript를 사용하여 필요한 JSON-LD를 생성하고 페이지에 삽입하십시오. 제쳐두고, 처음부터 구현해야 하는 상위 페이지 SEO 트릭에 대해 알아보십시오.

검색 엔진이 JS 콘텐츠에 액세스하는 것을 차단하지 마십시오.

Google이 JS 콘텐츠를 찾을 수 없는 문제를 피하기 위해 일부 웹마스터는 JS 콘텐츠를 사용자에게 제공하지만 크롤러에게는 숨기는 클로킹이라는 프로세스를 사용합니다. 그러나 이 방법은 Google의 웹마스터 가이드라인을 위반한 것으로 간주되어 처벌을 받을 수 있습니다. 대신 주요 문제를 식별하고 검색 엔진에서 JS 콘텐츠에 액세스할 수 있도록 하세요.

때때로 사이트 호스트가 의도하지 않게 차단되어 Google에서 JS 콘텐츠를 볼 수 없습니다. 예를 들어 사이트에 다른 용도로 사용되는 하위 도메인이 몇 개 있는 경우 하위 도메인은 별도의 웹사이트로 취급되기 때문에 각각 별도의 robots.txt가 있어야 합니다. 이러한 경우 이러한 robots.txt 지시문이 검색 엔진이 렌더링에 필요한 리소스에 액세스하는 것을 차단하지 않는지 확인해야 합니다.

중복 콘텐츠 수정

웹사이트에 JavaScript를 사용하는 경우 동일한 콘텐츠에 대해 다른 URL이 있을 수 있습니다. 이로 인해 대문자, ID 또는 ID가 있는 매개변수로 인해 종종 발생하는 중복 콘텐츠 문제가 발생합니다. 이러한 페이지를 찾고 색인을 생성할 원본/선호 URL을 선택하고 표준 태그를 설정하여 검색 엔진이 혼동되지 않도록 하십시오.

지연 로드된 콘텐츠 및 이미지 수정

사이트 속도는 SEO에 매우 중요합니다. 지연 로딩은 중요하지 않거나 보이지 않는 콘텐츠의 로딩을 연기하여 초기 페이지 로딩 시간을 줄이는 UX 모범 사례 중 하나입니다. 그러나 페이지 로드 속도를 높이는 것 외에도 검색 엔진 크롤러가 콘텐츠에 액세스할 수 있는지 확인해야 합니다. 이러한 크롤러는 JavaScript를 실행하지 않거나 페이지를 스크롤하여 지연 로드된 콘텐츠를 구동하지 않아 SEO에 부정적인 영향을 미칩니다.

게다가 이미지 검색은 추가적인 유기적 트래픽의 원천이기도 합니다. 따라서 지연 로드된 이미지가 있는 경우 검색 엔진에서 해당 이미지를 선택하지 않습니다. 지연 로딩은 사용자에게 유용하지만 봇이 잠재적으로 중요한 콘텐츠를 놓치지 않도록 주의해서 수행해야 합니다.

JS SEO 도구 사용

JavaScript 코드의 문제를 식별하고 수정하는 데 도움이 되는 도구가 많이 있습니다. 다음은 귀하에게 유리하게 사용할 수 있는 몇 가지입니다.

URL 검사 기능. 이 도구는 Google Search Console에서 찾을 수 있습니다. Google 크롤러가 페이지의 색인을 생성하거나 크롤링할 수 있는지 여부를 표시할 수 있습니다.
검색 엔진 크롤러. 이러한 도구를 사용하면 검색 엔진이 페이지를 크롤링하는 방법을 효과적으로 테스트하고 모니터링할 수 있습니다.
페이지 속도 인사이트. Google의 Page Speed Insights는 사이트 성능에 대한 세부정보를 공유하고 사이트 성능을 개선할 수 있는 방법에 대한 권장 사항을 제공합니다.
사이트: 사령부. 이 도구는 Google이 콘텐츠의 색인을 올바르게 생성했는지 여부를 확인하는 데 도움이 됩니다. Google에서 이 명령을 입력하기만 하면 됩니다. 사이트: [웹사이트 URL] "텍스트 스니펫 또는 쿼리"

자바스크립트 SEO 과제

이제 검색 엔진이 JavaScript 콘텐츠를 처리하는 방법과 웹 사이트를 SEO 성공으로 빠르게 전환하기 위해 무엇을 할 수 있는지에 대한 공정한 아이디어를 얻었습니다. 그러나 SEO 전문가와 웹마스터가 직면한 몇 가지 다른 문제가 있습니다. 이들 중 대부분은 JavaScript 기반 웹사이트를 최적화할 때 저지른 실수에서 비롯됩니다.

1. 축소되지 않은 JavaScript 및 CSS 파일

SEO 도구를 사용하여 JS 웹사이트를 감사하는 경우 축소되지 않은 Javascript 및 CSS 문제에 대한 경고를 접했을 것입니다. 일정 시간이 지나면 JS 및 CSS 파일은 불필요한 코드 라인, 공백, 소스 코드의 주석, 외부 서버 호스팅으로 인해 부담이 되어 웹사이트가 느려집니다. 불필요한 줄, 공백 및 주석을 제거하여 페이지 로드 시간을 줄이고 참여율을 높이며 SEO를 향상시키십시오.

2. URL에서 해시 사용

SEO 이벤트에서 잘못된 URL에 대해 John Mueller가 한 말을 기억하십니까?

"우리에게 해시가 있다면 나머지는 아마도 관련이 없을 것입니다. 대부분의 경우 콘텐츠 색인을 생성하려고 할 때 삭제합니다..."

그러나 여러 JS 기반 사이트에서는 해시가 포함된 URL을 생성합니다. 이것은 SEO에 재앙이 될 수 있습니다. URL이 Google에 적합한지 확인하세요. 다음과 같이 보이지 않아야 합니다.

www.example.com/#/about -us 또는
www.example.com/about#us

3. 내부 링크 구조를 확인하지 않음

Google은 귀하의 사이트에서 URL을 찾기 위해 적절한 <a href> 링크를 요구합니다. 또한 버튼을 클릭한 후 링크가 DOM에 추가되면 봇이 링크를 볼 수 없습니다. 대부분의 웹마스터는 이러한 점을 놓치고 SEO에 어려움을 겪습니다.

봇이 연결할 수 있도록 기존의 'href' 링크를 제공하도록 주의하십시오. 사이트의 내부 링크 구조를 개선하려면 웹사이트 감사 도구인 SEOprofiler를 사용하여 링크를 확인하십시오.

적절한 링크 구조에 대한 지침은 Google I/O 회의에서 Tom Greenway가 발표한 이 프레젠테이션을 확인하세요.

결론

의심의 여지 없이 JavaScript는 웹사이트의 기능을 확장합니다. 그러나 JavaScript와 검색 엔진이 항상 함께 사용되는 것은 아닙니다. JavaScript는 검색 엔진이 사이트를 크롤링하고 색인을 생성하는 방식에 영향을 미치므로 순위에 영향을 미칩니다. 따라서 검색 전문가는 검색 엔진 봇이 JS 콘텐츠를 처리하는 방법을 이해하고 JavaScript가 SEO 전략에 잘 맞는지 확인하는 데 필요한 조치를 취해야 합니다.

JS 기반 웹사이트가 있고 Google에서 콘텐츠를 찾을 수 없는 경우 문제를 해결할 때입니다. 이 게시물에 공유된 정보와 팁을 사용하여 JavaScript를 SEO에 최적화하고 수익을 높이십시오.