Prerender.io로 SEO 개선

포브스가 최근 발표한 2024년 상위 웹사이트 통계에 따르면 현재 인터넷에 존재하는 웹사이트는 약 10억 9천만 개에 달합니다(!). 10억 개가 넘는 웹사이트 중에서 사용자(및 잠재 고객)는 어떻게 여러분의 웹사이트를 찾을까요? 대부분의 경우 검색 엔진에서 시작할 것입니다. 하지만 검색 엔진이 사용자를 내 사이트로 유도하려면 SEO 숙제를 해야 합니다.

SEO는 웹사이트가 검색 엔진에서 좋은 순위를 차지할 수 있도록 합니다. 올바르게 구현된 SEO는 사이트로 트래픽을 유도합니다. 그러나 React나 Vue.js와 같은 최신 JavaScript 프레임워크에 구축된 사이트는 클라이언트 측 렌더링에 크게 의존하며, 검색 엔진은 이러한 유형의 사이트를 올바르게 색인화하는 데 어려움을 겪는 경우가 많습니다. 따라서 검색 결과에서 가시성이 떨어지게 됩니다.

프리렌더링에 대해 알아봅시다. 사전 렌더링은 검색 엔진이 쉽게 크롤링하고 색인을 생성할 수 있는 웹 페이지의 정적 HTML 버전을 생성하는 것을 포함합니다. 이 기술은 사이트의 SEO 성공에 큰 영향을 미칠 수 있습니다.

이 글에서는 이러한 프레임워크를 사용할 때 Prerender.io의 프리 렌더링 서비스가 SEO 장애물을 극복하는 데 어떻게 도움이 되는지 살펴봅니다. 또한 웹 서버 또는 애플리케이션 수준에서 프리렌더링을 구현하는 올바른 방향도 알려드립니다.

시작해 보겠습니다.

자바스크립트 프레임워크를 통한 SEO 도전

React나 Vue.js와 같은 프레임워크를 사용할 때 SEO가 어려운 이유는 무엇인가요? 기존의 검색 엔진 봇은 정적 HTML을 읽도록 설계되었습니다. 일부 자바스크립트를 처리하고 페이지를 부분적으로 렌더링하는 봇도 있지만 한계가 있습니다. 사이트의 클라이언트 측 렌더링이 많은 경우 검색 엔진은 페이지를 끝까지 크롤링하고 렌더링하지 않을 가능성이 높으므로 색인을 위한 완전한 실제 콘텐츠를 볼 수 없습니다.

예를 들어 Google은 클라이언트 측 렌더링 사이트 빌더에게 다음과 같은 지침을 제공합니다:

동적 렌더링은 검색 엔진에서 자바스크립트로 생성된 콘텐츠 문제에 대한 장기적인 해결책이 아닌 임시방편입니다. 대신 서버 측 렌더링, 정적 렌더링 또는 하이드레이션을 해결책으로 사용하는 것이 좋습니다.

SEO에 미치는 영향은 무엇인가요? 당연히 인덱싱이 부분적으로 또는 지연되면 웹사이트의 검색 순위에 영향을 미칩니다. 결과적으로 사이트가 검색 결과에 표시되는 데 지연이 발생하여 오가닉 트래픽의 기회를 놓칠 수 있습니다. 불완전하거나 지연된 색인화는 검색 엔진이 사이트를 다시 크롤링해야 한다는 것을 의미할 수 있으며, 이로 인해 더 많은 지연이 발생할 수 있습니다.

위의 Google 팁을 다시 살펴보면 '정적 렌더링'을 사용하라는 권장 사항을 확인할 수 있으며, 프리렌더링이 어느 정도는 이러한 기능을 제공합니다.

Prerender.io가 이 문제를 해결하는 방법

프리렌더링은 기본적으로 최신 JavaScript 프레임워크의 동적 기능과 검색 엔진 봇이 작업할 수 있는 정적 HTML 콘텐츠의 필요성 사이의 간극을 메워줍니다. Prerender.io에서 이것이 어떻게 작동하는지 살펴보겠습니다.

Prerender.io는 헤드리스 브라우저에서 페이지의 JavaScript를 실행하여 전체 콘텐츠를 렌더링합니다. 그런 다음 렌더링된 콘텐츠를 정적 HTML로 저장합니다. 검색 엔진 봇이 사이트를 크롤링하여 특정 페이지를 요청하면 Prerender.io가 자바스크립트가 많은 페이지 대신 미리 렌더링된 HTML을 제공하도록 할 수 있습니다. 이렇게 하면 검색 엔진이 복잡한 JavaScript를 처리할 필요 없이 페이지의 전체 콘텐츠에 빠르고 쉽게 액세스하여 색인을 생성할 수 있습니다.

