최대 SEO 이점을 위해 StackPath CDN을 구성하는 방법

모든 웹사이트 소유자는 사이트 속도가 온라인 성공에 얼마나 중요한지 알고 있습니다. 중요한 순위 요소일 뿐만 아니라 무엇을 판매하려고 하든 전환율에 극적인 영향을 미치는 것으로 나타났습니다. 따라서 CDN을 사용하는 것은 쉬운 일이 아닙니다.

콘텐츠 전송 네트워크는 사이트의 정적 자산(이미지, JS, CSS 등)과 사용자 브라우저 간의 물리적 거리를 줄여 페이지 로드 시간을 크게 향상시킵니다. 그러나 많은 사이트 소유자는 설정이 어려울 수 있고 잘못 구성된 CDN이 득보다 실이 더 많을 수 있기 때문에 이동을 주저합니다. 그러나 잠재적인 단점이 있을 수 있다는 이유로 모든 이점을 포기하지 않는 것이 중요합니다. 구성을 직접 수행하는 것이 불편하면 언제든지 프리랜스 개발자를 고용하여 구성을 수행할 수 있습니다.

오늘의 게시물에서는 StackPath(MaxCDN) 설정을 안내하지만 여기에서 설명하는 개념은 모든 CDN에 적용될 수 있습니다. 시작하자.

참고: 작은 테스트 사이트에 대해 먼저 이 설정을 수행하는 것이 좋습니다. 실제 사이트와 별도의 도메인이 있는 사이트가 바람직하므로 실제로 수행할 때 놀라움이 없습니다.

계정 만들기

아직 계정이 없다면 StackPath에서 계정을 만드십시오. 완료했으면 계정에 새 사이트를 추가하십시오.

계정(오른쪽 상단)에 제공된 "사이트의 에지 주소"를 기록해 둡니다. 나중에 필요할 것입니다.

도메인 이름 준비

SEO를 위해 모든 정적 리소스가 StackPath URL 대신 자체 하위 도메인에서 제공되기를 원합니다. 결국 우리는 CDN이 우리 콘텐츠에 대한 크레딧을 받는 것을 원하지 않습니다.

이를 위해서는 도메인 수준에서 약간의 변경이 필요합니다. 도메인 관리 계정에 로그인하고 A 및 CNAME DNS 레코드를 추가할 수 있는지 확인하십시오. 귀하의 도메인 공급자는 귀하에게 그렇게 하는 방법에 대한 보다 정확한 정보를 제공할 수 있어야 합니다. 이 StackPath 도움말 문서에 공급자에 대한 지침이 포함되어 있는지 확인할 수도 있습니다.

도메인 이름이 서버의 IP 주소를 가리키도록 하려면 A 레코드가 필요합니다. 이 레코드가 이미 있을 수 있으며 이 경우 CNAME 레코드로 건너뜁니다.

CNAME 레코드는 하위 도메인 cdn.yourdomain.com이 첫 번째 단계에서 얻은 사이트의 에지 주소를 가리키는 데 사용됩니다. 이 레코드를 추가하고 DNS가 전파될 때까지 충분히 기다린 후에는 브라우저에서 cdn.your.com을 열고 사이트의 전체 사본을 볼 수 있어야 합니다. 정돈된!

하위 도메인에 대한 SSL 인증서 요청

StackPath는 하위 도메인에 대한 무료 SSL 인증서를 제공합니다. 이는 기본 사이트에서 아직 HTTPs 프로토콜을 사용하지 않는 경우에도 훌륭한 옵션입니다(그렇지 않은 이유는 무엇입니까?). 그러나 관심이 없다면 이 섹션을 건너뛸 수 있습니다.

무료 SSL 인증서를 요청하려면:

• StackPath 계정에서 사이트를 엽니다.
• EdgeSSL 탭을 엽니다.
• "무료 SSL 인증서 요청" 섹션에서 "무료 SSL 생성" 버튼을 클릭합니다.
• 소유권 증명을 위해 도메인에 다른 CNAME 레코드를 추가하라는 메시지가 표시됩니다. 도메인 관리 계정에 레코드 추가
• DNS 변경 사항이 전파되면 SSL 인증서가 설치됩니다. 저에게는 몇 시간이 걸렸습니다.

StackPath에는 여기에서 따를 수 있는 이 프로세스에 대한 단계별 가이드가 있으므로 더 자세히 설명하지 않았습니다.

