SEO를 위한 JavaScript 렌더링 이해(+6가지 쉬운 테스트 방법!)

JavaScript는 사용자 경험을 향상시키고 웹 사이트에 상호 작용을 추가할 수 있는 강력한 프로그래밍 언어입니다.

그러나 여기에 문제가 있습니다. 검색 엔진이 항상 JavaScript와 잘 어울리는 것은 아닙니다 .

JavaScript 렌더링이 SEO에 미치는 영향을 이해하는 것이 중요합니다. 그런 다음 필요한 조치를 취하여 웹 사이트가 가치 있는 가시성을 갖도록 할 수 있습니다.

이 가이드에서는 다음을 다룹니다.

• JavaScript 렌더링의 알아야 할 측면
• 검색 엔진이 웹 사이트를 보는 방법을 테스트하는 6가지 쉬운 방법
• JavaScript 사이트를 위한 실용적인 SEO 기술

JavaScript란 무엇이며 렌더링이란 무엇입니까?

JavaScript는 동적 및 대화형 웹 페이지를 만드는 데 널리 사용되는 프로그래밍 언어입니다.

Google은 웹사이트를 크롤링할 때 페이지의 색인을 생성하기 위해 사이트의 콘텐츠와 구조를 이해해야 합니다.

이를 달성하기 위해 "JavaScript 렌더링"이라는 프로세스를 사용합니다. Google은 JavaScript 코드를 실행한 다음 결과 HTML 콘텐츠를 분석합니다.

이미지 출처

이를 통해 검색 엔진은 동적으로 생성된 콘텐츠를 인덱싱할 수 있습니다.

그러나 이 과정이 완벽하지는 않습니다. 일반 HTML 페이지보다 페이지에서 JavaScript 콘텐츠를 크롤링하는 데 Google이 9배 더 오래 걸립니다.

때로는 검색 엔진이 자바스크립트를 완전히 또는 올바르게 실행하지 않아 중요한 페이지 요소를 크롤러가 감지하지 못하고 잠재적으로 순위를 억제할 수 있습니다.

SEO용 JavaScript의 문제점은 무엇입니까?

주요 문제 중 하나는 검색 엔진이 JavaScript로 생성된 콘텐츠를 크롤링하고 렌더링하는 데 어려움을 겪을 수 있다는 것입니다.

Google이 페이지 요소를 크롤링할 수 없는 경우 해당 콘텐츠 섹션은 Google 색인에 추가되지 않습니다 .

경우에 따라페이지의 전체 콘텐츠가될 수 있으므로 순위를 매길 기회가 없습니다!

크롤링할 수 없는 페이지는 순위를 매기는 기능을 방해할 뿐만 아니라 일반적으로 사이트의 SEO를 방해할 수도 있습니다 .

Google에서 자바스크립트 렌더링 오류로 인해 여러 페이지가 동일한 것으로 확인되면 해당 페이지를 중복 콘텐츠로 잘못 취급할 수 있습니다. 이로 인해 원치 않는 정규화가 발생하거나 중요한 페이지가 크롤러에 의해 완전히 무시되어 전체 SEO에 해로울 수 있습니다.

크롤러가 렌더링하지 못한 페이지의 모든 링크는 크롤링되지 않으므로 해당 페이지의 링크 지분은 내부 또는 외부 소스로 전달되지 않습니다.

크롤러가 중요한 내부 링크를 놓치면 사이트 탐색에 대한 검색 엔진의 이해도 왜곡될 수 있으며 중요한 페이지가 고아 페이지 로 취급될 가능성도 있습니다.

JavaScript 렌더링 실패로 인해 발생할 수 있는 다른 SEO 문제는 다음과 같습니다.

• 인덱스에서 이미지가 삭제되어 이미지 트래픽이 줄어듭니다.
• 동적으로 생성된 페이지 제목이 간과되어 검색 순위 및 클릭률에 영향을 줄 수 있습니다.

SEO 프로젝트에 JavaScript를 사용하는 이유는 무엇입니까?

따라서 JavaScript로 인한 SEO 골칫거리가 많이 있을 수 있습니다.

이러한 잠재적인 문제를 고려할 때 SEO 프로젝트에 JavaScript를 사용하는 이유가 궁금할 수 있습니다.

