페이지 색인이 생성되지 않음: 사용자가 선택한 표준이 없는 중복 페이지

Petefolio

함께 성장하는 공간, Petefolio

https://petefolio.xyz/articles/BMQj9L0BG06c6mTN4U8X

위 블로그의 글을 구글 서치 콘솔에 등록하는 과정에서 '페이지 색인이 생성되지 않음: 사용자가 선택한 표준이 없는 중복 페이지' 라는 오류를 발견했습니다. 이 오류는 왜 발생할까요?

구글 공식 문서에 따르면, 위 문제는 구글 측에서 해당 문서가 다른 페이지와 중복되었다고 판단하여 등록을 거절한 것이었습니다. 위 가이드라인대로 URL 검사를 통해 Google에서 선택한 표준 URL을 확인해보니 블로그의 메인인 https://petefolio.xyz/ 와 같은 페이지라고 판단한 것으로 보였습니다.

한 편, 정상적으로 등록된 글에는 Google에서 선택한 표준 URL에 '검사된 URL'이라는 값이 보여집니다. 

두 글은 서로 충분히 다른 주제에 대해 작성되었는데 하나는 정상적으로 등록되고 하나는 실패한 이유가 무엇일까요? 실은 잘 모르겠습니다.

표준 URL 지정하기

표준 URL이란 여러 개의 유사하거나 동일한 컨텐츠를 가진 페이지에 대해서 검색 엔진이 등록할 대표 URL을 의미합니다.

만약 example.com/page?sort=asc, example.com/page?sort=desc라는 URL이 있고, 이들로 리다이렉트되는 example.com/page-redirect라는 URL이 있다고 가정할 때, 구글은 이들을 모두 유사한 컨텐츠로 판단하고 대표 URL을 example.com/page로 지정하여 검색 엔진을 최적화 합니다.

웹사이트 소유자 입장에서도 이러한 대표 URL을 지정하는 것은 유리하게 작용합니다. 웹사이트 소유자는 표준 URL을 사용함으로써 어떤 URL이 검색결과에서 사람들에게 표시될지 결정할 수 있고, 단일 콘텐츠를 단일 URL로 노출함으로써 analytics를 비롯한 측정 및 추적을 하는 기능에도 단순화의 효과를 누릴 수 있습니다.

표준 URL은 기본적으로 Google에서 판단하여 지정해주지만, 웹사이트 소유자 측에서 이를 직접 지정할 수도 있습니다. 저의 경우 구글의 판단한 내역에 대한 수정을 하기 위해, 표준 URL을 직접 지정하여 색인 생성에 실패한 글에 대해 다시금 등록될 수 있도록 시도해 보았습니다.

canonical

rel="canonical" 및 다른 방법으로 표준 URL을 지정하는 방법 | Google 검색 센터  |  문서  |  Google for Developers

사이트에 중복 콘텐츠가 있는 경우 Google은 표준 URL을 선택합니다. 표준 URL 및 중복 URL 통합 방법을 자세히 알아보세요.

https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls?sjid=14630990463368030615-AP&visit_id=638609494103557670-1613014482&rd=1&hl=ko

표준 URL은 여러가지 방법으로 등록할 수 있습니다. 자세한 내용은 위 문서에 있으며, 저는 가장 간단한 <link> 태그를 추가하는 방식으로 URL 표준화를 진행하겠습니다.

하지만 link 태그를 javascript를 통해 삽입하는 것은 크롤링에 불리합니다. 현대의 크롤러들은 javascript를 실행 한 뒤 정보를 읽기도 하지만, 보다 다양한 크롤러에 link 태그를 인식시키려면 link 태그가 정적 파일에 포함되어있는 것이 유리합니다. 저는 현재 구글 검색 엔진에만 페이지를 등록하고 있고, 구글의 크롤러는 javascript를 실행시켜 데이터를 읽으므로, 실행환경에서 태그를 넣는 방식으로만 구현하도록 하겠습니다.

react-helmet은 React component 방식으로 html 문서에 태그를 추가할 수 있도록 도와주는 라이브러리 입니다. 

npm i react-helmet @types/react-helmet

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

위와 같이 Helmet 컴포넌트를 가져와 내부에 canonical 링크 태그를 넣어 사용할 수 있습니다. 제 경우는 href가 동적으로 바뀌어야 하므로, 게시글 페이지 컴포넌트에서 Helmet 태그를 사용한 뒤 href에 window.location.href 값을 넣어주었습니다.

배포 이후 URL 검사를 수행하면 사용자가 선언한 표준 URL에 해당 페이지의 주소가 들어가 있는 것을 확인할 수 있습니다. 이 과정을 통해 구글이 오인한 표준 URL을 알맞게 정정한 이후, 인덱스 재 생성을 요청하여 정상적으로 검색엔진에 글을 등록할 수 있었습니다.