JavaScript SEO 문제를 진단하는 4단계
- Technical SEO
- 2022. 4. 4.
겉보기에는 검색엔진 최적화(SEO)가 쉬워 보이지만 SEO 전문가가 되기에는 힘들다.
Advanced SEO 부터 최근은 모바일 앱에 적합한 전략까지 펼쳐야 한다.
이제는 Java까지 신경 써야 한다.
이 글을 통해, JavaScript SEO 문제를 진단하는 4단계에 대해서 알아보자.
작가 소개
JavaScript SEO 문제를 진단하는 4단계
JavaScript SEO: HTML vs JAVA 비교하자
시작하기에 앞서 HTML 콘텐츠와 Javascript 콘텐츠 간의 주요 차이점을 먼저 알아야 한다.
우리는 기존 몇 년 동안 HTML 및 CSS 기반 웹사이트에 익숙하다.
HTML 웹사이트를 사용하면 소스 코드를 살펴보기만 하면 웹사이트를 열 때 웹사이트에 표시될 대부분 콘텐츠를 볼 수 있다.
그러나 Javascript를 사용하면 많은 경우에 전혀 그렇지 않다.
따라서 HTML이 바로 사용할 수 있는 소스 중 하나이며, Googlebot에서 사용할 준비가 되어 있다는 것을 시각적으로 비교할 수 있다.
JavaScript는 여전히 모바일의 브라우저, 데스크톱 또는 Googlebot에서 처리해야 하는 많은 구성 요소 중 하나이다.
하지만 SEO에서 둘 다 필요한 경우가 많으니 이번 계기를 통해서 알아보는 것이 중요하다.
1단계. 비활성화된 JS에서 사이트가 작동하는지 확인
간단한 첫 번째 단계는 기본적으로 크롬 브라우저를 이용하는 것이다.
Quick JavaScript Switcher 검색한 후 플러그인 하자.
JavaScript를 끄고 페이지 내 콘텐츠가 변경되는지 확인 하자.
예를 들어, 껐다가 이미지 혹은 설명이 사라진다면 색인화가 잘 안된다는 뜻이다.
2단계. Google URL 검사 도구
Google URL 검사 도구로 이동하면 Google에 맞게 제대로 렌더링 되는지 확인하자.
매우 간단하며 웹사이트가 제대로 렌더링되는지 확인할 수 있다.
그리고 Google에서 처리한 코드만 바로 확인이 가능하다.
3단계. 인덱싱 확인
3단계가 조금 까다롭다.
웹사이트가 두 가지 인덱싱에 의존하는지 확인하는 방법이다.
Google.com으로 이동하여 방금 발행한 콘텐츠의 색인을 생성했는지 확인하자.
1시간 전에 새로운 글을 쓰고, 재빠르게 되는지 확인하는 것이 필요하다.
그리고 여기에서 부분 인덱싱이라는 새로운 개념을 도입하자.
JavaScript 콘텐츠를 사용하면 해당 URL 내의 일부 콘텐츠가 인덱싱 되고 일부 콘텐츠는 색인이 생성되지 않을 수 있다.
여기에서 인덱싱 되지 않을 콘텐츠가 JavaScript에 의존하는 콘텐츠이기 때문에 조금 까다로워진다.
페이지의 다른 부분을 확인하고 Google에서 색인이 생성되었는지 확인하자.
4단계. 코드 비교
조금 더 깊이 들어가고 싶다면 구글 서치 콘솔로 이동하여 마지막으로 크롤링된 페이지를 확인하는 것이다.
오늘 내용을 정리하면 아래와 같다.
- 비활성화된 Java에서 확인.
- Google URL 검사 도구 활용.
- 인덱싱 확인.
- 코드 비교하기.
결론
위 4단계만 제대로 따라 해도 충분히 개선이 가능하다.
그러나 몇 가지 문제나 잠재적인 문제를 발견하는 경우 어떻게 해야 할까?
콘텐츠 색인을 생성하는 데 시간이 너무 오래 걸리거나 다른 검색엔진에서 색인이 생성되지 않는 경우가 있다.
이럴 때는 JavaScript 렌더링 하는 형식을 고려해야 한다.
<참조: 4 Steps To Diagnose Your JavaScript SEO Issues>
더 알아보기
- 에스이오 홈페이지 : 검색엔진 최적화(SEO) FACT만 제공하는 콘텐츠 페이지.
- 에스이오_검색엔진 최적화 7가지 : 2019년부터 쌓아온 SEO를 정석으로 배울 수 있는 전자책.
- 에스이오 부트캠프_30일 : SEO Analyst에게 구글 SEO를 A to Z까지 30일 동안 1:1로 배울 수 있는 강의.