글쎄요, 실제로 웹 개발 프로젝트에 사용하려는 많은 이유가 있습니다.

JavaScript는 웹 사이트에서 사용자 경험과 참여를 크게 향상시킬 수 있습니다. 이를 사용하여 슬라이드 데크, 애니메이션 및 기타 대화형 기능을 만들 수 있습니다.

또한 웹 사이트의 성능과 속도를 향상시킬 수 있습니다. 지연 로딩, 코드 분할, 캐싱 및 서비스 작업자를 사용하여 사이트를 최적화할 수 있습니다.

또한 사용자 행동, 기본 설정 및 위치를 기반으로 동적이고 개인화된 콘텐츠를 만들 수 있습니다.

웹사이트의 98% 이상이 JavaScript를 사용하는 데에는 이유가 있습니다.

웹은 일반 HTML에서 이동했습니다. SEO로서 이를 받아들일 수 있습니다. JS 개발자에게서 배우고 그들과 SEO 지식을 공유하세요. JS는 사라지지 않습니다.

- 존 뮬러(공식) · #스테이플러라이프(@JohnMu) 2017년 8월 8일

JavaScript를올바르게사용하고 잠재적인 문제가 있는지 테스트하기만 하면 됩니다!

SEO를 위한 JavaScript 렌더링을 테스트하는 6가지 쉬운 방법

자바스크립트 렌더링을 테스트하면 Google이 콘텐츠를 크롤링하고 색인을 생성하지 못하게 할 수 있는 잠재적인 문제를 식별하는 데 도움이 됩니다.

다음은 6가지 쉬운 방법 입니다.

1. JavaScript가 차단된 경우 Chrome에서 페이지를 로드할 수 있는지 테스트

호출의 첫 번째 포트는 브라우저에서 JavaScript를 비활성화하는 것입니다.

브라우저에서 콘텐츠를 완전히 표시할 수 없는 경우 JavaScript를 HTML 문서로 렌더링하는 데 문제가 있는 것입니다.

Google 크롬에 페이지가 로드되면 주소 표시줄의 자물쇠를 클릭하고 '사이트 설정'을 선택합니다.

그런 다음 JavaScript까지 아래로 스크롤하고 차단을 선택합니다.

탭으로 돌아가면 Chrome에서 페이지 새로고침을 제안합니다. 다시 로드를 클릭합니다.

콘텐츠를 계속 볼 수 있습니까?

위의 예와 같이 페이지가 완전히 사라진 경우 분명히 페이지의 JavaScript 렌더링에 문제가 있는 것입니다.

Google에서 콘텐츠를 크롤링하지 못할 수 있습니다.

경우에 따라 광고 배너와 같은 특정 기능만 페이지에서 누락될 수 있습니다.

크롤링하려는 모든 콘텐츠가 표시되는지 확인하려고 합니다. 예를 들어 Google이 전체 단락을 크롤링할 수 없는 경우 핵심 정보를 놓치게 되어 페이지의 순위 가능성이 위태로워집니다.

위험에 처한 것은 페이지의 본문 콘텐츠 뿐만이 아닙니다.

2. SEO 분석 도구가 페이지를 보는 방식 확인

빠르고 쉬운 SEO 분석 도구를 사용하면 JavaScript SEO 문제를 훨씬 더 쉽게 식별할 수 있습니다.

크롤링 프로세스를 모방하면 검색 엔진이 페이지를 이해하는 방법을 알 수 있습니다.

주소 표시줄에서 아이콘을 클릭하고 Chrome에서 JavaScript를 다시 허용하도록 되돌립니다.

이제 SEOMinion과 같은 브라우저 애드온을 사용하여 웹페이지의 온페이지 SEO를 분석합니다.

사이드바가 실행됩니다. 이제 '온페이지 SEO 분석'을 선택합니다.

생성된 보고서를 사용하여 페이지에서 실제로 볼 수 있는 것과 비교하십시오.

• 페이지의 단어 수는 얼마입니까?
• 모든 제목 태그가 있습니까?
• 이미지 개수가 정확합니까?
• 다른 요소는 분석 도구에 따라 다르게 나타나는가?

이 예에서 우리는 페이지의 단어 수가 한 단어라는 것을 알 수 있습니다. 이것은 매우 얇은 기사를 만들 것입니다!

