리액트 개발자를 위한 SEO 기초

cansweep·2023년 3월 18일

원문 : Technical SEO Basics for React Developers

많은 개발자들이, 심지어 경험이 많은 개발자들도 검색 엔진 최적화(SEO, Search Engine Optimization)를 알지 못하는 경우가 많습니다. SEO가 눈에 띄지 않기 때문에 무시해 버리기 쉽지만 구글은 종종 기업의 가장 중요한 트래픽 소스가 될 수 있기 때문에 SEO의 기술적인 측면을 관리하는 것이 당신의 일이며 모든 웹 개발자들은 최소한의 SEO 기본은 반드시 알아야 합니다.

다음은 웹사이트를 런칭하기 이전에 체크해야 할 12가지의 SEO 체크리스트입니다.

1. Add Title and Description

Title과 Description은 사용자가 검색 결과에서 가장 먼저 보게되는 것입니다.

React App 이라고 되어있는 링크는 아무도 클릭하지 않을 것이며, 아무도 링크를 클릭하지 않으면 클릭률이 떨어지고 Google 순위가 낮아지게 되는 악순환으로 이어집니다.
그렇기에 웹사이트를 설명할 수 있는 Title과 Description은 SEO에 필수적입니다.

Title과 Description은 간단하게 추가할 수 있습니다.

HTML 파일(ex. index.html)의 <head> 태그 안에 <title>태그를 추가합니다.
마찬가지로 <head> 태그 안에 <meta name="description" content="..."> 태그를 추가합니다. 이때 content가 페이지의 설명이 됩니다.

<html>
  <head>
    <meta
      name="description"
      content="Daily web development tips and guides for JavaScript..."
    />
    <title>Code Frontend - Become a Better Web Developer</title>
  </head>
  <body>
    ...
  </body>
</html>

위 예제의 경우 React App의 모든 페이지에 대한 범용적인 제목을 설정하지만 각각의 페이지마다 커스텀할 수도 있습니다.
커스텀을 해야 할 경우 react-helmet 라이브러리를 참고하는 것을 추천합니다.

권장사항

잘리지 않도록 Title은 75자 미만으로 만들어야 합니다. 안전하게 60 정도로 설정하는 것을 추천합니다.
Description은 160자 미만으로 만들어야 합니다.

궁극적으로 Google이 검색 결과에 표시될 내용을 결정하므로 당신이 적은 Title, Description과 검색 결과에 표시된 내용이 다를 수 있습니다. Google은 단지 이를 권장사항으로만 간주합니다.

2. Add Open Graph Meta Tags

OG 태그는 검색 결과에 직접적으로 영향을 주지는 않지만 소셜 미디어의 링크 모양에 영향을 주기 때문에 Google 순위와 트래픽에 영향을 줄 수 있습니다.

Facebook, Twitter, Linkedin 등은 사이트의 링크를 공유할 때 title, image, description을 자동으로 추가합니다.

<html>
  <head>
    <meta property="og:title" content="Code Frontend - Become a Better Web Developer">
    <meta property="og:image" content="https://codefrontend.com/content/images/2022/07/code-frontend-social-image-1.png">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://codefrontend.com/">
  </head>
  ...
</html>

<head> 태그 안에 property="og:<property>"와 content="value" 속성을 가진 <meta> 태그를 추가합니다.

The Open Graph protocol에서 설명하는 필수 속성은 아래와 같습니다.

op:title : 페이지의 제목
op:type : 유형, website
op:image : 웹사이트 링크의 이미지 URL
op:url : 표준 URL. 일반적으로 다른 페이지의 사본이 아닌 경우 해당 페이지의 링크는 원본에 대한 링크를 넣습니다.

3. Add Structured Data Markup

레시피, 리뷰, 인터넷 상점 사이트는 모두 구조화된 마크업을 사용해야 합니다. 이는 가격, 평점, 또 다른 메타데이터 등을 덧붙여 검색 결과를 좀 더 자세하게 만듭니다.

이러한 마크업은 직접 작성하지 않아도 됩니다.
https://www.google.com/webmasters/markup-helper/u/0/ 나 react-helmet 라이브러리에서 동적으로 생성할 수 있습니다.

중요한 것은 Schema를 <script type="application/ld+json"> 태그로 감싸는 것입니다.

