자바스크립트 SEO

자바스크립트를 잘 쓰면 역동적이고 멋진 사이트를 만들 수 있습니다. 하지만 잘못 사용할 경우 SEO에 치명적이기도 합니다. 자바스크립트와 SEO, 어떤 관계가 있고 다양한 예시를 통해 어떤 식으로 사용해야 하는지 정리하였습니다.

웹 사이트가 아무리 훌륭하더라도 자바 스크립트 문제로 인해 Google에서 색인을 생성 할 수 없다면 트래픽 기회를 놓치고있는 것입니다.이번 포스팅에서는 JavaScript SEO 모범 사례와 JavaScript 문제를 디버깅하는 데 사용할 수있는 도구에 대해 알아야 할 것을 알려 드립니다.

어떤 경우 자바스크립트가 SEO에 나쁜가

”사이트에 리액트를 적용한 후 트래픽이 급감했습니다. 무슨 일 인가요?”

제 주변에서 적지 않은 분들이 물어보는 내용입니다.
React를 쓰던 다른 JS 프레임 워크를 쓰던 그것이 문제가 아닙니다. 중요한 것은 SEO의 영향을 고려하지 않고 구현하면 웹 사이트 트래픽이 하락할 수 밖에 없습니다.
JavaScript에서 잠재적으로 잘못 될 수있는 몇 가지 예를 소개합니다.

예시 1: 웹 사이트 네비게이션이 크롤링 안 될 경우

네비게이션의 링크가 웹 표준을 따르지 않습니다. 결과적으로 검색엔진(구글, 네이버)은 이를 확인할 수 없습니다.

결국 검색엔진이 내부 페이지를 찾기 어렵게 만들어져서 제대로 정보를 수집/인덱싱이 어렵습니다.

예제 2: 레이지 로드 구현 후 이미지 검색이 감소한 경우

레이지 로딩(Lazy Loading)을 할 경우, 잘못 구현할 경우 검색엔진이 발견하지 못 하게 됩니다. 위의 예시와 같이 7/17 적용 이후 검색량이 줄어든 것은 그런 이유였습니다.

예제 3: 리액트를 사이트에 적용했는데 SEO를 고려하지 않은 경우

해당 사이트의 경우 리액트(React)로 개편을 한 이후 트래픽이 급감하였는데 원인은 크롤링 안 되는 url, 이미지, 동일한 메타 태그 사용 등 기본적인 SEO가 불량한 상황이었습니다. 그럴 경우 검색엔진은 여러 페이지가 있더라도 결국 제대로 수집/인덱싱을 못 합니다.

자바스크립트를 사용할 때 주의할 점

자바스크립트를 사용할 때 검색 노출이 잘 되게 하려면 검색엔진을 위한 몇 가지 이해가 필요합니다.

검색엔진은 당신의 콘텐츠를 이해하려고 이것저것 해보지 않습니다.

검색엔진은 추가 상호 작용없이 렌더링 된 HTML에서 사용할 수있는 콘텐츠 만 볼 수 있습니다.
예를 들어 확장 가능한 텍스트 섹션이 있고 해당 텍스트가 소스 코드 또는 렌더링 된 HTML로 제공되는 경우 Google에서 색인을 생성합니다.
반대로 페이지 소스 코드 또는 DOM에서 처음에 콘텐츠를 사용할 수 없고 사용자가 상호 작용 한 후에만 로드되는 섹션(예 : 버튼 클릭)이 있는 경우 검색엔진이 콘텐츠를 볼 수 없습니다.
한마디로 화면에 보이는 것만 검색엔진이 이해할 수 있으며 눌러서 나오는 내용은 알 수 없다는 것 입니다.

검색엔진은 스크롤해서 보지 않습니다.

검색엔진은 웹 사이트에서 일반 사용자처럼 작동하지 않습니다. 페이지를 스크롤하지 않습니다. 따라서 콘텐츠가 끝없이 스크롤되는 스크롤 뒤에 ‘숨겨져’있는 경우 Google은 콘텐츠를 볼 수 없습니다.
검색엔진은 브라우저와 서버에서만 렌더링되는 콘텐츠를 보지 않기 때문에 Google에서 웹 사이트의 색인을 생성하려면 클라이언트측 렌더링은 피해야 합니다.

JavaScript SEO 베스트 사례

웹 표준에 따른 링크 적용

<a href=“https://연결할-링크-주소”>링크를 유도하는 문구</a>

위와 같은 방식을 따르면 구글, 네이버 등 검색엔진에게 ’연결할-링크-주소‘를 확인할 수 있게 만들어 줍니다.

