목차
들어가며
안녕하세요, 브랜다즈 프론트엔드 개발자 마티입니다. 지난 2월, 네이버에서 "인스타겟" 검색 시 이미지 캐러셀이 노출되지 않는 SEO 문제를 겪었고, 7일 만에 apple-touch-icon.png 파일 추가로 해결했습니다. 이 경험을 통해 크롤러 동작과 SEO에 대한 이해 부족을 깨달았고, 더 나은 검색엔진 노출과 매출 증대를 위해 공부를 하여 포스팅까지 하게 되었습니다
구글 검색 작동 방식
구글 검색은 총 3가지 단계로 이루어집니다.,
1.
크롤링
2.
색인(Indexing)
3.
서빙
크롤링 - 웹을 탐색하는 로봇
새로운 웹페이지나 업데이트된 웹페이지를 찾고 수집하는 과정
인터넷에는 수 많은 웹사이트가 존재하며 발견되지 않는 웹사이트도 존재합니다.
만약 우리가 새롭게 웹사이트를 개설한다면 그 웹사이트는 아직 아무도 모르는 무인도와 같은 처지일 것입니다.
Googlebot이 새로운 페이지를 탐색하는 방법.
Googlebot은 이미 많은 양의 웹사이트 혹은 페이지(페이지 단위로 크롤링하기 때문에 페이지라고 하겠습니다.)를 크롤링 하고 있습니다. 그리고 기존에 크롤링하던 페이지도 계속 크롤링을 해야 하여 새로운 페이지를 찾을 여유가 없습니다.
그래서 새로운 페이지도 기존의 크롤링하는 웹사이트 중에서 새로운 웹사이트 링크를 발견하면 해당 웹사이트에 접속하여 크롤링 데이터베이스에 등록합니다.
그렇다면 모든 웹 페이지를 크롤링하는 걸까요?
•
요구되는 품질 임계값에 못미치는 사이트가 있다면 크롤링하지 않습니다.
•
크롤링을 차단하거나, 로그인을 해야하는 페이지
→ 공개적으로 액세스할 수 있는 URL만 크롤링합니다.
크롤링하는 속도는 어떨지, 웹사이트 속도가 SEO에 영향이 있을까요?
1.
크롤링 속도는 사이트마다 다릅니다. 이 속도는 Googlebot의 개별적 요청에 의해서
a.
사이트가 반응하는 속도
b.
전반적인 콘텐츠 품질
c.
잠재적 서버 오류와 신호.. 등등 에 따라 달라집니다.
2.
웹사이트 속도가 빠를 수록 크롤링 속도도 빨라지며 크롤링 속도는 SEO 점수의 증가를 노릴 수 있습니다.
색인(Indexing) – 페이지를 이해하고 분류하기
수집한 웹페이지의 내용을 정리하여 어떤 항목인지 분류하는 과정
색인은 웹페이지의 내용을 읽고 어떤 웹페이지인지 분류를 하는 과정입니다.
아래의 3가지 과정을 가지며 SEO 최적화가 잘 적용되어 있기로 유명한 Apple Store 사이트를 통해 알아보겠습니다.
1.
페이지 분석
2.
의미 분석 및 문제 해결
3.
신호 수집
1. 페이지 분석 (내용 파악)
Googlebot이 수집한(크롤링)한 페이지의 HTML 코드와 콘텐츠를 분석합니다.
•
<Title /> : <title>Apple Store 온라인</title>
•
<description /> : <meta description="Apple Store의 모든 매력이 온라인에서도 그대로… 혜택을 누리세요.">
•
<Img />
•
<h/> 태그
페이지 분석 결과
: 위와 같은 정보들을 토대로 색인 과정에서 “이건 애플 전자제품을 판매하는 쇼핑몰이네!” 하고 인식합니다.
이를 통해 img와 함께 설명문을 포함하거나 alt속성을 사용할 필요가 있으며 h1 태그와 h2태그를 해당 페이지의 맥락에 맞는 글귀를 사용하는 것이 좋다는 것을 알 수 있습니다.
2. 의미 분석 및 문제 해결
Googlebot은 웹페이지를 색인하기 위해 HTML 문서를 파싱할 때, 구조적 오류나 비표준적인 코드가 있어도 최대한 의미 있는 콘텐츠를 추출하려고 시도합니다.
자동 수정 예시
닫히지 않은 태그
<div>나 <p> 같은 블록 태그가 닫히지 않은 경우, 브라우저와 마찬가지로 Googlebot도 자동으로 닫히는 위치를 판단해 태그를 종료시킵니다. (자동으로 닫히는 경우 의도치않게 몇몇 태그가 크롤링되지 않을 수 있습니다.)
중첩이 잘못된 구조
<ul> 내부에 <div>가 잘못 들어가거나, <table> 안에 허용되지 않는 요소가 있으면 Googlebot은 HTML5 파서의 규칙에 따라 의미 있는 구조로 재조립합니다.
잘못된 속성 값
alt=" " 같은 값이 빠지거나, href="#" 등 실질적인 링크가 없는 경우에도 구조를 고려해 의미를 해석하려 합니다.
3. 신호(Signals) 수집
페이지 정보 수집으로 색인 여부 판단.
구글은 아래와 같은 신호(Signals) 들을 보고 표준 버전 페이지를 결정합니다.
•
rel="canonical" 태그 : 사이트에서 명시적으로 어떤 URL이 대표인지 알려주는 신호
•
URL 구조 : 어떤 URL이 더 깔끔하고 의미 있는지
•
콘텐츠의 위치와 품질 : 광고가 많거나 콘텐츠가 산만한 페이지는 선호되지 않음
•
페이지 링크 구조 : 외부/내부 링크가 많이 연결된 페이지를 선호
ex)
URL | 설명 |
https://www.apple.com/kr/macbook-pro/ | 한국어 페이지 |
https://www.apple.com/jp/macbook-pro/ | 일본어 페이지 |
https://www.apple.com/macbook-pro/ | 글로벌/기본 페이지 |
하지만 canonical 옵션만 사용한다고 하여 꼭 표준 버전 페이지가 되는 것은 아닙니다. 표준 버전페이지가 되는 기준은 중복 클러스터링에 의해 결정됩니다.
중복 클러스터링 : canonical을 결정
동일하거나 유사한 내용의 페이지가 여러 개 있으면, 하나만 대표로 표준 버전(canonical)으로 정해서 저장합니다. 보통 검색결과는 canonical 페이지가 노출됩니다.
ex) 상품 상세페이지가 여러 URL로 접근 가능하면, 그 중 가장 대표적인 URL만 색인에 남깁니다.
실제 예제
실제 URL | 설명 | Canonical 처리 |
https://smartstore.naver.com/sample-store/products/1234567890 | 대표 상품 상세 페이지 |  |
https://smartstore.naver.com/sample-store/products/1234567890?NaPm=ct%3Dxxxxx | 트래킹 파라미터 포함 | |
https://smartstore.naver.com/sample-store/products/1234567890?utm_source=instagram | 마케팅 채널 추적용 | |
https://smartstore.naver.com/sample-store/products/1234567890?ref=category | 카테고리 진입 경로 추적 | |
https://m.smartstore.naver.com/sample-store/products/1234567890 | 모바일 주소 | (보통 desktop과 canonical 공유) |
중복 클러스터링 요점
•
중복 클러스터링을 올바르게 적용하고 최대한 많은 상세페이지 혹은 상품을 검색엔진에 노출하기 위해서는 상품 ID를 query parameter를 사용하지 않고 URL에 적용되는 것이 중요합니다. 그 이유는 query parameter 는 데이터를 요청하는 용도이지 URL에 포함하여 인식하지 않기 때문입니다. 따라서 ?utm=, ?NaPm=, ?ref= 등 query parameter로 적용할 경우 중복 페이지로 인식하여 100개의 상품이 있더라도 1개의 대표페이지만 검색엔진에 노출될 수 있기 때문에 검색엔진 노출을 원한다면 페이지를 쿼리파라메터로 만들면 안될 것입니다.
•
https://smartstore.naver.com/상품ID_100가지 로 적용했다면 100개의 상품이 검색엔진에 노출될 수 있습니다. 그러나 각각의 상품이 중복페이지로 인식된다면 또 다시 중복페이지로 적용될 수 있기 때문에 각각 페이지에 canonical을 적용해주고 콘텐츠를 각 상품에 맞게 배치할 필요가 있습니다.
서빙(Serving)
검색 결과를 사용자에게 보여주는 과정
검색어 해석
먼저, 불필요한 단어(Stop Words) 를 제거합니다.
검색어: a nice photograph of the moon
→ 정제 후: nice photograph moon
→ a, of, the 같은 단어는 의미가 적다고 판단되어 제거됩니다.
하지만 모든 경우에 단어를 제거하지는 않습니다. 예를 들어:
검색어: The Statue of Liberty
→ of는 의미 전달에 중요하므로 제거되지 않습니다.
→ 또한 Statue of Liberty는 고유명사로 인식됩니다.
의미 확장
검색어가 동의어를 포함하도록 확장되기도 합니다.
검색어: car dealership
→ 구글은 이와 관련된 동의어인 auto dealership도 함께 검색합니다.
→ 이유는 car와 auto 모두 자동차를 의미하기 때문입니다.
이제 검색어를 이해했다면 색인으로 보낼 수 있습니다.
구문분석된 검색어를 바탕으로 순위를 매겨야 하는 대량의 검색 결과를 반환합니다
후기
query parameter를 사용한다면 페이지로 인식하지 못한다는 것을 이제서야 알았습니다.. 현재는 NextJS AppRouter를 사용하고 있으며 AppRouter가 제공해 주는 폴더 구조를 사용한다면 query parameter를 사용할 필요가 없는데 이것은 우리가 생각하지 않아도 어느 정도 SEO 최적화를 해주고 있는 것이 아닌가. 프레임워크는 이래서 사용하는 건가 싶기도 합니다.
새로운 웹사이트(새로운 URL)를 개발했을 때 해당 웹페이지는 외부에 노출되지 않는 한 검색엔진에도 노출되지 않는다는 것도 꽤나 충격적이었습니다.
SEO는 프런트엔드의 일인가? 공부할게 산더미인데 꼭 해야 할까? 이러한 생각들을 가지며 회피를 하고 있던 것을 반성하며 지금도 회피하고 있는 것들은 무엇인지 더 생각해 보게 됩니다.