[javascript] Storybook을 사용한 자바스크립트 앱의 검색 엔진 최적화 (SEO) 방법

27 Nov 2023

javascript

SEO

1. 소개

검색 엔진 최적화(Search Engine Optimization, SEO)는 웹 페이지가 검색 결과에서 상위에 나타나도록 하는 기술입니다. 이는 여러가지 방법과 개념을 활용하여 구현될 수 있습니다. 본 글에서는 자바스크립트 앱의 SEO를 개선하기 위해 Storybook을 활용하는 방법을 알아보겠습니다.

2. Storybook 소개

Storybook은 컴포넌트 기반 UI 개발 환경으로, 앱의 컴포넌트를 개별적으로 테스트하고 문서화하는데 사용됩니다. Storybook은 React, Vue, Angular 등 다양한 프론트엔드 프레임워크와 호환되며, 개발자들이 컴포넌트를 더 쉽게 관리할 수 있도록 도와줍니다.

3. Storybook을 사용한 SEO 개선 방법

3.1 정적 HTML 생성

일반적으로 자바스크립트로 구현된 앱은 검색 엔진 크롤러에 의해 렌더링되기 어렵습니다. 하지만 Storybook을 사용하여 컴포넌트를 개별적으로 테스트하고 문서화함으로써 정적 HTML 파일을 생성할 수 있습니다. 이는 검색 엔진 크롤러에게 앱의 내용을 노출시킬 수 있도록 도와줍니다.

3.2 메타 태그 추가

검색 엔진은 웹 페이지의 메타 태그를 활용하여 페이지의 내용과 관련된 정보를 수집합니다. Storybook에서는 각각의 스토리에 관련된 메타 태그를 추가함으로써 검색 엔진에게 앱의 내용을 더욱 정확하게 전달할 수 있습니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <meta name="description" content="My App is an awesome JavaScript application.">
</head>
<body>
  <div id="root"></div>
</body>
</html>

3.3 URL 설계

Storybook의 스토리는 URL로 접근할 수 있습니다. 이를 활용하여 각각의 스토리마다 고유한 URL을 설정함으로써 검색 엔진은 각각의 컴포넌트를 개별적인 페이지로 인식할 수 있습니다.

import { storiesOf } from '@storybook/react';

storiesOf('Button', module)
  .add('Default', () => <Button label="Click me!" />)
  .add('Primary', () => <Button label="Submit" primary />)
  .add('Danger', () => <Button label="Delete" danger />);

3.4 링크 추가

Storybook에서 각각의 스토리는 다른 스토리와 링크를 추가할 수 있습니다. 이를 활용하여 관련된 컴포넌트들 간에 서로 링크를 설정함으로써 검색 엔진은 앱의 내용을 더욱 연결된 구조로 이해할 수 있습니다.

import { storiesOf } from '@storybook/react';

storiesOf('Button', module)
  .add('Default', () => <Button label="Click me!" />)
  .add('Primary', () => <Button label="Submit" primary />)
  .add('Danger', () => <Button label="Delete" danger />)

storiesOf('Form', module)
  .add('Login', () => <LoginForm />)
  .add('Registration', () => <RegistrationForm />);

4. 결론

Storybook을 사용하여 자바스크립트 앱의 SEO를 개선하는 방법을 알아보았습니다. 정적 HTML 생성, 메타 태그 추가, URL 설계, 링크 추가 등의 방법을 활용하여 검색 엔진 최적화를 함으로써 앱이 검색 결과에서 높은 순위에 노출될 수 있도록 할 수 있습니다. Storybook은 개발자들에게 컴포넌트 관리를 편리하게 해주는 데에도 도움을 주는 유용한 도구입니다.