Colin's Blog
Vercel을 사용한 자바스크립트 애플리케이션의 검색 엔진 최적화(SEO) 구현하기

모던 웹 개발에서 검색 엔진 최적화 (Search Engine Optimization, SEO)는 매우 중요한 요소입니다. 하지만, 자바스크립트로 작성된 웹 애플리케이션은 기본적으로 검색 엔진에게 크롤링되지 않을 수 있습니다. 이는 애플리케이션의 콘텐츠가 동적으로 생성되거나, 검색 엔진 로봇이 자바스크립트 코드를 실행할 수 없기 때문입니다.

하지만, Vercel과 같은 정적 웹 호스팅 플랫폼을 사용하여 자바스크립트 애플리케이션의 SEO를 개선할 수 있습니다. Vercel은 사전 렌더링 (Pre-rendering)을 지원하므로, 검색 엔진에서 콘텐츠를 인덱싱할 수 있게 됩니다.

1. 동적 라우트 지원

Vercel은 동적 라우팅을 지원하여, 각 페이지에 대한 정적 HTML 파일을 생성할 수 있게 해줍니다. 이를 통해 검색 엔진이 페이지를 크롤링할 때 콘텐츠를 보다 잘 이해할 수 있게 됩니다. 동적 라우트를 구현하기 위해서는 Vercel의 설정 파일 (vercel.json 또는 now.json)에서 rewrites 속성을 사용하여 경로와 해당 페이지 컴포넌트를 매핑해야 합니다.

{
  "rewrites": [
    { "source": "/blog/(.*)", "destination": "/blog-post?slug=$1" }
  ]
}

위의 예시에서 /blog/:slug 경로로 접근하는 경우, 해당 페이지 컴포넌트인 BlogPost로 매핑되어 정적 HTML 파일을 생성할 수 있습니다.

2. 메타 태그 추가

검색 엔진이 웹 페이지의 내용을 이해하고 적절히 표시할 수 있도록 메타 태그를 추가하는 것이 중요합니다. Vercel을 사용하여 자바스크립트 애플리케이션을 배포할 때, 동적 라우트에 대한 메타 태그를 설정할 수 있습니다. 예를 들어, BlogPost 컴포넌트에서 각 블로그 게시물의 메타 데이터를 추출하고, 해당 메타 데이터를 기반으로 페이지의 메타 태그를 동적으로 생성할 수 있습니다.

import Head from 'next/head';

function BlogPost({ post }) {
  return (
    <div>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.description} />
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.description} />
        <meta property="og:image" content={post.image} />
      </Head>
      {/* 블로그 게시물의 내용 */}
    </div>
  );
}

위의 예시에서는 Head 컴포넌트를 사용하여 페이지의 메타 태그를 정의합니다. 이를 통해 검색 엔진이 페이지의 제목, 설명, 그리고 공유 이미지를 적절히 인식할 수 있습니다.

3. 사전 렌더링된 HTML 제공

Vercel은 자동으로 사전 렌더링된 HTML을 제공하므로, 검색 엔진이 애플리케이션의 콘텐츠를 크롤링할 수 있게 됩니다. 이를 위해서는 Vercel에 애플리케이션을 배포하고, Vercel의 CDN을 통해 정적 HTML 파일을 서빙하도록 설정해야 합니다.

vercel --prod

위의 명령어를 실행하면, Vercel은 애플리케이션의 정적 파일을 빌드하고 배포하여 사전 렌더링된 HTML을 제공합니다. 이를 통해 검색 엔진이 애플리케이션에 대한 콘텐츠를 보다 잘 인식할 수 있습니다.

검색 엔진 최적화에 대한 자세한 내용은 다음 자료를 참고하시기 바랍니다:

#SEO #Vercel

© 2018 Colin. All rights reserved.