<Helmet>
  <script type="application/ld+json">
  {JSON.stringify({
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "Party Coffee Cake",
    "author": {
      "@type": "Person",
      "name": "Mary Stone"
    },
    "datePublished": "2018-03-10",
    "description": "This coffee cake is awesome and perfect for parties.",
    "prepTime": "PT20M"
  })}
  </script>
<Helmet>

자세한 내용은 구글 문서에서 확인할 수 있습니다.

4. Add Sitemap and Robots.txt

사이트맵과 Robots.txt와 같은 파일들은 구글이 당신의 웹사이트를 좀 더 쉽게 크롤링할 수 있도록 도와줍니다.

사이트맵은 웹 사이트 내의 링크들의 우선 순위를 구글이 알 수 있도록 하고 robots.txt는 구글이 중요하지 않은 리소스들을 방문하거나 색인을 생성하는 것을 하지 못하도록 막을 수 있습니다.

이때 사이트맵과 robots.txt는 모두 도메인의 최상단에서 호스팅되어야 합니다.
(예시 : https://www.google.com/sitemap.xml)

Sitemap

사이트맵의 가장 간단한 버전은 단순히 사용 가능한 url만 존재하는 텍스트 파일입니다.
그러나 유용한 메타데이터를 추가하기 위해 xml 파일을 사용하는 것이 일반적입니다.

사이트맵은 수동으로 생성할 수도 있지만 https://www.xml-sitemaps.com 와 같은 링크를 통해 만들 수도 있습니다.

동적 사이트맵의 경우 사이트맵을 생성하는 서버 엔드포인트를 생성하거나 빌드 시 만들도록 할 수 있습니다.

자세한 내용은 구글 문서에서 확인할 수 있습니다.

5. Ensure Grate Performance

구글은 로딩 속도와 사용자 경험이 좋은 웹사이트를 좋아합니다.

https://web.dev/measure/ 에서 검사를 실행하고 개선해야 할 사항들을 찾을 수 있습니다.
페이지 로드 시간은 가장 중요하게 고려해야 할 요소입니다.

리액트 개발자라면 다음 사항들을 참고하세요.

코드 분할(Code-splitting)으로 초기 페이지 로드 시간을 향상시킬 수 있습니다.
빌드 타임에 이미지를 최적화하고 런타임에 lazy-loading으로 이미지를 불러옵니다.
중요하지 않은 스크립트는 defer나 async 속성을 사용합니다.
react 코드를 서버에서 사전 렌더링합니다.
구글은 AMP를 좋아하는 것 같습니다.

Next.js와 같은 React 프레임워크를 사용하는 경우 이러한 성능 최적화들이 대부분 처리될 것입니다.

6. Server-side Render

SPA(Single-page Application)은 초기에는 빈 HTML 페이지를 전송하고 브라우저에서 JS를 사용해 페이지를 생성하기 때문에 SEO에 좋지 않습니다.

스크립트가 실행되기 전 보통 리액트 앱의 HTML 코드는 아래와 같습니다.

<html lang="en">
  <head>
    <title>React App</title>
    <script type="module" crossorigin src="/assets/index.js"></script>
    <link rel="stylesheet" href="/assets/index.css">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

구글은 페이지를 분석하기 위해서 스크립트가 실행될 때까지 기다려야 합니다.

대부분의 앱에서는 크게 문제가 되지 않지만 컨텐츠가 많은 웹사이트의 경우 서버에서 react 코드를 사전 렌더링한 뒤 클라이언트에서 이를 수화(hydrate)시켜야 합니다.
이는 직접 구현하기 어렵기 때문에 Next.js나 Remix, Astro와 같은 프레임워크들이 큰 도움이 될 수 있습니다.

7. Ensure Correct File Formats

큰 이미지는 웹사이트의 로드를 느리게 하는 주 원인 중 하나입니다.

PNG 형식의 이미지는 JPEG나 WEBP와 같은 웹에 최적화된 형식보다 10배 이상 크지만 크게 느껴지는 차이는 없습니다.

SVG 형식의 이미지는 이미지 사이즈를 줄이기 위해 안전하게 제거할 수 있는 메타데이터가 포함되어 있습니다.

이미지를 수동으로 압축하거나 자동으로 이미지를 압축시켜주는 번들러를 구성할 수 있습니다. Next.js는 최적화할 수 있는 Image Component를 제공합니다.

Using SVGs

이미지를 사용하는 방법도 중요합니다.

예를 들어, SVG를 JSX에 직접 추가할 수도 있지만 SVG가 JS 코드와 함께 번들링되어 비동기적으로 로드될 수 없기 때문에 페이지 로드 시간과 성능이 크게 저하될 수 있습니다.

이미지에는 항상 <img> 태그가 선호되어야 합니다.

Responsive images

이미지로 인해 웹사이트 속도가 크게 느려지지 않도록 하는 가장 좋은 방법은 다양한 화면 크기에 대해 다양한 이미지 사이즈를 사용하는 것입니다.
예를 들어, 모바일 화면에서는 매우 상세한 이미지가 필요하지 않습니다.

보통, <img> 태그의 src 속성은 하나의 리소스만을 허용하지만 srcset과 sizes 속성을 사용해 화면 크기에 따라 다양한 소스를 바꿔가며 제공할 수 있습니다.

<img
  srcset="image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  src="image-800w.jpg"
/>

반응형 이미지가 작동하는 방식에 대한 글은 링크를 통해 확인할 수 있습니다.

8. Minify Your Code

최소화는 공백을 제거하고 이름을 더 짧게 변경하여 코드 크기를 크게 줄입니다.
최신 빌드 도구인 Vite, Parcel이나 Next.js와 같은 프레임워크를 사용한다면 이는 자동으로 처리됩니다.
자체적으로 Webpack config를 유지하거나 일반 JS 소스 파일을 사용하는 경우 코드를 최소화해야 합니다.

9. Ensure Good Accessibility

모바일 기기나 스크린을 통해 웹사이트에 접근할 수 있게 하면 구글이 컨텐츠를 좀 더 쉽게 크롤링하고 이해할 수 있습니다.

접근성은 눈에 보이지는 않지만 아래와 같은 것들입니다.

<img> 태그의 alt 속성
이미지만 있는 버튼의 aria-label 속성
클릭 가능한 버튼이 아닌 요소들을 위한 role
네비게이션을 위해 history.push()를 사용하는 것 대신 <a> 링크 태그를 사용하기

접근성에 대한 자세한 내용은 링크에서 확인할 수 있습니다.

10. Ensure Good Content Structure

시맨틱 태그와 좋은 컨텐츠 계층 구조를 사용하면 구글에서 컨텐츠의 의미를 좀 더 쉽게 파악할 수 있습니다.
초심자의 가장 흔한 실수 중 하나는 <div> 태그를 너무 많이 사용하거나 <article>, <nav>, <p> 등의 태그를 너무 적게 사용하는 것입니다.

시맨틱 태그와 좋은 컨텐츠 계층 구조를 사용하기 위해서 몇 가지의 팁이 있습니다.

컨텐츠에 가장 적합한 HTML 태그를 사용합니다.
표제 태그를 계층적 순서로 사용합니다. 예를 들어 h1 다음으로 h2를 사용하는 것입니다. h1 다음으로 h3를 사용하는 것은 올바른 순서가 아닙니다.

11. Ensure Good URL Structure

구글은 짧고 명확하지만 컨텐츠에 따라 의미를 가지는 URL을 선호합니다.
페이지가 논리적이고 계층적인 방식으로 연결되어 있는지 확인하세요. 사람들에게 통한다면 구글도 좋아할 것입니다.

url이 너무 길면 안됩니다.
모든 중복 페이지에는 표준 링크가 존재해야 합니다.
모든 페이지는 root url에서 접근할 수 있어야 합니다.
url이 트리 구조와 같은 계층 구조를 따라야 합니다.
컨텐츠를 기반으로 하는 키워드가 url에 포함되어야 합니다.

좋은 URL의 구조는 정말 중요합니다. 이로 인해 구글 검색 결과의 첫 번째 페이지에 등장하는가 아닌가의 차이가 발생할 수 있습니다.

12. Use HTTPS

모든 웹사이트, 특히 로그인이 필요한 웹사이트는 HTTPS를 사용해야 합니다.
React로 만든 앱은 일반적으로 사용자로부터 데이터를 수집하는 기능이 포함되어 있기 때문에 HTTPS는 매우 간단하게 적용할 수 있습니다.
HTTPS와 같은 보안이 존재하지 않을 경우 구글은 당신의 웹사이트를 중요하게 생각하지 않을 것입니다.

cansweep

하고 싶은 건 다 해보자! 를 달고 사는 프론트엔드 개발자입니다.