[ChatGPT][SEO][NextJS] ChatGPT 부려먹기 시리즈 #3 - SEO 쉽게 작성하기

# ChatGPT를 사용해서 업무효율을 높힐 수 있는 경우를 정리하는 시리즈입니다

- ChatGPT는 이제 모르는 분이 없으실 것입니다. 하지만 주변에 물어보면 막상 실제 업무에 적극적으로 활용해서 사용하는 경우는 많지 않았습니다. 아무래도 챗봇의 형태다 보니 실제로 무엇을 할 수 있는지, 어떻게 원하는 내용을 얻을 수 있는지를 사용자가 알아야 하기 때문이라고 생각이 됩니다. 본 부려먹기 시리즈에서는 실제 제가 ChatGPT를 활용하는 사례와 원하는 결과를 얻는 과정을 정리하려고 합니다. 참고하셔서 업무 효율에 도움이 되셨으면 좋겠습니다

 

# ChatGPT를 사용한 NextJS SEO 작성하기

- ChatGPT가 4.0으로 넘어오면서, 웹 페이지를 탐색할 수 있는 기능이 추가되었습니다. 이 기능을 사용하기 위해서는 유료플랜을 사용해야 한다는 점은 주의하시길 바랍니다.  본 포스팅에서는 NextJS 13의 App Router에 SEO를 생성하는 과정을 소개하려고 합니다.

- 최근 NextJS에 AppRouter가 추가되면서, 기존의 PageRouter 방식으로부터 전환 되어가고 있습니다. 그러다보니, 기존에 개발한 사이트를 마이그레이션 하는 과정에서 SEO를 위한 metadata의 정의 방식이 변경 되었고, 이를 작성하려고 문서를 보니, 지원하는 변수가 아주 많았습니다. 이 변수들을 직접 다 확인해가면서, 정보를 채워 넣고 싶지는 않았기에 ChatGPT에게 이를 시켰고, 결과는 아주 마음에 들었습니다. 비슷한 다른 여러 상황에도 응용이 가능할 것으로 보이니, 방법을 기억해 두셨다가 활용하시길 바랍니다.

 

# 사용방법

- 사용방법은 아주 간단합니다. 우선 ChatGPT를 웹 브라우징이 가능하게 설정을 활성화 합니다.

- 그리고 아래와 같이 옵션을 사용하는 채팅 창을 열어줍니다.

- 다음과 같은 챗을 입력하여, GPT에게 문서 사이트를 알려 줌과 동시에 원하는 결과를 요청합니다. Browsing을 진행할 동안 시간이 걸리니 조금 기다려 주셔야 합니다.

- 브라우징이 완료된 후에 GPT가 작성해준 코드입니다. 모든 항목이 포함되었는지는 직접 확인해보지는 못했으나, type오류가 나지 않는 것으로 보아 잘못된 변수는 없는 것 같습니다.

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    template: '%s | My Website',
    default: 'My Website',
    absolute: 'My Website: Home Page',
  },
  description: 'This is the description of my website.',
  generator: 'Next.js',
  applicationName: 'My Website',
  referrer: 'origin-when-cross-origin',
  keywords: ['Next.js', 'React', 'JavaScript', 'My Website'],
  authors: [
    { name: 'John Doe' }, 
    { name: 'Jane Doe', url: 'https://mywebsite.com' },
  ],
  colorScheme: 'light',
  creator: 'John Doe',
  publisher: 'John Doe',
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  metadataBase: new URL('https://mywebsite.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'ko-KR': '/ko-KR',
    },
  },
  openGraph: {
    images: '/og-image.png',
  },
};

- 그리고 만약 자신이 과거에 작성해둔 유사한 데이터가 있다면, 그 값을 붙여넣고 이를 참고해서 위의 MetaData를 채워 넣도록 요청하시면 됩니다.

# 마치며

- 본 포스팅에서 소개한 방법은 ChatGPT가 최신 데이터를 학습하지 못한 상태라는 약점을 보완할 수 있는 좋은 방법이라고 생각합니다. 특히 개발 관련해서는 대부분의 문서들이 웹에 잘 정리가 되어 있고 예제 코드가 있기 때문에, 이 방법을 사용해서 쉽게 문서에 있는 기능들을 구현할 수 있을 것 같습니다.

---