이 접근 방식을 사용하면 어떤 이점이 있나요?

• SEO 개선: Prerender.io는 검색 엔진에 완전히 렌더링된 HTML을 제공할 수 있으므로 콘텐츠가 정확하고 신속하게 색인화됩니다. 따라서 검색 순위가 향상되고 사이트 가시성이 높아집니다.
• 페이지 로딩 속도 향상: Prerender.io를 사용하여 검색 엔진 봇에 정적 HTML을 제공하면 서버의 부하가 줄어듭니다. 수많은 검색 엔진의 크롤러가 지속적으로 작동하는 상황에서 Prerender.io로 요청을 오프로드하면 페이지 로드 시간을 개선하고 실제 사용자의 사용자 환경을 개선할 수 있습니다.
• 더 나은 사용자 경험: 페이지 로딩 속도가 빨라지고 인덱싱이 정확해지면 사용자가 사이트를 빠르게 찾고 더 긍정적인 검색 환경을 즐길 가능성이 높아집니다. 

지금까지 무엇을, 어떻게, 왜 하는지 살펴봤습니다. 이제 핵심적인 내용을 살펴보겠습니다.

웹 애플리케이션에서 Prerender.io 구현하기

Prerender.io를 웹 애플리케이션에 통합하는 가장 간단한 두 가지 방법은 웹 서버 수준 또는 애플리케이션 코드 수준에서 통합하는 것입니다. 각각을 좀 더 자세히 살펴보겠습니다.

접근 방식 1: 웹 서버에서

Linode에 Node.js 애플리케이션을 배포하는 경우, Node.js 원클릭 마켓플레이스 앱을 사용하여 빠르게 시작하고 실행할 수 있습니다. 새 Linode를 생성한 후 이 앱은 Nginx, Node.js, NPM 및 PM2를 스핀업하는 데 도움을 줍니다.

Nginx 에서 Prerender.io를 사용하려면 Nginx 에 대한 통합 가이드를 따르세요. 먼저 시스템의 nginx.conf 파일의 백업 복사본을 생성합니다. 다른 변수의 값을 기반으로 일부 변수를 생성하기 위해 ngx_http_map_module 모듈을 사용합니다.

nginx.conf 파일을 편집하여 Prerender.io의 Nginx 구성 파일 예제에서 섹션을 삽입합니다. 먼저 다음 맵 블록을 http 섹션에 추가합니다.

map $http_user_agent $prerender_ua {         default       0;         "~*Prerender" 0;         "~*googlebot"                               1;         "~*yahoo!\ slurp"                           1;         "~*bingbot"                                 1;         "~*yandex"                                  1;         "~*baiduspider"                             1;         "~*facebookexternalhit"                     1;         "~*twitterbot"                              1;         "~*rogerbot"                                1;         "~*linkedinbot"                             1;         "~*embedly"                                 1;         "~*quora\ link\ preview"                    1;         "~*showyoubot"                              1;         "~*outbrain"                                1;         "~*pinterest\/0\."                          1;         "~*developers.google.com\/\+\/web\/snippet" 1;         "~*slackbot"                                1;         "~*vkshare"                                 1;         "~*w3c_validator"                           1;         "~*redditbot"                               1;         "~*applebot"                                1;         "~*whatsapp"                                1;         "~*flipboard"                               1;         "~*tumblr"                                  1;         "~*bitlybot"                                1;         "~*skypeuripreview"                         1;         "~*nuzzel"                                  1;         "~*discordbot"                              1;         "~*google\ page\ speed"                     1;         "~*qwantify"                                1;         "~*pinterestbot"                            1;         "~*bitrix\ link\ preview"                   1;         "~*xing-contenttabreceiver"                 1;         "~*chrome-lighthouse"                       1;         "~*telegrambot"                             1;         "~*google-inspectiontool"                   1;         "~*petalbot"                                1;     }     map $args $prerender_args {         default $prerender_ua;         "~(^|&)_escaped_fragment_=" 1;     }     map $http_x_prerender $x_prerender {         default $prerender_args;         "1"     0;     }     map $uri $prerender {         default $x_prerender;         "~*\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|woff2|svg|eot)" 0;     }

첫 번째 map 블록은 HTTP 요청의 사용자 에이전트를 검사합니다. 사용자 에이전트가 검색 엔진 봇 목록에 있는 경우 Prerender.io로의 리디렉션을 준비하기 위해 다양한 변수와 구성을 설정합니다.

그런 다음 메인 location 블록에 다음을 추가하여 URL을 다시 작성하여 앞에 prerenderio/ 경로:

