헤드리스 CMS를 위한 SEO: 주의해야 할 사항
게시 됨: 2020-11-30목차
기본적으로 헤드리스 CMS의 SEO는 여전히 기존 CMS와 동일한 규칙을 따릅니다. 따라서 크롤링 가능성, 속도 및 콘텐츠 품질은 원하는 경우 목표로 유지됩니다. 그러나 달성해야 할 목표는 비슷하지만 헤드리스 CMS에서는 이러한 목표를 달성하기 위한 수단이 다릅니다.
헤드리스 CMS에서 SEO는 어떻게 다른가
헤드리스 CMS에서는 일반적으로 전체 프로세스를 쉽게 해주는 플러그인이나 추가 기능이 없기 때문에 대부분의 SEO 작업을 수동으로 수행해야 합니다. 타사 도구에 의존. 또한 현재 대부분의 헤드리스 CMS 및 프론트엔드 프레임워크가 JavaScript 기반이므로 크롤러가 JavaScript를 쉽게 렌더링할 수 없는 특성으로 인해 이러한 환경의 SEO가 복잡해질 수 있습니다.
Googlebot이 JavaScript를 렌더링할 수 있지만 우리는 이에 의존하고 싶지 않습니다.
Martin Splitt, 동적 렌더링 구현에 대해
추천 자료: 헤드리스 CMS 대 기존 CMS
헤드리스 CMS에서 주의해야 할 사항
대체 텍스트
대체 텍스트를 사용하면 Google 봇이 이미지 콘텐츠를 읽을 수 있습니다. 사용자 지정 메타데이터와 유사하게 이미지의 대체 텍스트는 대부분 의 헤드리스 CMS에서 즉시 사용할 수 있는 기능이 아니므로 CMS 제공업체에서 구현해야 합니다.
기본 제공 대체 텍스트 기능이 없는 헤드리스 CMS의 경우 이미지에 <alt> 속성만 추가하면 되므로 많은 노력 없이 이미지당 대체 텍스트를 수동으로 추가할 수 있습니다.
<img src="image.png" alt="우리의 대체 텍스트">
메타데이터
메타데이터 태그는 Google 검색이 이해하는 특수 태그입니다. 이 태그는 사이트의 콘텐츠를 설명하고 페이지가 Google 검색에 표시되는 방식을 제어하는 데 도움이 됩니다. 그리고 기존 CMS와 달리 헤드리스 CMS에는 일반적으로 즉석에서 메타데이터 태그를 편집할 수 있는 기능이 제공되지 않습니다 . 즉, 페이지 제목, 설명 및 기타 메타 태그를 콘텐츠 모델에 수동으로 추가해야 합니다.
예를 들어, React 기반 프론트엔드가 있지만 사용자 정의 메타데이터를 지원하지 않는 헤드리스 웹사이트의 경우, <head> 에 메타데이터를 편리하게 추가하기 위해 react-helmet을 사용합니다.
사용자 지정 메타데이터를 지원하는 헤드리스 CMS의 경우 일반적으로 사용자 지정 메타데이터 태그가 포함된 필드를 콘텐츠 모델에 추가하거나 필요한 모든 메타 태그가 포함된 사용자 지정 SEO 모델을 생성해야 합니다. 생성된 SEO 모델은 이를 필요로 하는 모든 페이지와 관계를 갖도록 구성되어야 합니다.
구조화된 데이터 스니펫
구조화된 데이터 스니펫을 사용하면 Google 검색에서 페이지와 페이지 내의 모든 콘텐츠를 더 잘 이해할 수 있습니다. 유효한 구조화된 데이터 스니펫을 제공하면 사이트에서 리치 결과를 얻을 수 있습니다.
구조화된 데이터 스니펫을 생성하기 위해 사이트의 <head> 에 저장된 JSON-LD 배열을 사용합니다. 그리고 전체 프로세스가 플러그인(예: Yoast SEO)으로 자동화 되는 기존 CMS와 달리 헤드리스 CMS에서는 다음을 수행해야 합니다.
- 페이지에 대한 올바른 구조화된 데이터 유형 선택
- 필요한 모든 구조화된 데이터를 생성하거나 서버 측에서 렌더링된 구조화된 데이터에 더 많은 정보를 추가하는 데 도움이 되는 사용자 정의 JavaScript 코드를 추가합니다.
가져오기('https://api.example.com/recipes/123')
.then(응답 => 응답.텍스트())
.then(구조화된 데이터 텍스트 => {
const 스크립트 = document.createElement('스크립트');
script.setAttribute('유형', '응용 프로그램/ld+json');
script.textContent = 구조화된 데이터 텍스트;
document.head.appendChild(스크립트);
});- 리치 결과 테스트를 사용하여 구현 테스트
페이지뷰 추적 문제
헤드리스 웹사이트에서 Google 웹로그 분석을 구현해 본 적이 있다면 웹사이트의 첫 번째 페이지뷰만 추적된다는 사실을 눈치채셨을 것입니다. 이는 주로 헤드리스 CMS의 프런트엔드가 본질적으로 단일 페이지 애플리케이션이라는 사실에 기인합니다. 즉, 페이지는 한 번만 로드되고 세션당 하나의 pageView 이벤트만 트리거됩니다. 이 문제를 피하기 위해 Google 태그 관리자에서 기록 변경 트리거를 사용하여 추적할 수 있는 가상 페이지뷰를 활성화하는 기록 API를 구현합니다.
히스토리 변경 트리거는 URL 프래그먼트 또는 히스토리 상태 객체의 변경을 추적합니다. 이 둘 사이에 변경 사항이 발생하면 다음과 같은 변수가 있습니다.
- 기록 이전 URL 조각: URL 조각이 사용되었던 것입니다.
- 기록 새 URL 조각: 현재의 URL 조각입니다.
- 기록 이전 상태: 이전 기록 상태 개체로, 사이트의 pushState 호출에 의해 제어됩니다.
- 기록 새 상태: 새 기록 상태 개체로, 사이트의 pushState 호출에 의해 제어됩니다.
기록 변경 트리거를 만들려면 Google 태그 관리자로 이동하여 다음을 수행하십시오.
- 트리거 > 새로 만들기를 선택합니다.
- 트리거 구성 > 기록 변경 을 선택합니다.
그런 다음, 다음과 같이 방금 만든 기록 변경 트리거에서 실행할 새 Google 애널리틱스 구성 태그를 만들어야 합니다.
그리고 그게 다야. 이제 헤드리스 웹사이트에서 페이지뷰를 추적할 수 있습니다.
SEO 감사 문제
헤드리스 웹사이트는 대부분 클라이언트 측 JavaScript로 만들어지기 때문에 SEO 감사는 대부분의 무료 SEO 감사 도구에 사용되는 크롤러가 JavaScript를 렌더링할 수 있는 기능이 제공되지 않기 때문에 문제가 될 수 있습니다.
이 문제는 예상대로 더 많은 비용을 지불하면 해결될 수 있습니다. 이 기능에 대한 지원을 활성화하기 위해 다음 프리미엄 플랜으로 업그레이드할 수 있기 때문입니다. 또한 대부분의 SEO 감사 도구에서는 JavaScript 렌더링이 기본적으로 활성화되어 있지 않습니다 . 즉, 헤드리스 웹사이트를 크롤링하려면 수동으로 활성화해야 합니다.
코드 분할
일반적인 헤드리스 CMS는 자바스크립트 기반이기 때문에 웹사이트에서 사용되는 자바스크립트 코드의 양이 압도적으로 많을 수 있습니다.
그리고 우리 모두 알고 있듯이 페이지 속도는 SEO에 영향을 미치므로 JavaScript 코드를 이런 식으로 유지할 수 없습니다. 이것이 이 문제를 피하기 위해 코드 분할이 만들어진 이유입니다. 코드 분할을 사용하면 JS 코드를 런타임에 동적으로 로드할 수 있는 더 작은 번들로 분할할 수 있습니다. 이 기능은 현재 요소 번들을 통해 Webpack 및 Browserify와 같은 번들러에서 지원됩니다.
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const 홈 = 게으른(() => 가져오기('./경로/홈'));
const 정보 = 게으른(() => 가져오기('./경로/정보'));
const 앱 = () => (
<라우터>
<서스펜스 대체={<div>로드 중...</div>}>
<스위치>
<경로 정확한 경로="/" 구성요소={홈}/>
<경로="/about" 구성요소={정보}/>
</스위치>
</서스펜스>
</라우터>
);동적 렌더링
헤드리스 웹 사이트의 대부분은 본질적으로 JavaScript이므로 JavaScript 렌더링과 동일한 주요 SEO 문제에 직면합니다.
[...], JavaScript를 처리하는 것은 어렵고 모든 검색 엔진 크롤러가 JavaScript를 성공적으로 또는 즉시 처리할 수 있는 것은 아닙니다.
동적 렌더링 구현, Google
크롤러는 JavaScript를 효과적으로 렌더링할 수 없으므로 Google 이 그동안 해결 방법 으로 Dynamic Rendering을 제안하는 이유입니다. Google I/O '18에 도입된 동적 렌더링은 클라이언트 측 렌더링과 함께 제공되는 모든 이점을 유지하면서 SEO 문제를 쉽게 해결할 수 있는 방법을 원하는 JavaScript 기반 웹사이트에 이상적인 솔루션입니다. 이 새로운 렌더링 방법을 사용하면 웹 서버는 일반 클라이언트 측 렌더링 콘텐츠를 사용자에게 보내고 검색 엔진 크롤러는 완전히 서버 렌더링된 정적 HTML 콘텐츠를 받습니다.
이 모든 것이 의미하는 바는 동적 렌더링을 통해 두 가지 장점을 모두 얻을 수 있다는 것입니다. 즉, 서버 측 렌더링의 용이한 크롤링과 클라이언트 측 렌더링의 빠른 후속 렌더링입니다.
동적 렌더링을 구현하려면 전체 프로세스를 단축하기 위해 Rendertron 또는 Puppeteer와 같은 동적 렌더러에 의존해야 합니다. 이러한 렌더링은 사이트의 콘텐츠를 크롤러가 이해할 수 있는 정적 HTML로 변환합니다.
동적 렌더러 설치 및 구성을 완료한 후 Google 공식 문서의 추가 단계에 따라 사용자 에이전트의 동작을 구성합니다.
결론
헤드리스 CMS의 SEO는 가장 간단한 방법이 아니며 모든 것을 올바르게 하려면 개발자의 약간의 작업 이 필요합니다. 그러나 일단 익숙해지면 헤드리스 CMS는 SEO와 관련하여 기존 CMS만큼 효과적일 수 있습니다. 또한 원하는 방식으로 콘텐츠를 제작할 수 있는 훨씬 더 많은 자유와 유연성을 얻을 수 있습니다.