페이지에는 하나의 제목 태그(H1)만 있으며 제대로 작동하는 것 같습니다. 그러나 H2 또는 H3 태그가 있는 경우 단어 수가 내용의 본문이 올바르게 렌더링되지 않음을 나타내므로 통과하지 못할 수 있습니다.

페이지에는 3개의 이미지가 있지만 이 도구는 하나만 표시되는 것으로 표시됩니다.

이미지 파일을 다운로드할 때 이것이 사이트 로고(헤더에서 가져옴)임을 발견했습니다.

볼 수 있는 내용이 보고서에서 '보는' 내용과 충돌하는 경우 이는 페이지 본문 내의 콘텐츠를 제대로 크롤링할 수 없다는 또 다른 표시입니다.

3. 구글 모바일 친화성 테스트

Google의 모바일 친화성 테스트 도구를 사용하여 웹페이지의 렌더링된 HTML을 확인할 수도 있습니다.

확인하려는 URL을 입력하면 결과 페이지 오른쪽에 해당 페이지의 스크린샷이 표시됩니다.

이것은 Googlebot이 페이지를 보는 방식을 시각적으로 표현한 것입니다. 스크린샷을 페이지와 비교하고 누락된 요소를 확인할 수 있습니다.

불규칙한 것이 발견되면 렌더링된 HTML을 확인하고 스크린샷에서 누락된 항목이 HTML 코드에서도 누락되었는지 확인하십시오.

참고: Google은 2023년 말에 이 도구를 제거할 예정입니다. 하지만 걱정하지 마세요. SEO Kristina Azarenko가 현재와 그 시점에 훌륭한 해결 방법을 가지고 있기 때문입니다.

Google은 올해 말 모바일 친화성 테스트 도구를 중단합니다.

오랫동안 많은 기술 검색엔진 최적화 업체는 페이지의 렌더링된 HTML을 확인하기 위해 모바일 친화성 테스트 도구를 사용해 왔습니다. Google Search Console의 URL 검사 도구에 액세스할 수 없을 때 매우 편리합니다… pic.twitter.com/AcSh7J7jhu

— 크리스티나 아자렌코(@azarchick) 2023년 6월 12일

이것은 우리를 완벽하게 이끌어줍니다…

4. Google 리치 결과 도구

Google의 리치 결과 테스트는 Googlebot이 JavaScript 파일을 렌더링하는 방법에 대한 유사한 정보를 제공합니다.

URL을 입력하고 테스트를 실행하여 Googlebot이 페이지를 보는 방식을 보여주는 스크린샷을 확인하세요.

5. 구글 서치 콘솔 URL 검사

Google Search Console URL 검사 도구를 사용하여 웹사이트의 특정 URL에 대한 JavaScript 렌더링을 확인할 수 있습니다.

이 도구는 페이지의 인덱싱 상태 및 JavaScript 렌더링에 대한 자세한 정보를 제공합니다.

JavaScript가 성공적으로 실행되었는지 또는 문제가 있는지 여부를 나타냅니다.

JavaScript 실행과 관련된 오류에 주의하십시오. 검색 엔진이 콘텐츠를 이해하고 인덱싱하는 방법에 영향을 줄 수 있습니다.

6. 전문 렌더링 도구 사용

SEO를 위한 JavaScript 렌더링을 테스트하는 또 다른 효과적인 방법은 전문 렌더링 도구를 사용하는 것입니다.

이러한 도구는 검색 엔진 크롤러가 JavaScript와 상호 작용하고 웹 페이지를 렌더링하는 방법을 시뮬레이션합니다.

무료 도구:

• 가져오기 및 렌더링 – 이 도구는 렌더링 프로세스를 모방하지만(Google 검사 도구와 유사) 다양한 사용자 에이전트를 사용하여 테스트할 수 있습니다.
• 사전 렌더링 테스트 도구를 사용하면 여러 크롤러의 사전 렌더링 정보를 비교할 수 있습니다. URL을 입력하고 사용자 에이전트를 선택하면 렌더링 프로세스 전에 다른 크롤러에 제공되는 콘텐츠를 비교할 수 있습니다.

유료 도구:

대규모 또는 엔터프라이즈급 프로젝트에 특히 유용한 정말 강력한 기술 SEO 소프트웨어가 많이 있습니다.