새 CNAME 레코드를 추가하는 동안 문제가 발생하면 Comodo(SSL 인증서를 발급하는 회사)의 이 가이드를 따를 수 있습니다.

자, 이제 https://cdn.yourdomain.com에서 액세스할 수 있는 사이트 사본이 있어야 합니다. 어메이즈볼!

SEO를 위한 CDN 조정

당신이 나와 같은 사람이라면 다른 하위 도메인에 전체 사이트의 복사본을 갖는 것이 악몽처럼 들릴 것입니다! 다행히 몇 가지 간단한 단계를 따르면 부정적인 SEO 결과를 쉽게 피할 수 있습니다.

모든 페이지에 표준 태그가 있는지 확인

사이트의 각 페이지에는 표준 태그가 있어야 Google에서 귀하의 콘텐츠 버전이 소스이고 어느 것이 사본인지 알 수 있습니다. 표준 태그는 다음과 같습니다.

 <link rel="canonical" href="http://yourdomain.com" />

WordPress에서는 SmartCrawl 또는 Yoast SEO와 같은 플러그인을 사용하여 모든 페이지에 표준 태그를 추가할 수 있습니다.

모든 정적 리소스에 HTTP 표준 헤더가 있는지 확인

페이지의 HTML에 표준 태그를 추가하는 것은 쉽지만 이미지와 같은 정적 리소스는 어떻습니까? 사용할 특정 이미지의 버전을 Google에 어떻게 알릴 수 있습니까? HTTP 표준 헤더가 답입니다. 이 HTTP 헤더는 정확히 이 시나리오를 위해 Google에서 도입했습니다. 응답에 포함하면 기본 사이트의 버전이 소스이고 CDN의 버전은 복사본이며 기본 사이트가 크레딧을 받아야 함을 Google에 알립니다.

그렇다면 이 헤더를 CDN에서 제공하는 모든 리소스에 어떻게 추가할까요? 메인 사이트에 헤더를 추가하면 됩니다. 원본 사이트의 모든 헤더가 CDN에 의해 ​​복사되기 때문에 표준 헤더도 복사됩니다. 원본 사이트에 헤더를 추가하려면 다음을 .htaccess 파일에 추가하십시오.

 <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|webp|html)(\.gz)?(\?.*)?$"> <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} !=on RewriteRule .* - [E=CANONICAL:http://%{HTTP_HOST}%{REQUEST_URI},NE] RewriteCond %{HTTPS} =on RewriteRule .* - [E=CANONICAL:https://%{HTTP_HOST}%{REQUEST_URI},NE] </IfModule> <IfModule mod_headers.c> Header set Link "<%{CANONICAL}e>; rel=\"canonical\"" </IfModule> </FilesMatch>

CDN에서 인덱싱된 항목이 없는지 확인하십시오.

CDN의 모든 항목을 정규화하는 것은 중복 콘텐츠 불이익을 피하는 좋은 방법이지만 Google은 여전히 ​​CDN URL을 색인화하도록 선택할 수 있으며 이는 좋지 않습니다. 다행히 StackPath를 사용하면 EdgeRules를 통해 이 문제를 쉽게 피할 수 있습니다.

StackPath 계정에서 EdgeRules 탭으로 이동하고 화면 하단에서 "Add Delivery Rule" 버튼을 클릭합니다.

열리는 양식에서 다음 값을 추가하고 저장을 누르십시오.

이 값은 기본적으로 다음과 같이 변환됩니다. CDN URL이 열릴 때 HTTP 헤더에 "x-robots-tag: noindex, follow"를 추가합니다. 이렇게 하면 CDN URL이 인덱싱되는 것을 원하지 않는다고 Google에 알릴 것입니다. 이 MOZ 기사에서 x-robots-tag 헤더에 대해 자세히 알아볼 수 있습니다.

그게 다야! 이제 정적 리소스를 CDN에서 사용할 수 있습니다. Google은 각 리소스의 실제 버전이 어디에 있는지 알고 있으며 색인을 생성해서는 안 됩니다. 여전히 모든 CSS, JS 및 이미지 파일의 CDN 버전을 사용하도록 웹사이트를 구성해야 합니다. WordPress에서는 W3 Total Cache와 같은 플러그인을 사용하여 이 작업을 수행할 수 있습니다.