[Next.js] SEO 최적화 & 구글/네이버에 사이트 등록하기

Next.js로 만든 프로젝트에서 SEO 최적화를 작업해 보고 구글과 네이버에 사이트를 등록해 보았다.

 

 

1. Metadata 설정하기

Next.js 공식 문서를 참고하여 Metadata를 설정한다.

검색 결과에 포함되지 않길 원하거나, 페이지 내 포함된 다른 링크가 검색 결과에 포함되지 않게 하려면

해당 페이지 내 metadata.robots의 index, follow 옵션을 수정한다. 기본은 index, follow 모두 true이다.

 

필요에 따라 Caronical Tag 등을 추가한다.

 

 

- Open Graph 설정

 

Next.js에서는 Open Graph를 설정하지 않아도 기본적으로 title과 image를 설정해 준다. title의 경우 페이지의 title과 동일하게 설정되고 이미지는 페이지 내에 이미지가 있다면 첫 번째 이미지를 og:image로 설정한다. 이미지가 없다면 og:image도 없다.  description의 경우, openGraph 객체를 정의했지만 description 설정을 따로 하지 않은 경우 페이지의 description을 그대로 사용한다. openGraph 객체를 정의하지 않으면 기본 description ('여기를 눌러 링크를 확인하세요')가 나온다.

 

(app/layout.tsx)

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    template: '%s | 북북',
    default: '북북 | 도서 리뷰 및 추천 서비스',
  },
  description: '도서 리뷰를 작성하고 다음에 읽을 도서를 추천받아보세요.',
  openGraph: {
    siteName: '북북',
    images: {
      url: '/og-image.png',
    },
  },
  twitter: {
    title: '북북',
    images: {
      url: '/og-image.png',
    },
  },
}

 

Metadata 수정 후 카카오톡 공유를 했는데 og:image가 반영이 되지 않았다면 kakao developers 공유 디버거에서 캐시를 삭제 후 다시 시도하자

 

 

Open Graph 설정 전

Open Graph 설정 후

트위터 적용 후

 

 

 

 

 

2. Sitemap (사이트맵) 생성하기

Next.js 공식 문서를 참고하여 sitemap.xml 파일을 생성한다.

 

(app/sitemap.xml)

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://acme.com</loc>
    <changefreq>weekly</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://acme.com/about</loc>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://acme.com/blog</loc>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

 

 

사이트맵을 생성하고 나면 사이트맵 경로로 접속했을 때, 아래와 같이 xml 내용이 확인되어야 한다.

 

 

3. robots.txt 생성하기

(app/robots.txt)

User-Agent: *
Allow: /
Sitemap: https://.../sitemap.xml // 사이트맵 경로

 

 

 

 

 

4. 구글에 사이트 등록하기

구글 검색 콘솔에서 새로운 속성을 추가한다. 속성 유형에는 도메인과 URL 접두어가 있는데, URL 접두어로 선택한다.

 

 

 

소유권 확인을 위해 HTML 태그를 추가해주어야 한다.

 

 

 

content 값을 복사해서 metadata.verification.google에 추가해 준다.

(app/layout.tsx)

import type { Metadata } from 'next'

export const metadata: Metadata = {
   ...
  // <meta name="google-site-verification content="값" />으로 변환된다.
  verification: {
    google: '값',
  },
}

 

 

 

성공적으로 속성이 추가되면 색인생성 - Sitemaps에서 사이트맵을 추가한다.

 

색인이 생성될 때까지는 시간이 걸린다.

 

 

 

 

색인이 생성된 후 검색에 사이트가 노출되는지 확인하려면 구글에 site:example.com을 검색해 본다.

 

내 사이트가 구글에 노출된다는 걸 확인했다. 노출 자체는 몇 시간 만에 이루어졌다.

 

 

 

 

 

5. 네이버에 사이트 등록하기

 

네이버 Search Advisor에서 사이트 등록을 진행한다. URL을 입력하고 구글과 마찬가지로 verification meta 태그를 추가해 주면 된다.

 

(app/layout.tsx)

import type { Metadata } from 'next'

export const metadata: Metadata = {
  verification: {
    google: '값',
  },
  // <meta name="naver-site-verification" content="값" />으로 변환된다.
  other: {
    'naver-site-verification': '값',
  },
}

 

네이버는 구글과 달리 verifictation의 property로 등록되어있지 않기 때문에 직접 추가해주어야 한다. 

 

 

마찬가지로 사이트맵을 제출한다.

 

 

 

색인이 완료되면 네이버 검색에서 내 사이트를 확인할 수 있다.

 

 

네이버의 경우 구글보다 수집이 더 오래 걸렸다. 일주일 가까이 걸린 듯하다.

 

이렇게 구글과 네이버에 내 사이트를 등록했다. 특이한 이름이 아니다 보니 사이트 이름으로만 검색했을 때, 또는 도서 관련 키워드로만 검색했을 때는 검색 결과에 노출되지 않는다. 이를 개선하기 위해서는 추가적인 작업이 필요하다. 어떻게 할지는 더 찾아봐야겠지만 내 사이트가 검색 결과로 나온다니 뿌듯하다ㅎㅎ