내 사이트 URL 등록하기(w/ Next.js App Router)

열심히 사이트를 만들어 배포까지 했지만, 포털에 검색을 이리저리 해봐도 내 사이트가 나오지 않을 수 있습니다. 예를 들어 구글은 Google Search라는 검색 엔진이 Crawling(정보 수집) -> Indexing(자체 DB 저장) -> Serving(제공)의 과정을 거쳐 검색 결과를 표출합니다. 여기서 Crawling이 제대로 이뤄지지 않고 있는 것이기 때문에, 내가 사이트의 주인(소유권)임을 확인시킨 후 색인 생성 요청을 통해 사이트 정보를 주게 되면 빠르게 검색 결과에 포함될 수 있습니다.

이 글에선 Next.js(14+) App Router를 이용하여 구글과 네이버에 내가 만든 사이트를 등록하는 방법에 대해 소개합니다.

Google에 등록하기

먼저 구글에서의 사이트 등록 방법을 알아보겠습니다. Google Search Console(이하 구글 서치 콘솔)이라는 서비스를 이용합니다. 구글 서치 콘솔에 들어가 소유권 확인을 해줘야 하기 때문에 다음 순서를 따라줍니다.

속성 추가

URL 접두어 선택 후 사이트 URL 입력(예시: https://www.example.com)

HTML 태그를 선택하고 <meta>태그 안의 content 값(0kbD6...)을 복사

메타 데이터를 export 하는 곳에서 metadata.verification.google에 값 입력 후 배포

// app/layout.tsx
export const metadata: Metadata = {
  // Next가 <meta name="google-site-verification content="값" /> 을 만들어줍니다.
  verification: {
    google: '값',
  },
};

구글 서치 콘솔로 돌아가서 확인
URL 검사도구 이용과 sitemap을 제출 적용

소유권이 확인되었으면 문서에 따라 Crawling을 요청하면 마무리입니다.

URL 검사도구를 통해 한 번도 제출하지 않았는데 일일 할당량을 초과했다고 하고, 내일 다시 제출하라는 말을 믿고 다음 날 다시 제출하려는데 또 내일 오라며 실패하는 경우도 있었습니다. sitemap도 언제 읽어줄지 모릅니다. 모든 과정이 인내심 테스트이니 최소 며칠에서 최대 몇 주(...) 동안 차분히 기다려봅시다. 😭

네이버에 등록하기

사이트의 특성에 따라 구글보다 네이버에 노출되는 게 더 중요할 수 있습니다. 국내 검색 엔진 데이터를 다룬 인터넷 트렌드에 따르면, 네이버가 구글보다도 점유율이 앞서는 것을 볼 수 있습니다. 이번 섹션에서는 네이버에의 사이트 등록 방법에 대해 알아보겠습니다.

네이버 역시 소유권 확인을 하는 것으로 시작해보겠습니다.먼저 네이버 서치어드바이저 사이트 관리 탭으로 이동합니다.

URL 입력 후 사이트 등록(예시: https://www.example.com)

HTML 태그를 선택하고 <meta>태그 안의 content 값(7ea07...)을 복사

메타 데이터를 export 하는 곳에서 metadata.verification.other['naver-site-verification']에 값 입력 후 배포

구글은 Next.js에서 verifiaction 객체의 property로 제공해주지만 네이버는 그렇지 않기 때문에 meta 태그 name attribute의 value(naver-site-verification)를 직접 입력해주어야 합니다.

// app/layout.tsx
export const metadata: Metadata = {
  verification: {
    other: {
      'naver-site-verification': '값',
    },
  },
};

서치어드바이저로 돌아가서 소유확인 클릭
목록에서 사이트를 클릭한 후 요청 메뉴 중 웹 페이지 수집과 사이트맵 제출 적용

개인적으로 네이버는 구글에 비해 등록하기 쉬웠고, 수집 속도도 빨랐으며 사이드 간단 체크와 같은 도구도 제공하고 있어 더 편리했습니다!

보너스: 검색 결과 업그레이드 시키기

사이트 등록에서 한걸음 더 나아가 좀 더 눈에 띄고 유용한 정보들을 결과에 포함시킬 수 있다면 어떨까요? 예를 들어 구글은 Articles, Breadcrumb와 같은 feature를 지원하고(모든 feature 목록), 네이버 역시 유사한 마크업들을 지원합니다(네이버의 구조화된 데이터).

이러한 풍부한 검색 결과를 rich results라고 하며, Schema.org에서 만들어진 어휘(vocabulary)를 이용하여 Structured data(이하 구조화된 데이터)를 제공함으로써 구현할 수 있습니다. 이때 구글과 네이버 모두 script 태그에 들어가는 JSON-LD라는 포맷을 이용하길 권장합니다(자세한 내용은 링크 참조).

이러한 JSON-LD를 Next.js 프로젝트에 적용시키려면 page 혹은 layout 파일에서 script 태그를 이용하면 됩니다. 공식 문서에선 Product type을 예시로 들었고, 아래는 제 블로그 글 페이지에 대한 JSON-LD 예시입니다.

// page.tsx
export default function Blog({ params }: Props) {
  // 글 내용 fetch

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.metadata.title,
    datePublished: post.metadata.publishedAt,
    dateModified: post.metadata.publishedAt,
    description: post.metadata.summary,
    image: post.metadata.image
      ? `https://chogyejin-io.vercel.app${post.metadata.image}`
      : `https://chogyejin-io.vercel.app/og?title=${post.metadata.title}`,
    url: `https://chogyejin-io.vercel.app/blog/${post.slug}`,
    author: {
      '@type': 'Person',
      name: '조계진',
    },
  };

  return (
    <section>
      <script
        type="application/ld+json"
        suppressHydrationWarning
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd),
        }}
      />
      {/* 글 내용 */}
    </section>
  );
}

구글 리치 검색결과 테스트에서 발행한 글 중 하나인 2024 블로그 제작기를 테스트해봤을 때, 선택사항인 문제가 몇 개 발견되긴 했지만 BlogPosting type 관련 구조화된 데이터의 date 관련 property 덕분에 검색 결과가 풍부해졌습니다.

발행일: Mar 23, 2024

마치며

지금까지 구글, 네이버에서의 사이트 등록과 구조화된 데이터를 이용하여 rich results를 만드는 방법에 대해 알아봤습니다. 프론트엔드 개발자로서 좋은 UI/UX를 가진 화면을 만드는 것도 중요하지만, 코드단에서 관여할 수 있다면 검색 결과를 어떻게 전달하여 사용자로 하여금 더 많은 노출, 유입을 만들어내는가도 상황에 따라 중요한 역량이 될 수 있다고 생각합니다.

추가적으로 구글 서치 콘솔과 네이버 서치어드바이저는 색인 등록뿐만 아니라 여러 문제 해결 및 리포트를 제공하고 있어 사용자 분석에 요긴하게 사용될 수 있습니다. 아직 사이트를 직접 관리해본 경험이 없다면 재밌는 경험이 될 거라 생각됩니다. 감사합니다!