내부 링크 만들 때 유의사항

• window.location.href =‘/ page-url‘
• <a onclick=“goto(‘https://store.com/page-url’)”>
• # page-url

마지막 방식은 페이지의 특정 부분으로 이동시킬 때 사용할 수 있습니다. 하지만 검색엔진은 ‘#’이 추가 된 URL의 모든 개별 변형에 대해색인을 생성하지 않습니다.

웹 표준에 따른 이미지 추가

내부 링크와 마찬가지로 이미지 사용도 검색엔진이 이미지를 쉽게 찾고 색인을 생성 할 수 있도록 웹 표준을 따라야합니다.
검색하려면 이미지가 ‘src’HTML 태그에서 링크 되어야 합니다.

<img src=“이미지-파일명.png”/>

많은 자바 스크립트 기반 레이지 로딩 라이브러리는 ‘data-src’속성을 사용하여 실제 이미지 URL을 저장하고 빠르게 로드될 자리에 대체 이미지를 보여줍니다.

<img data-src=“진짜-이미지-파일명.png” class=“inline lazyloaded” src=“대체-이미지-파일명.gif”></div>

<img datga-src>를 통해 페이지 속도 최적화를 구현하는 것을 추천합니다.

서버 사이드 렌더링 사용

검색엔진이 콘텐츠를 읽고 정보를 수집해 가려면 사용자의 브라우저뿐만 아니라 서버에서도 사용할 수 있는지 확인해야합니다.
또는 동적인 렌더링(유저가 브라우저에 콘텐츠를 받는 동안 검색엔진을 감지하고 정적인 페이지를 제공하는 방식)을 추천합니다.

렌더링 시에는 반드시 주요 정보를 제공

주요 정보는 아래와 같습니다.

• 메타 정보
• 이미지
• 캐노니컬태그
• …

JavaScript SEO 디버깅 툴을 안내합니다

웹 페이지를 만들 때 소스 코드만 보는 시대는 끝났습니다. 이제는 자바스크립트가 제대로 렌더링 되는지 살펴봐야 합니다.

Step 1: 콘텐츠를 표시하는데 자바스크립트가 얼마나 사용되는지 확인하기

자바 스크립트에 의존하는 웹 사이트를 볼 때 가장 먼저하는 일은 자바 스크립트에 얼마나 의존하는지 확인하는 것입니다. 가장 쉬운 방법은 브라우저에서 JS를 비활성화하는 것입니다.

이를 위해 웹 개발자 Chrome 확장 프로그램을 사용합니다.

설정을 열고 JavaScript 비활성화를 클릭 한 다음 페이지를 다시 로드하면됩니다.

이후 페이지를 방문해서 JS없이 페이지가 어떻게 보이는지 확인해 보세요!

이 방법은 JavaScript가 콘텐츠 전달에 얼마나 영향을 미치는지에 대한 정보를 제공합니다. 하지만 이것이 검색엔진이 페이지를 색인할지에 대한 여부를 알려주지는 않습니다. 즉 만약 빈 페이지가 표시 되더라도 아무것도 작동하지 않는다는 의미는 아닙니다. 이는 웹 사이트가 JavaScript에 크게 의존한다는 것을 의미합니다.

이것이 바로 다음 단계에서 보여 드릴 도구로 렌더링 된 HTML을 테스트해야하는 이유입니다.

Step 2: 구글봇 등 검색엔진 크롤러가 올바른 콘텐츠와 태그를 받는지 확인하기

Google Mobile-friendly Test Tool

구글봇에 대한 확인을 위한 가장 믿음직한 툴입니다. 사용법도 몹시 간단하죠.

사용방법

1. 접속 (https://search.google.com/test/mobile-friendly)
2. 확인할 URL 입력
3. HTML탭의 내용 확인

아무래도 html 내용을 확인하려면 기술적인 SEO에 대한 지식이 있어야 합니다.

참고로 ‘rich result test tool(https://search.google.com/test/rich-results)’ 에서도 동일한 확인을 해보세요.

맺음말

자바스크립트는 잘 쓰면 약, 잘못 쓰면 독 입니다. 하루가 다르게 계속 변하는 웹 기술과 SEO. 그 중 신경써야 하는 것 중 하나가 자바스크립트 SEO입니다. 반드시 렌더링 내용을 확인해 보세요. 물론 데스크탑, 모바일 모두에서 확인해야 합니다. 가능하다면 디버깅을 구글서치콘솔에서도 해보길 추천합니다. 👍