[javascript] Parcel에서 SEO를 고려한 개발 방법은?

22 Nov 2023

javascript

Server-side rendering (SSR): SPA에서는 클라이언트 측에서 HTML을 생성하기 때문에 검색 엔진은 웹 페이지의 콘텐츠를 크롤링하기 어렵습니다. 따라서 SEO를 고려한다면 서버 측에서 HTML을 렌더링하는 SSR을 고려해야 합니다. Parcel은 SSR을 쉽게 적용할 수 있도록 지원하고 있습니다. Parcel과 함께 사용할 수 있는 프레임워크로는 React, Vue, Next.js 등이 있습니다.
메타 태그 추가: SEO에 중요한 역할을 하는 메타 태그를 적절하게 사용해야 합니다. Parcel에서는 HTML 파일을 처리할 때 메타 태그를 쉽게 추가할 수 있는 기능을 제공합니다. 예를 들어, index.html 파일에서 다음과 같이 메타 태그를 추가할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
    <meta name="description" content="This is my website">
</head>
<body>
    <div id="app"></div>
    <script src="index.js"></script>
</body>
</html>

이미지 및 링크 태그 처리: SEO에 중요한 이미지 및 링크 태그를 올바르게 처리해야 합니다. Parcel은 이미지를 번들링하고 링크를 해결하는 데 도움을 주는 기능을 제공합니다.

이외에도 SEO를 고려한 개발을 위해 robots.txt 파일, 사이트맵 등 다양한 기능을 Parcel과 함께 사용할 수 있습니다. Parcel 공식 문서를 참조하면 더 자세한 정보를 얻을 수 있습니다.

참고 자료:

Parcel 공식 문서: https://parceljs.org/
React SSR 가이드: https://reactjs.org/docs/react-dom-server.html
Vue SSR 가이드: https://ssr.vuejs.org/
Next.js: https://nextjs.org/