원문: Creating a SEO friendly Sites with ReactJS
단일 페이지 응용 프로그램 (SPA)
전통적인 웹사이트는 브라우저가 웹 사이트의 각 페이지를 개별적으로 요청하여 서버가 HTML 페이지를 생성하고 다시 보내야하는 방식으로 작동했다. 따라서 서버에 대한 새로운 요청마다 페이지가 무한정 다시 로드되었다.
그러나 단일 페이지 애플리케이션은 데스크탑 애플리케이션과 유사한 사용자 경험을 제공한다. SPA에서 HTML을 검색하기 위해 서버 왕복 없이도 페이지 UI와 해당 데이터를 변경할 수 있다. Gmail, 소셜 네트워크 서비스처럼 페이지 간 전환이 즉시 발생한다.
그렇다면 자바스크립트를 실행하기 위해 구글 의존성을 어떻게 추가해야할까.
SPA에서 자바스크립트로 페이지 데이터를 작성하기 때문에 SEO 문제점이 발생한다. 역사적으로, ajax요청에 의해 받는 데이터는 검색 엔진에서 액서스 할 수 없었다. 그러나 이 문제를 처리하기 위한 방법이 있다.
구글은 자바스크립트를 실행하지만, 꼭 그렇다고 생각하면 안된다. 구글은 자바스크립트 실행 여부를 결정할 수도 아닐 수도 있다. 실제 구글이 자바스크립트를 실행하는지 궁금하다면 이 글을 읽어보길 바란다.
ReactJS 서버 렌더링
react로 SEO 친화적인 웹사이트를 만드는 가장 좋은 해결책은 서버 렌더링을 사용하는 것이다. 그렇다면 서버 렌더링은 무엇일까?
웹 사이트를 처음 열면 모든 작업이 서버에서 수행되고, 브라우저는 모든 정보(검색 엔진에서 색인을 생성하는 정적 페이지)가 있는 HTML을 가져온다. JS가 로드 된 후 웹은 '단일 페이지 앱'으로 바뀌어 작동한다.
Isomorphic React 장점은 이 링크를 통해 알 수 있다.
서버 렌더링을 구현하는 방법을 알기 위해서는 다음 글을 읽는 것을 추천한다.
SEO 요소 만들기
그렇다면 "title", "meta description"과 같은 SEO 요소를 만드려면 어떻게 해야할까?
"React를 위한 문서관리자"라고 불리는 react-helmet 패키지는 문서 제목, 메타, 링크, 스타일, 스크립트, noscript 및 기본 태그를 지원한다.
가장 중요한 요소는 무엇일까?
- h1, h2, h3 ... : 웹 페이지를 기사로 간주하고 h1, h2, h3, ... 태그를 사용하여 제목과 문서를 작성한다.
- title - helmet을 사용해 페이지 제목을 작성한다.
- meta description - helmet을 사용해 페이지 설명을 작성한다.
- Open Graph Protocol - Open Graph 프로토콜은 모든 웹 페이지가 소셜 미디어에서 풍부한 컨텐츠를 담도록 해준다.
og : title,og : url,og : image,og : type이 가장 중요하다.
정리하자면 helmet은 아래와 같이 작성된다.
import {Helmet} from "react-helmet"
< Helmet
title= "Page title"
meta={[
{"name": "description", "content": "Description of page"},
{property: "og:type", content: "article"},
{property: "og:title", content: "Example title"},
{property: "og:image", content: "http://example.com/article.jpg"},
{property: "og:url", content: "http://example.com/example"}
]}
/>