아래의 모든 항목에는 JavaScript 렌더링을 테스트하기 위한 도구가 포함되어 있습니다.

• 보티파이
• 제트옥토퍼스
• 루마
• 비명개구리
• 크롤링
• 셈러시

어떤 도구를 사용하든 다음 요소가 올바르게 렌더링되어 크롤링 가능성과 색인 가능성이 보장되고 콘텐츠가 기술적인 관점에서 가장 좋은 순위에 있는지 확인하세요.

• 페이지에 복사
• 이미지
• 정식 태그
• 제목 및 메타 설명
• 메타 로봇 ​​태그
• 구조화된 데이터
• Hreflang
• 제목 태그
• 동영상
• 대화형 요소 내의 콘텐츠(예: 아코디언 기능)

JavaScript 사이트를 SEO 친화적으로 만드는 방법

검색 엔진이 웹 페이지를 효과적으로 크롤링하고 인덱싱하는 데 도움이 되는 몇 가지 JavaScript SEO 모범 사례를 구현할 수 있습니다.

연결

내부 및 외부 링크에 대해 href 속성과 함께 HTML 앵커 태그를 사용하십시오.

검색 엔진은 <a> 태그를 링크로 인식하고 이해합니다. Googlebot은 이러한 링크를 가져와서 크롤링 대기열에 추가합니다.

설명이 포함된 앵커 텍스트를 사용하여 Google이 링크된 페이지의 콘텐츠를 이해하도록 돕습니다. 일반적인 문구를 피하고 대상 페이지를 정확하게 나타내는 자연스럽고 키워드가 풍부한 앵커 텍스트를 선택하십시오.

이미지

이미지에 대한 설명이 포함된 Alt 태그를 포함합니다. Alt 태그는 이미지 콘텐츠를 설명하는 대체 텍스트를 제공합니다.

이것은 검색 엔진이 주변 콘텐츠에 대한 이미지의 관련성을 이해하는 데 도움이 됩니다.

이미지에 설명적이고 키워드가 풍부한 파일 이름을 사용하는 것도 좋습니다.

schema.org의 ImageObject와 같은 구조화된 데이터 마크업을 사용하여 이미지에 대한 추가 컨텍스트를 제공할 수 있습니다.

서버 측 렌더링 또는 동적 렌더링

Angular 및 React와 같은 JavaScript 프레임워크를 사용하여 구축된 웹 사이트는 기본적으로 클라이언트 측 렌더링에 사용됩니다.

웹 페이지의 렌더링은 사용자의 브라우저에서 발생합니다.

문제는 검색 엔진 크롤러가 콘텐츠를 이해하지 못할 수 있다는 것입니다. 빈 페이지가 표시됩니다.

대안은 서버 측 렌더링(SSR)을 사용하여 JavaScript가 많은 페이지의 HTML 버전을 생성하는 것입니다.

이를 통해 Google은 미리 렌더링된 HTML 콘텐츠에 직접 액세스하고 색인을 생성할 수 있습니다.

그러나 SSR은 비용이 많이 들고 자원이 많이 소모될 수 있습니다.

해결 방법은 동적 렌더링을 사용하는 것입니다.

사전 렌더링된 페이지가 검색 엔진 봇에 제공되는 반면 일반 사용자는 여전히 JavaScript에 의해 생성된 페이지의 완전히 동적인 버전을 경험합니다.

자바스크립트 SEO 마스터하기

SEO는 키워드를 최적화하고 백링크를 보호하는 것 이상입니다. 또한 테크니컬 SEO로 이동할 때 웹사이트가 검색 엔진 크롤러에 렌더링되고 표시되는 방식을 고려하는 것도 포함됩니다.

JavaScript 렌더링이 크롤러 접근성을 방해하지 않도록 함으로써 검색 결과의 가시성을 개선하고 페이지에 유기적 트래픽을 유도할 수 있습니다.

훌륭한 링크를 확보하고 자신과 고객을 위해 영향력 있는 콘텐츠를 만드는 데 얼마나 많은 노력을 기울이는지 알고 있습니다. 열악한 기술적 SEO 및 JavaScript 문제로 인해 이러한 노력이 취소되지 않도록 하십시오!