[javascript] Vue.js에서의 SEO 최적화 방법

01 Dec 2023

javascript

소개

Vue.js는 인기있는 자바스크립트 프레임워크이지만, 기본적으로는 클라이언트 사이드 렌더링을 사용하여 검색 엔진 최적화(SEO)에 적합하지 않습니다. 그러나 Vue.js를 사용하여 개발하는 경우에도 SEO를 고려해야 할 수도 있습니다. 이 블로그 포스트에서는 Vue.js 프로젝트에서 SEO를 최적화하기 위한 몇 가지 방법을 소개하겠습니다.

1. 서버 사이드 렌더링 (Server-Side Rendering, SSR)

서버 사이드 렌더링은 Vue.js 애플리케이션을 서버에서 사전에 렌더링하여 HTML을 동적으로 생성하는 방법입니다. 이렇게 하면 검색 엔진이 애플리케이션의 내용을 보다 잘 이해할 수 있게 됩니다. Vue.js에서 SSR을 구현하기 위해서는 Vue 서버 렌더러를 사용해야 합니다. 이 방법은 Vue.js 애플리케이션의 초기 로딩 속도를 향상시키는 추가적인 이점도 제공합니다.

const Vue = require('vue');
const server = require('express')();
const renderer = require('vue-server-renderer').createRenderer();

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>Hello World! 현재 URL: {{ url }}</div>`
  });

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).send('Internal Server Error');
    } else {
      res.send(`
        <!DOCTYPE html>
        <html>
          <head><title>Vue.js SSR 예제</title></head>
          <body>${html}</body>
        </html>
      `);
    }
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

2. 메타 태그 활용

Vue.js 애플리케이션을 SSR하지 않고도 SEO를 개선하기 위해서는 메타 태그를 적절하게 활용해야 합니다. 특히 title과 description 메타 태그는 검색 엔진에서 웹 페이지를 색인하는 데 중요한 역할을 합니다. Vue.js 애플리케이션에서는 vue-meta 라이브러리를 사용하여 간단하게 메타 태그를 관리할 수 있습니다.

import Vue from 'vue';
import Meta from 'vue-meta';

Vue.use(Meta);

new Vue({
  metaInfo: {
    title: 'Vue.js 애플리케이션',
    meta: [
      { name: 'description', content: 'SEO를 위한 설명' }
    ]
  }
});

3. 동적 라우팅 대응

Vue.js의 라우터를 사용하는 경우에는 동적으로 콘텐츠를 로드하는 데 주의해야 합니다. 검색 엔진은 동적으로 생성된 콘텐츠를 크롤링하지 못할 수 있으므로, 동적 라우트에 대한 대응 방법을 고려해야 합니다. Vue.js에서는 beforeRouteUpdate 훅을 사용하여 콘텐츠를 사전 렌더링하고 asyncData 메서드를 사용하여 데이터를 사전에 가져와서 렌더링할 수 있습니다.

new Vue({
  router,
  methods: {
    fetchData() {
      // 데이터를 가져오는 비동기 처리 로직
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.fetchData().then(() => {
      next();
    });
  },
  created() {
    this.fetchData();
  }
});

4. 사이트맵 제출

검색 엔진은 웹 사이트의 사이트맵을 이용하여 콘텐츠를 쉽게 찾을 수 있습니다. Vue.js 애플리케이션의 사이트맵은 수동으로 생성하거나, 동적으로 생성하여 검색 엔진에 제출할 수 있습니다. 사이트맵을 생성하고 제출하는 방법은 각 검색 엔진의 가이드라인을 참고해야 합니다.

5. 유저 인터랙션 구현

검색 엔진은 사용자가 인터랙션을 할 수 있는 콘텐츠를 선호합니다. Vue.js에서 SPA(Single Page Application)를 개발하는 경우에는 유저 인터랙션을 고려하여 콘텐츠를 제공해야 합니다. 무한 스크롤, 로드 더 버튼, 콘텐츠 필터링 등의 기능을 구현하여 사용자와의 인터랙션을 강화할 수 있습니다.

결론

Vue.js에서 SEO를 최적화하는 것은 도전적인 작업일 수 있지만, 위에서 소개한 방법들을 적용하면 검색 엔진에서 더 잘 인식될 수 있습니다. SSR, 메타 태그, 동적 라우팅 대응, 사이트맵 제출 및 유저 인터랙션 구현을 통해 Vue.js 애플리케이션을 SEO에 더욱 적합하게 만들 수 있습니다.

더 자세한 정보는 다음 자료를 참고해보세요: