Next.js 14 SEO(검색엔진 최적화) 도전기 / 웹 이력서

1. Why?

SSAFY가 끝나고 나서 취업을 위해 그동안 진행한 프로젝트를 정리해서 웹 이력서 사이트를 만들었다. Next.js 14와 MongoDB를 사용했고, Vercel을 통해서 배포했다. 

 

전체적인 UI는 이 분의 이력서를 참조했고, 내용은 내가 개발을 하면서 그 동안 고민한 부분과 알게 된 부분들을 보여주고자 했다. 이제 이렇게 열심히 만들었으니, 취업만 하면 된다. SEO를 통해서 내 이력서를 최대한 많은 사람이 볼 수 있도록 하게 하고싶다. 채용 담당자님들이 내 이력서를 볼 수 있도록!

---

2. SEO란?

먼저 SEO에 대해서 알아보자. SEO(Search Engine Optimization)란 검색엔진 최적화를 의미한다. 그렇다면 어떻게 해야 검색엔진 최적화를 할 수 있을까? Google의 검색엔진의 경우 아래와 같은 구조로 동작하고 있다.

검색엔진의 동작 과정

1. 검색 엔진의 봇들이 알고 있는 페이지에서 URL 링크가 걸리면 그 페이지를 탐색한다.
   • 뉴스 사이트를 생각해보자. 뉴스 카테고리에 새 뉴스 기사가 링크되면 그 페이지로 이동해서 탐색하는 것이다.
   • 탐색 후 크롤링을 진행하지 못하는(혹은 하지 않는) 경우도 있다.
     1. 사이트가 크롤링을 막아둔 경우
     2. 해당 페이지의 퀄리티가 떨어져, 색인(인덱스)가 요구하는 수준에 도달하지 못하는 경우
     3. 로그인을 해야만 컨텐츠에 접근할 수 있는 경우
2. 이렇게 찾아낸 웹 페이지를 다운로드하고, 다시 다운로드 할 수 있는 링크를 추출한다.
3. 가져온 링크로 페이지를 랜더링한다. 여기까지의 과정을 크롤링이라고 한다.
   • 이 과정을 통해 자바스크립트가 실행되어야만 보여지는 콘텐츠를 볼 수 있게 된다.
4. 랜더링된 페이지를 건내받으면, 검색 엔진이 해당 페이지를 분석하고 색인(인덱스)에 추가한다.
5. 사용자가 검색어를 입력하면, 검색엔진이 색인(인덱스)에서 검색어와 연관 랭킹순으로 페이지를 정렬해 사용자에게 전달한다.

---

3. How?

SEO를 위해서 해야할 일

위의 작업들이 원활하게 이뤄지도록 사이트를 구성하는 것이 SEO의 핵심이다. 이를 위해서 할 수 있는 방법으로는

1. 시멘틱 태그를 사용해 HTML 작성하기
   • <div>만 사용하기보다 <article>, <section>, <footer>와 같이 의미가 있는 시멘틱 태그를 사용하는 것이 좋다.
2. 적절한 metadata가 전달되도록 하기
3. SSR로 페이지를 구현하기
   • CSR의 경우에는 반드시 랜더링 과정을 거쳐야한다. 이는 서버에서 랜더링된 페이지 대비 몇 배 이상의 리소스가 필요한 작업이기에 SSR로 구현된 페이지보다 검색로봇의 인식률이 떨어질 수 있다.

등이 있다. 나는 이미 시멘틱 태그를 통해 HTML을 작성했고, 크롤러가 정보를 파악하기 어려운 CSR 대신 Next.js를 사용한 SSR로 페이지를 구현했다. 하지만 아직 metadata 작성과 크롤링 허용 등을 하지 않았기에 이번 글에서 진행해보려고 한다.

sitemap

sitemap은 검색 엔진 로봇에게 사이트의 구조를 제공하는 파일이다. 사실 내 이력서 페이지는 하나의 페이지로 이루어져있어 굳이 필요하진 않았지만, 연습할 겸 만들어봤다. Next.js 14 기준 src/app 폴더 안에 만들면 된다.

import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://web-portfolio-legitgoons.vercel.app/',
    },
  ];
}

사이트주소/sitemap.xml를 입력했을 때 위와 같은 화면이 출력되면 정상적으로 적용된 것이다.

robot

