Prerendering 검색 엔진 노출

SPA(Single Page App)로 개발된 사이트의 문제점은 사용자에게 노출 되길 원하는 컨텐츠를 검색엔진이 가져가지 못한다는 점이다. SPA는 서버에서 요청한 HTML을 브라우저에서 자바스크립트로 동작 시키는데, 보통 검색엔진은 자바스크립트를 실행하지 않는다는 것이다. 대안으로 SSR(Server Side Rendering)로 개발 하기도 하지만 소수의 정적 페이지만 검색 엔진에 노출 시키면 되는 경우 Prerendering으로 간단하게 해결 할 수 있다.

prerender-spa-plugin

Prerendering은 빌드 과정에서 지정한 특정 페이지를 미리 렌더링 해서 저장하는 방식으로 prerender-spa-plugin 을 설치하고 webpack.config.js 에 설정만 추가 하면 된다.

npm install --save-dev prerender-spa-plugin

webpack.config.js

const path = require('path')
const PrerenderSpaPlugin = require('prerender-spa-plugin')

const productionPlugins = [
  new PrerenderSpaPlugin({
    staticDir: path.join(__dirname, 'dist'),
    routes: [ // 필요한 페이지를 추가합니다.
        '/',
        '/page1/',
        '/page2/',
    ],
    renderer: new PrerenderSpaPlugin.PuppeteerRenderer({
      renderAfterElementExists: '#app'
    }),
  }),
]

module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(...productionPlugins)
    }
  },
}

routes 에 필요한 페이지를 작성 한다. 그리고 빌드를 실행 하면 라우터에 작성한 페이지의 폴더와 index.html 파일이 만들어진다.

// dist/
...
page2/index.html
page1/index.html
index.html

사이트 업데이트 후 페이지 소스보기를 통해서 검색 엔진에 노출 하고자 하는 컨테츠를 확인 할 수 있다.

Prerendering 했음에도 검색엔진이 컨텐츠를 가져 가지 못하는 경우

라우터 설정 문제

라우터에는 해시(hash) 모드와 히스토리(history) 모드가 있다. 해시 모드는 URL에 #이 포함되어 있는데 자바스크립트를 동작 시켜 라우팅 하고, 히스토리 모드는 #이 없고 HTML5 History API를 사용한다. 검색엔진은 보통 자바스크립트를 실행하지 않기에 히스토리 모드를 사용하면 되겠다.

Trailing Slash

http://.../page1 -> http://.../page1/