[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (4) - SEO

페이지의 구조가 완성되고 Netlify에 배포가 되었다면, 이제 SEO를 적용해보자. 

- Netlify는 SignUp 이후 깃 레파지토리만 연결하면 자동으로 main 브랜치로부터 push시 배포를 적용해준다-

 

SEO는 Search Engine Optimization, 검색엔진 최적화의 줄임말로, 검색엔진이 콘텐츠를 이해하도록 돕고, 사용자가 사이트를 찾고, 검색엔진을 통해 사이트를 방문할지 여부를 결정하도록 돕는다.

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko\

SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google for Developers

https://nextjs.org/learn-pages-router/seo/introduction-to-seo

Learn Next.js | Next.js by Vercel - The React Framework

 

 

그럼 구글과 네이버에 노출될 수 있도록 적용해보려한다.

 

1. 메타데이터 (MetaData)

분명히 그 전에는 메타데이터를 헤더에 넣어줬어야 했는데 이제 키-밸류로 그냥 받아서 처리해준다. 이건 좀 맛있다.

https://nextjs.org/docs/app/building-your-application/optimizing/metadata

Optimizing: Metadata | Next.js

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

 

어차피 정적페이지니까 static 버전으로 가져왔다. 

metadata

적용한 모습을 보면 og, twitter까지 깔끔하게 적용되는 모습을 볼 수 있다.

 

2. robots.txt, sitemap.xml

로봇이 크롤링이 가능한 부분을 나누어서 표기하면 된다. 개인 정보가 들어있는 마이페이지 등에는 사용하면 안된다.

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/robots

Metadata Files: robots.txt | Next.js

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap

Metadata Files: sitemap.xml | Next.js

 

하나 놀란 점은 기존에는 public 폴더 내부에 robots.txt랑 sitemap.xml 파일을 같이 담아뒀었는데, 이번에는 app 폴더 안에 담아둬야 인식이 된다. 

* Next는 robots.ts를 robots.txt로 변환해준다. 같이 적으면 중복되었다고 표기되니 하나만 적자.

import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
    return {
        rules: {
            userAgent: '*',
            allow: '/',
        },
        sitemap: 'https://whosbax.netlify.app/sitemap.xml',
    }
}

 

3. icon

가장 어이없이 안됐던 부분.

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons

Metadata Files: favicon, icon, and apple-icon | Next.js

파일도 맞추고 위치도 맞췄는데 꼭 배포만 하면 안되길래 이상했다. Netlify가 문제인가 싶다가 구글링 중에 찾은 내용.

 

껄껄 이지하게 되버렸다. 하단은 원본 링크. 

https://github.com/vercel/next.js/discussions/50704

How to Add favicon.ico on Next.js 13 & Next.js 14 · vercel next.js · Discussion #50704

 

 

이제 구글 서치콘솔이랑 네이버 서치어드바이저에 직접 등록해보자.

 

1. 구글 서치콘솔

 

속성을 추가해준다. 하위 도메인 및 http, https 작업을 현재는 따로 추가하지 않을 예정이기 때문에 URL 접두어 속성으로 진행한다. 그리고 도메인 구매를 안했기 때문에 안된다.

 

여러 방법이 있는데 metadata 이용하는 김에 HTML 태그 반영해서 Netlify 로 배포 후 심사 요청하면 된다.

 

2. 네이버 서치어드바이저

네이버도 동일하다. 아니 더 쉬운 것 같기도하다. 그냥 하면 된다.

소유 확인도 동일한 방법. 소유확인이 되면 하단과 동일하게 나온다.

 

처리 결과에 따라 실 검색이 되냐 안되냐가 진행된다.

 

기존에 적용해뒀던 vercel로 한 결과도 잘 표현된다.

구글

네이버