if ($prerender = 1) {   rewrite (.*) /prerenderio last; }

마지막으로, 위치 블록을 추가합니다. prerenderio/ 경로:

location /prerenderio {   if ($prerender = 0) {     return 404;   }   proxy_set_header X-Prerender-Token YOUR_TOKEN;   proxy_set_header X-Prerender-Int-Type Nginx;   proxy_hide_header Cache-Control;   add_header Cache-Control "private,max-age=600,must-revalidate";   #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs   resolver 8.8.8.8 8.8.4.4;   set $prerender_host "service.prerender.io";   proxy_pass https://$prerender_host;   rewrite .* /$scheme://$host$request_uri? Break;}

이 location 블록은 Prerender.io가 의도한 대상 페이지를 렌더링하고 정적 HTML을 제공하도록 지시합니다. 인증의 경우, 반드시 YOUR_TOKEN 를 실제 Prerender.io 계정 토큰으로 설정해야 합니다. Prerender.io가 과거에 이미 이 페이지를 렌더링한 적이 있는 경우 캐시된 버전을 제공할 수 있습니다. 캐싱 설정 )를 클릭하세요.

Prerender.io의 Nginx 통합 가이드는 매우 포괄적입니다. Nginx 대신 Apache 을 사용하는 경우에는 Apache 웹 서버용 통합 가이드를 참조할 수 있습니다.

Prerender.io 통합을 위한 4가지 기본 단계

일반적으로 접근 방식에 관계없이 Prerender.io를 애플리케이션에 통합하려면 다음 단계가 필요합니다:

1. 크롤러 탐지. 요청의 사용자 에이전트 헤더를 검사합니다. 위의 Nginx 예제에서는 단순히 $http_user_agent 변수입니다.
2. prerender.io로 리디렉션합니다. 렌더링을 위해 봇 요청을 Prerender.io로 전달합니다.
3. 요청 경로를 수정합니다. 요청 경로가 전체 URL을 경로로 예상하는 Prerender.io에 맞게 올바르게 형식화되었는지 확인합니다.
4. 캐싱 관리. Prerender.io를 활용하여 캐시된 정적 HTML 페이지를 제공하는 것(속도)과 사이트에서 업데이트된 콘텐츠를 다시 캐시하는 것(최신성) 사이에서 균형을 찾으세요. Prerender.io의 캐싱에 대한 지침을 참조하세요.

접근 방법 2: 애플리케이션 코드에서 (Node.js Express)

프런트엔드에 JavaScript 프레임워크(예: React, Vue.js 또는 Angular)를 사용하는 애플리케이션이 있는 경우 위에 나열된 네 가지 기본 단계를 수행하도록 프런트엔드용 애플리케이션 서버를 구성할 수 있습니다.

Express를 사용하여 프런트엔드에 서비스를 제공하는 경우 이 모든 작업을 대신 수행하는 Prerender.io의 사전 빌드된 미들웨어를 활용할 수 있습니다. 자세한 내용은 Prerender.io의 노드 통합 가이드를 참조하세요. 간단히 설명하자면 다음과 같습니다:

Node.js 패키지를 설치합니다:

npm install prerender-node --save

Express 서버 앱이 정의되어 있는 기본 index.js 또는 app.js 파일에 다음 코드를 추가하세요:

app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN'));

다시 말하지만, 인증을 위해 다음을 교체해야 합니다. YOUR_TOKEN 실제 Prerender.io 계정 토큰을 사용하세요.

그런 다음 Express 서버를 다시 시작하세요.

여기까지입니다!

결론

페이지 사전 렌더링은 최신 JavaScript 프레임워크와 클라이언트 측 렌더링을 사용할 때 SEO 문제를 해결하는 데 도움이 될 수 있습니다. Prerender.io는 페이지를 미리 렌더링한 다음 해당 정적 HTML을 검색 엔진 크롤러에 전달합니다. 이렇게 하면 검색 엔진 봇이 콘텐츠에 완전히 액세스할 수 있으므로 정확한 색인화와 검색 결과 순위를 높일 수 있습니다. 이 SEO 문제를 해결하면 웹사이트의 가시성이 향상되고 오가닉 트래픽이 증가합니다.

이러한 프리렌더링 기법과 관리가 간편한 Akamai의 클라우드 컴퓨팅 솔루션을 결합하면 SEO에 최적화된 사이트를 즉시 구축 및 운영할 수 있습니다. 애플리케이션을 배포할 때 Akamai의 클라우드 컴퓨팅 서비스를 최대한 활용하는 방법에 대한 자세한 팁과 가이드는 풍부한 문서 라이브러리에서 확인할 수 있습니다.