SEO 알아보기 (feat. Dynamic Rendering, React-snap)
들어가며
SEO는 Search Engine Optimization의 약자로 검색엔진에서 더 찾기 쉽도록 사이트를 개선하는 프로세스이다. 나한텐 너무 많이 듣고 자주 말해서 마치 잘 알고 있다고 착각이 들지만, 막상 누군가에게 설명하려고 하면 한마디도 나오지 않는 주제이다. 가볍게 그 개념이라도 공부해보고자 한다. 참고로 구글을 기준으로 학습하려고 하며, 해당 문서를 참조하려고 한다.
구글 검색의 작동 방식
구글 검색은 웹 크롤러라는 소프트웨어를 사용하는 완전히 자동화된 검색엔진이다. 웹 크롤러는 정기적으로 웹을 탐색하여 구글 색인(index)에 추가할 페이지를 찾는다. 실제로 구글 검색결과에 포함된 페이지의 대부분은 사이트 소유자가 사이트를 검색결과에 포함하기 위해 직접 제출한 것이 아닌, 구글 웹 크롤러가 웹을 탐색할 때 발견되어 자동으로 추가된 것이다.
구글 검색은 세 단계로 이루어진다. (모든 페이지에 적용되는 것은 아니다.)
1. 크롤링: 구글은 크롤러를 통해 인터넷에서 찾은 페이지로부터 텍스트, 이미지, 동영상을 다운로드 한다.
2. 색인 생성: 구글은 페이지의 텍스트, 이미지, 동영상 파일을 분석하고 구글 색인에 이 정보를 저장한다.
3. 검색결과 게재: 사용자가 구글에서 검색하면 구글에서는 사용자의 검색어와 관련된 정보를 반환한다.
각 단계를 조금 더 상세히 살펴보자
크롤링
모든 웹 페이지가 등록되는 중앙 레지스트리가 있는 것은 아니므로 구글은 계속해서 새 페이지와 업데이트된 페이지를 검색하여 파악된 페이지 목록에 추가해야 한다. 이 프로세스를 URL 검색이라고 한다. 구글이 방문한 적이 있는 페이지는 파악된 페이지 목록에 추가되어 있다. 다른 페이지는 파악된 페이지에서 새 페이지로 연결되는 링크를 따라갈 때 발견된다. 예를 들어 카테고리 페이지와 같은 허브 페이지는 새 블로그 게시물로 연결된다. 구글에서 크롤링할 수 있도록 사이트 소유자가 페이지 목록(사이트맵)을 제출해서 발견되는 페이지도 있다.
구글에서 페이지의 URL을 발견하면 내용을 확인하기 위해 페이지를 크롤링할 수 있다. 이 때 웹 페이지를 가져오는 프로그램을 Googlebot(크롤러)이라고 한다. 크롤러는 크롤링할 사이트와 크롤링 빈도, 각 사이트에서 가져올 페이지 수를 결정한다. 참고로 크롤러는 과부하를 피하기 위해 적절한 속도로 프로그래밍 되어있다.
브라우저에서 방문 페이지를 렌더링하는 방식과 유사하게 최신 버전의 크롬을 사용하여 페이지를 렌더링하고 자바스크립트를 실행한다. 웹사이트가 자바스크립트를 사용하여 페이지에 컨텐츠를 표시하는 경우가 많아 구글도 렌더링하지 않으면 컨텐츠를 보지 못할 수 있기 때문이다.
색인 생성
페이지가 크롤링되면 구글은 페이지의 내용을 파악한다. 이 단계를 색인 생성이라고 하며 <title> 요소 및 Alt 속성, 이미지 ,동영상 등 텍스트 컨텐츠 및 핵심 컨텐츠 태그와 속성을 처리하고 분석하는 작업이 포함된다.
색인 생성 과정 중에 구글은 페이지가 인터넷에 있는 다른 페이지와 중복되는지 아니면 표준 페이지인지 판단한다. 표준 페이지는 검색결과에 표시될 수 있는 페이지이다. 표준 페이지를 정하기 위해 구글은 인터넷에서 찾은 비슷한 컨텐츠의 페이지를 그룹으로 묶은 다음 (클러스터링) 이 그룹을 가장 잘 대표하는 페이지를 선택한다. 그룹의 나머지 페이지는 사용자가 휴대기기에서 검색하거나 이 클러스터의 특정 페이지를 찾는 경우와 같이 다양한 컨텍스트에서 게재 가능한 대체 버전이다.
표준 페이지와 해당 클러스터에 관해 수집한 정보는 수천 대의 컴퓨터에서 호스팅되는 대규모 데이터베이스에 저장될 수 있는데, 이를 Google 색인이라고 한다. 색인 생성은 보장되지 않으며 구글에서 처리하는 모든 페이지의 색인이 생성되는 것은 아니다.
검색결과 게재
사용자가 검색어를 입력하면 색인에서 일치하는 페이지를 검색한 다음 품질이 가장 높고 사용자의 검색어와 가장 관련성이 크다고 판단되는 결과를 반환한다. 관련성은 사용자의 위치와 언어, 기기(데스크탑 또는 휴대전화)와 같은 정보를 비롯한 수많은 요인으로 결정된다. 예를 들어 '자전거 수리점'을 검색하면 파리에 있는 사용자와 홍콩에 있는 사용자에게 서로 다른 결과가 표시된다.
이제 크롤러가 어떻게 크롤링을 하고 인덱싱을 하고 검색결과에 표시하는 지 알아봤다. 사실 SEO 기본 가이드에서 더 다양한 SEO 전략들을 말해주고 있지만 개발 외의 영역도 광범위하게 다루기에 Google 검색 시작하기: 개발자 가이드에서 제공하는 기본적인 내용들을 알아보자.
Google 검색 시작하기: 개발자 가이드
사이트가 Google에 표시되는 방법
구글이 사이트를 어떻게 인식되는지 확인하기 위해선 URL 검사 도구 또는 리치 결과 테스트에서 사이트를 테스트해볼 수 있다. 브라우저에 표시되는 모든 내용을 구글이 항상 확인하고 있는 것은 아니다. 크롤러에서 지원하지 않는 자바스크립트 기능을 사용하면 구글에서 컨텐츠를 인식하지 못할 수도 있다.
링크 확인
크롤러는 링크, 사이트맵, 리디렉션을 가져오고 파싱하여 URL 사이를 이동한다. 크롤러는 사이트에서 발견하는 모든 URL을 첫 번째이자 유일한 URL로 취급한다. 크롤러가 이 사이트의 모든 URL을 확인할 수 있게 하려면 다음을 따라야 한다.
1. 구글에서 크롤링할 수 있는 <a> 요소를 사용한다. 검색할 수 있는 다른 페이지의 링크에서 사이트의 모든 페이지가 연결될 수 있는지 확인한다. 참조된 링크에는 타겟 페이지와 관련된 텍스트나 이미지의 경우 Alt 속성이 포함되어야 한다.
2. 사이트맵을 빌드하고 제출하여 크롤러가 이 사이트를 더 지능적으로 크롤링하도록 한다.
3. HTML 페이지가 하나만 있는 자바스크립트 앱의 경우 각 화면 또는 개별 컨텐츠마다 URL이 있어야 한다.
자바스크립트 사용 방법 확인
구글은 자바스크립트를 실행하지만, 크롤러가 컨텐츠에 액세스하고 렌더링하는 방법을 수용하려면 페이지와 애플리케이션을 설계할 때 몇 가지 차이점과 제한사항을 고려해야 한다. 자바스크립트 검색엔진 최적화와 기본사항 또는 검색과 관련된 자바스크립트 문제를 해결하는 방법에 자세히 나와있다. 예를 들면 SPA에서 soft 404 오류를 방지하거나, 크롤러는 사용자 권한 요청(Camera API 등)을 거부할 것으로 예상하기 등이 있다.
컨텐츠 변경 시 구글에 알리기
구글에서 신규 또는 업데이트된 페이지를 빠르게 확인할 수 있도록 해야한다. 다수의 페이지를 요청하는 경우엔 사이트맵을 제출하고, 소수의 페이지를 요청하는 경우에는 URL 검사 도구를 사용하면 된다.
페이지에서 텍스트로 표현하기
크롤러는 텍스트로 표시되는 컨텐츠만 확인할 수 있다. 예를 들어 동영상의 텍스트는 크롤러가 보지 못한다. 다음을 따르면 구글 검색이 페이지 주제가 무엇인지 알 수 있도록 한다.
1. 시각적 컨텐츠가 텍스트 형식으로 표현되어야 한다. 예를 들어 각 이미지에 관한 텍스트 정보 없이 셔츠의 이미지 목록만 포함된 제품 카테고리 페이지는 적합하지 않다. 제품 카테고리 페이지는 각 이미지를 설명한 텍스트를 포함해야 한다.
2. 모든 페이지에는 구체적인 제목과 메타 설명이 있어야 한다. 고유한 제목과 메타 설명이 있으면 구글에서 페이지가 사용자와 얼마나 관련되어 있는지 표시하는 데 도움이 되므로 검색 트래픽이 증가할 수 있다.
3. 의미론적 HTML을 사용한다. 크롤러는 HTML, PDF 컨테츠, 이미지, 동영상의 색인을 생성하지만 플러그인이 필요한 컨텐츠(자바, Silverlight) 또는 캔버스에서 렌더링되는 컨텐츠의 색인은 생성하지 못한다. 가능하다면 플러그인을 사용하는 대신 컨텐츠에 의미론적 HTML 마크업을 사용해야 한다.
4. DOM에서 텍스트 콘텐츠에 엑세스할 수 있어야 한다. 예를 들어 CSS content 속성을 통해 추가된 컨텐츠는 DOM에 해당하지 않으므로 현재 구글 검색에서는 이를 무시한다. 장식용 컨텐츠에는 content 속성을 사용할 수 있으나 구글 검색에서는 이 컨텐츠의 색인을 생성하지 않을 수 있다.
컨텐츠의 다른 버전을 Google에 알리기
구글은 사이트 또는 컨텐츠의 여러 버전이 있음을 자동으로 인식하지 못한다. 예를 들면 모바일 및 데스크톱 버전 또는 사이트의 해외 버전은 인식하지 못한다. 구글이 사용자에게 올바른 버전을 제공할 수 있도록 다음을 따르면 된다.
1. 중복 URL 통합
Google이 보는 컨텐츠 제어
크롤러를 차단하는 몇 가지 방법이 있다.
1. 컨텐츠 액세스 권한을 로그인한 사용자로 제한 (예: 로그인 페이지 사용 또는 페이지를 비밀번호로 보호)
2. 크롤러가 페이지를 크롤링하지 못하게 하려면 robots.txt를 생성
컨텐츠가 구글 검색에 표시되지 않는 경우 표시되게 하려면 아래 단계를 따르면 된다.
1. URL 검사 도구를 사용하여 크롤러가 페이지에 액세스할 수 있는지 확인
2. robot.txt 파일을 테스트하여 의도치 않게 크롤러의 사이트 크롤링을 차단했는지 확인
3. meta 태그에서 noindex 규칙에 관한 HTML을 확인
사이트에 리치 결과 사용
리치 결과에는 사이트가 구글 검색결과에서 더 눈에 띄게 표시되는 데 도움이 되는 스타일, 이미지 또는 기타 상호작용 기능이 포함된다. 페이지 의미에 관한 명확한 단서와 함께 페이지의 구조화된 데이터를 제공하여 구글이 페이지를 더 잘 파악하도록 도움을 주고 구글 검색에서 페이지의 리치 결과가 표시되게 할 수 있다. 어떻게 시작해야 할지 모르겠다면 이 링크를 참고하면 된다.
일반적으로 사용되는 meta 태그들
1. 위에서도 언급했듯이 description은 굉장히 중요하다. 검색 결과의 스니펫에 사용되기도 한다. 참고로 title의 경우 구글 측에서 공식적으로 지원하지 않는다.
<meta
name="description"
content="페이지에 대한 설명."
/>
2. keywords의 경우도 사실 title과 동일하게 구글 측에서 공식적으로 지원하는 메타태그는 아니다. 하지만 자주 사용하는 태그이다.
<meta name="keywords" content="seo, 접근성" />
3. Open Graph. 줄여서 OG 라고 하는 태그들도 자주 사용된다. SNS 공유하기 시 보이는 제목과 설명, 그리고 이미지 등 다양한 태그가 있다.
// 사이트 제목
<meta name="og:title" content="사이트 제목" />
// 사이트에 대한 설명
<meta name="og:description" content="사이트에 대한 간략한 설명."/>
// 사이트 유형
<meta name="og:type" content="website" />
// 사이트의 url
<meta name="og:url" content="https://google.com" />
// 사이트 썸네일
<meta name="og:image" content="https://image-path.png"/>
Dynamic Rendering
크롤러는 JS를 실행시킨다는 점에서 CSR 방식도 SEO에 문제가 없어야 되는거 아닌가?라는 생각이 들었다. 하지만 구글 검색에서 자바스크립트는 분명히 한계가 있다. 또 구글을 제외한 다른 검색 엔진은 JS를 무시할 수도 있다.
이렇게 CSR이 SEO에 생기는 한계를 해결하기 위해 Dynamic Rendering을 할 수 있다. 하지만 확실히 알아야 할 점은 Dynamic Rendering은 장기적인 해결책이 아닌 임시방편으로 생각해야 한다는 점이다. 일반적으로 크롤러에 의해 지원되지 않는 JS 기능을 사용하는 경우, SSR이나 SSG가 더 적절한 해결법이라고 한다.
Dynamic Rendering의 동작 원리를 가볍게 정리하자면 실제 유저에게는 일반적인 CSR을 지원하는 반면, JS를 제대로 지원하지 않는 크롤러의 요청을 식별하면 렌더링 서버에서 정적 HTML 파일을 생성해 크롤러에게 전달해준다.
비유를 하자면(비유의 가장 큰 단점은 정확히 일치하지 않다는 점이다.)일반 유저에게는 CSR이지만 크롤러에게는 SSR과 유사한 렌더링 전략을 선택하게 된다.
Pre Rendering (with react-snap)
react-snap은 CSR 페이지를 정적 HTML 파일로 미리 렌더링하는 라이브러리다. 기존의 CSR로 작성된 앱을 SSG처럼 동작하게 만들어준다. 유저에게도 정적 생성된 HTML 파일을 보내주기 때문에 FP를 감소시킬 수 있다.
하지만 가장 큰 문제점이 있다. 비슷한 라이브러리인 react-snapshot이 완전히 deprecated가 되어서 react-snap을 사용하라고 공식문서에서 안내하고 있지만.. react-snap도 사실상 약 5년전이 마지막 업데이트였다. 별다른 대안을 제시하는 라이브러리도 없는듯하다.
이미 운영중인 CSR앱에 SEO를 해야하는 상황이 아니고서야, SEO가 중요한 새롭게 시작하는 프로젝트는 Next나 Gatsby와 같은 프레임워크를 사용하는게 좋지 않을까 싶다.