robots.txt는 검색 엔진 로봇에게 웹 사이트의 url별 접근 허용여부를 결정하는 파일이다. 이걸 막아놓으면 암만 SEO 개선을 해도 검색엔진에서 크롤링을 못하기에 아무 의미가 없다. sitemap과 같은 위치에 생성하면 된다.

import { MetadataRoute } from 'next';

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

사이트주소/robots.txt를 입력했을 때 위와 같은 화면이 출력되면 정상적으로 적용된 것이다. 이를 통해 검색엔진의 로봇에게 크롤링을 허용할 수 있다.

metadata

내 이력서는 Next.js 14버전을 사용했기 때문에, 이에 알맞은 방식을 사용해야한다. Next.js 13의 Page Router까지는 직접 태그를 통해서 메타데이터를 작성했지만, App Router 방식이 도입된 이후로는 Layout에 metadata 객체를 만들어서 적용하는 방식으로 바뀌었다.

export const metadata: Metadata = {
  title: '가치를 만드는 FE 개발자 이의찬입니다',
  description: '신입 프론트엔드 개발자 이의찬의 웹 이력서 사이트입니다.',
  generator: 'Next.js',
  applicationName: 'Frontend-Portfolio',
  keywords: [
    'Frontend',
    'Frontend developer',
    '프론트엔드',
    '프론트엔드 채용',
    'Next.js',
    'React',
    'JavaScript',
    'TypeScript',
  ],
  category: 'Portfolio',
  metadataBase: new URL('https://web-portfolio-legitgoons.vercel.app'),
  authors: { name: '이의찬', url: 'https://github.com/Legitgoons' },
  creator: '이의찬',
  publisher: '이의찬',
  formatDetection: {
    email: true,
    telephone: true,
  },
  openGraph: {
    title: '가치를 만드는 FE 개발자 이의찬입니다',
    description: '신입 프론트엔드 개발자 이의찬의 웹 이력서 사이트입니다.',
    url: 'https://web-portfolio-legitgoons.vercel.app',
    siteName: 'Frontend-Portfolio',
    images: [
      {
        url: 'https://i.ibb.co/TL6q9vW/Kakao-Talk-20230522-210754586.png',
        width: 583,
        height: 750,
        alt: 'Profile picture',
      },
    ],
    locale: 'ko_KR',
    type: 'website',
  },
  robots: {
    index: true,
    follow: true,
    nocache: true,
    googleBot: {
      index: true,
      follow: true,
      noimageindex: true,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  verification: {
    google: '인증코드',
    other: {
      'naver-site-verification': '인증코드',
    },
  },
};

전체 metadata는 위와 같이 작성했고, 중요한 부분들만 설명하자면 다음과 같다.

title & description

• title : 사이트의 제목
• desciption : 내용을 설명하는 부분

opengraph

opengraph를 통해서 다른 사이트에서 보여지는 부분을 설정할 수 있다.

설정 전에는 위 같이 이미지와 desciption이 존재하지 않지만

가치를 만드는 FE 개발자 이의찬입니다

설정 후에는 이렇게 이미지와 desciption이 추가된 모습을 볼 수 있다.

verification

검색 사이트에서 해당 사이트의 소유자가 맞는지, 도메인 소유권을 확인하기 위해 필요한 부분이다. 이 부분도 반드시 해야만 검색엔진의 로봇에게 크롤링을 허용할 수 있다.

위와 같이 google과 naver 두 사이트에서 메타 태그를 가져와 등록했고, 등록 결과 metadata가 정상적으로 등록된 것을 볼 수 있다!

---

4. 래퍼런스

https://nextjs.org/docs/app/api-reference/functions/generate-metadata

Functions: generateMetadata | Next.js

https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag?hl=ko

로봇 메타 태그 사양 | Google 검색 센터  |  문서  |  Google for Developers

https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics?hl=ko

자바스크립트 검색엔진 최적화의 기본사항 이해하기 | Google 검색 센터  |  문서  |  Google for Deve

https://searchadvisor.naver.com/guide

웹마스터 가이드 - 네이버 서치어드바이저

https://yozm.wishket.com/magazine/detail/2324/

Next.js 14 업데이트 살펴보기 | 요즘IT

https://yunjeoming.dev/blog/set-seo

Next.js 블로그에 SEO 적용하기

https://developers.facebook.com/docs/sharing/webmasters?locale=ko_KR

웹 마스터 - 공유 - 문서 - Meta for Developers