SEO 품질을 잃지 않고 WordPress 사이트를 Gatsby로 마이그레이션하는 방법
게시 됨: 2022-04-09
WordPress 사이트를 다른 제공업체로 마이그레이션하는 것은 소수처럼 보일 수 있지만 점점 더 많은 블로그가 온라인에서 가장 인기 있는 콘텐츠 관리 시스템이었던 곳에서 탈선하고 있습니다. 새로운 기술이 성장하기 시작하면서 옵션도 증가하고 있으며 최근 몇 년 동안 WordPress는 경쟁업체의 공정한 점유율에 직면했으며 그 중 가장 유망한 것은 Gatsby입니다.
비교적 유사한 방식으로 운영되지만 많은 사이트 소유자가 WordPress보다 Gatsby를 선호하는 데에는 여러 가지 이유가 있습니다.
기능 및 서비스에서 성능 품질 및 사용 가능한 특혜에 이르기까지 WordPress와 Gatsby를 자세히 살펴보고 그 과정에서 SEO 품질을 잃지 않고 WordPress 기반 사이트를 Gatsby 프레임워크로 안전하게 마이그레이션하는 방법에 대한 자세한 가이드가 나옵니다. .
워드프레스 정의하기
수십 년 동안 WordPress는 최고의 콘텐츠 관리 시스템이었습니다. 오픈 소스 모델인 WordPress는 수년에 걸쳐 수천 개의 블로그와 웹 사이트에 고품질 서비스를 계속 제공하는 동시에 플러그인 및 확장 프로그램과 같은 수많은 무료 콘텐츠 및 SEO 관리 도구를 제공합니다.
통계에 따르면 사이트 소유자의 약 29%가 여전히 WordPress를 사용하므로 플랫폼이 가장 먼저 선택됩니다. WordPress가 많은 사용자에게 선호되는 이유는 단순화된 콘텐츠 업로드와 콘텐츠 및 SEO의 모든 측면을 수정하는 정밀도 때문입니다. WordPress는 무료 및 유료 플러그인 갤러리를 자랑하지만 대부분의 사용자는 후자가 훨씬 더 기능적인 옵션을 찾습니다.
즉, WordPress 사용의 단점도 분명합니다. 하나는 시스템이 PHP 기반이며 최적화 프로세스를 복잡하게 만드는 광범위한 레거시 코드와 함께 제공됩니다. 다양한 사용 사례로 인해 WordPress는 구성하기 쉬운 사이트를 만들지만 빠른 사이트는 아닙니다. 아시다시피 사이트가 느릴수록 트래픽이 적습니다. 그뿐만 아니라 양질의 콘텐츠를 제외하고 Google의 주요 순위 기준은 웹사이트의 로딩 속도입니다.
사용자가 WordPress를 사용하지 않는 다른 이유는 다음과 같습니다.
문제가 있는 콘텐츠 관리자
WordPress는 콘텐츠 편집기를 개선하는 데 시간이 걸렸지만, 그럼에도 불구하고 탁월하지 못했습니다. 새로운 콘텐츠 관리자(Gutenberg)는 사용자 경험이 이상적이지 않기 때문에 많은 사용자가 어려워하는 블록별로 콘텐츠를 구분합니다. 글쎄요, 잘 모르겠습니다. 익숙해지면 정말 좋습니다.
대부분의 사용자는 자신이 알고 있는 내용을 그대로 유지하기 위해 클래식 편집기 플러그인을 설치하고 있습니다.
PHP 작성
워드프레스 사이트를 수정하기 위해서는 수정 사항을 PHP로 작성해야 합니다. WordPress에 사용자 정의 수정이 존재하지만 많은 사용자는 이러한 수정이 지나치게 까다롭고 시간 소모적이라는 것을 알게 됩니다. 그리고 PHP는 WordPress 사이트를 제외하고는 가장 인기 있는 언어가 아니기 때문에 PHP를 다루는 것이 중복되는 느낌이 듭니다.
일부 사용자는 코드를 사용하지 않고 사이트 디자인을 쉽게 사용자 정의하고 수정할 수 있는 페이지 빌더를 사용하는 것을 선호합니다. 그러나 여전히 WordPress를 사용하면 세계의 모든 기능을 실제로 가질 수 없거나 원하는 만큼 많은 기능으로 꿈의 사이트를 구축할 수 없습니다. 더 복잡한 사이트에서는 WordPress를 프런트 엔드로 사용하기 어려울 것입니다.
GatsbyJS 정의
많은 사람들이 WordPress를 구식 기술로 간주하지만 경쟁자가 증가하면서 GatsbyJS가 가장 적합한 대안 중 하나가 되었습니다. 대부분의 사이트 빌더와 사용자는 JavaScript 및 React.js와 같은 언어를 사용하는 사이트에 의존합니다. 이는 Gatsby가 테이블에 가져온 것과 정확히 같습니다. WordPress의 오픈 소스 특성과 달리 GatsbyJS는 주로 React로 구축된 정적 사이트 생성기입니다.
사용자가 Gatsby 기반 사이트를 방문하면 플랫폼에서 페이지를 렌더링하지 않습니다. 대신 GatsbyJS는 컴파일 시 페이지를 생성한 다음 모두 온라인으로 이동합니다. 이 시스템은 서버나 유지 관리가 필요하지 않으며 JS, HTML 및 CSS와 같은 정적 파일과 호환됩니다. 마지막으로 Gatsby는 PHP를 전혀 사용하지 않으므로 이전 WordPress 사용자에게 큰 도움이 됩니다.
플랫폼에 단점이 없는 것은 아닙니다. 그 중 하나는 Gatsby와 마찬가지로 모든 것을 먼저 컴파일해야 하는 것처럼 사이트 변경 결과를 직접 볼 수 없다는 것입니다. 그러나 이 문제를 해결하기 위해 많은 사람들이 Gitlab CI/CD 파이프라인에 의존하여 웹사이트를 먼저 컴파일하고 다음에는 온라인 상태로 만듭니다. Gatsby를 사용하면 사용자가 블로그 게시물 템플릿을 만들고 모든 콘텐츠를 마크다운으로 작성할 수 있습니다.
다음은 Gatsby 사용의 주요 이점입니다.
제로 재장전
이미지 개선
리소스 미리 가져오기
코드 대체
WordPress 데이터를 Gatsby 프레임워크로 마이그레이션
전체 콘텐츠를 WordPress에서 Gatsby로 이동하는 것을 고려할 때 고려해야 할 가장 중요한 측면은 기존 SEO 가치를 잃지 않는 것입니다.
고맙게도 Gatsby는 다른 플랫폼의 콘텐츠를 상당히 쉽게 받아들입니다.
콘텐츠를 전송하기 위해 가장 먼저 필요한 것은 소스 플러그인입니다. 소스 플러그인은 Gatsby가 Graphql 저장소를 원활하고 자동으로 채우는 데 도움이 되는 동시에 모든 입력 정보에 대한 액세스 권한을 부여합니다. 소스 플러그인은 필요에 맞게 수정할 수 있으며 플랫폼을 정적 대신 오픈 소스로 만들 수도 있습니다.
Graphql은 API 데이터 수집에 있어 세련된 솔루션을 제시하며 이전 버전인 REST API와 크게 다릅니다. Graphql은 시스템 자체의 일부로 사용되는 Gatsby 플랫폼의 보완 자산입니다. Graphql을 완전히 우회하는 것은 가능하지만 다양한 중요한 기능에 대한 액세스 권한을 부여하지 않기 때문에 옵션으로 크게 무시됩니다.
다음 단계는 작성 과정을 용이하게 하고 모든 것을 Markdown으로 옮기는 것입니다. Markdown 또는 .md 파일을 사용하면 사용자가 단순하고 일반 텍스트를 작성하여 HTML로 더 쉽게 변환할 수 있습니다. 더욱이 Markdown은 사이트의 Github 코드와 함께 모든 .md 파일을 전달하고 프로세스 버전을 제어합니다. 이 프로젝트를 통해 SEO 지향 Gatsby 사이트를 만들 수 있으므로 일부 사용자는 Gatsby Advanced Started(GAS)도 유용하다고 생각할 수 있습니다.
WordPress 게시물을 Markdown으로 전송하는 방법
무엇보다 먼저 실행 가능한 모든 WordPress 기사를 내보내야 합니다. 완료되면 이를 일반 텍스트 또는 Markdown으로 변환해야 합니다. 이를 수행하는 도구가 있으며 WordPress Export to Markdown이라는 도구가 있습니다. 이 도구를 사용하면 모든 WordPress 콘텐츠, 해당 태그, 카테고리 및 필수 SEO 측면을 추출할 수 있습니다. 이 도구는 기사 콘텐츠뿐만 아니라 게시물 이미지도 변환하기 위해 추가 단계를 수행합니다.
파일을 받으면 프로젝트 콘텐츠 폴더에 들어갈 준비가 됩니다. 다음에 Gatsby를 실행할 때 기사의 암시만 볼 수 있지만 일단 사이트를 구축하면 모든 콘텐츠가 획득한 것으로 표시됩니다.
Gatsby로 게시물과 페이지를 생성하는 방법
Gatsby의 성능은 WordPress에서 사용되는 PHP와 유사합니다. 그러나 Gatsby는 React를 전체적으로 사용하기 때문에 언어 합성어를 페이지 폴더 아래에 배치하여 자동으로 사이트 페이지로 전환합니다. 이 기능은 '색인' 및 '내 소개'와 같은 1차원 페이지 콘텐츠에 이상적입니다.
카테고리나 블로그 게시물과 같은 동적 콘텐츠의 경우 사용자는 특정 페이지를 만들기 위해 바로 사용할 수 있는 Gatsby 템플릿을 사용할 수 있습니다. GAS를 사용하는 사람들은 태그 및 카테고리와 함께 포스트 템플릿을 이미 가지고 있을 것입니다. 자유롭게 콘텐츠를 다시 평가하고 더 역동적으로 만들어 Gatsby와 더 잘 호환되도록 하세요. 변경 사항은 모두 브라우저에 한 번에 표시되므로 Gatsby는 신속한 반복 작업에 매우 친숙합니다.
Gatsby의 본질은 gatsby-node.js 파일에 있다는 것을 기억하십시오. 여기에서 템플릿과 페이지 동작, 슬러그, 사용할 요소 및 추가 데이터를 모두 예측할 수 있습니다. 이 파일은 노드를 채우는 데 도움이 되므로, 즉 데이터가 GraphQL에 저장되므로 고려하는 것도 해롭습니다.
Gatsby 사이트 스타일 지정 방법
사이트 스타일 작성 측면에서 Gatsby는 .css 파일, Sass, CSS-in-JS 등과 같은 실행 가능한 많은 옵션을 제공합니다. 다음은 Gatsby 사이트를 디자인하는 방법에 대한 몇 가지 팁입니다.
- Ant, MaterialUI, Materialize와 같은 사용 가능한 디자인 리소스를 살펴보십시오.
- 배포 준비를 하세요! Gatsby와 같은 정적 사이트는 사이트 배포를 매우 쉽고 저렴하게 만듭니다. 이를 위해 Netlify, AWS Amplify, Now, Surge와 같은 빠르고 다양한 무료 도구를 사용할 수 있습니다.
- 최적화, 최적화, 최적화! Gatsby를 사용한다는 것은 더 빠른 사이트를 갖는 것을 의미하며, 항상 플랫폼을 사용하여 더 빠르고 SEO가 향상되고 액세스 가능하도록 만들 수 있습니다. 최고의 최적화 도구 중 하나는 감사, 메트릭, 웹 관행, 세부 데이터 및 유용한 링크까지 모든 것을 자동으로 수행하는 Lighthouse입니다. Google, Firefox를 통해 Lighthouse 감사를 실행하거나 Lighthouse CLI 옵션을 사용할 수 있습니다.
Gatsby 웹사이트를 빠르게 작동시키는 방법
모든 콘텐츠가 마이그레이션되면 다음을 통해 Gatsby 사이트를 더 빠르게 만들 수 있습니다.
- GraphQL을 통해 모든 Gatsby 데이터를 처리합니다.
- moment.js와 같은 무거운 라이브러리는 사이트를 느리게 만들 수 있으므로 사용하지 마십시오.
- 서버를 신뢰하여 날짜를 수정하고 해당 데이터를 페이지로 전송하고 기타 과중한 작업을 수행하십시오.
- GraphQL을 사용하여 더 적은 데이터를 관리하십시오. 이렇게 하면 필요한 데이터에만 액세스할 수 있으며 실수로 과도한 데이터 양이 쌓이는 것을 방지할 수 있습니다.
- 액세스 가능하게 만드십시오. 귀하의 사용자는 귀하와 같은 방식으로 귀하의 사이트와 상호 작용하지 않으므로 사이트가 품질을 통합하여 모든 범주의 사용자를 포괄하도록 하십시오. 그러면 HTML이 개선되고 SEO 점수가 최적화될 수도 있습니다. 11y 문제를 해결하려면 Axe와 같은 관련 도구를 사용할 수 있습니다.
고품질 SEO를 유지하는 방법
Google이 사이트 순위를 매기는 방식에 대한 기본 사항을 이해하면 Gatsby 사이트를 원활하게 운영할 수 있습니다. 그렇게 하려면 다음 측면에 주의하십시오.
- 우수하고 관련성 높은 콘텐츠
- 사용자의 접근성 향상
- 더 빠르게 실행되는 사이트
- 링크 구축 또는 다른 도메인에 사이트 소개
WordPress에서 Gatsby로의 마이그레이션에 대한 간소화된 가이드
프로세스를 요약하고 용이하게 하기 위해 WordPress에서 GatsbyJS로 사이트를 완전히 마이그레이션하는 단계별 가이드가 있습니다.
- 도구 > 내보내기에 있는 WordPress에서 XML을 다운로드합니다.
- 도구를 사용하여 XML을 Markdown 또는 일반 텍스트로 변환하십시오. 때로는 블로그 게시물을 변환하는 작업의 절반 이상을 수행합니다.
- 모든 이미지와 서버 콘텐츠를 다운로드합니다. WordPress 업로드에서 이미지 폴더로 이미지를 가져옵니다.
- 깨진 목록과 들여쓰기 코드 블록을 수정하여 Gatsby 스타일에 동화시키십시오.
- 썸네일을 저장하고 재사용을 위해 해당 폴더로 이동합니다.
- Netlify에 연결하여 자동 배포를 설정합니다. JavaScript로 작성된 경우 활성화하려면 typescript로 마이그레이션하십시오.
- CSS-in-JS를 사용할 수 있도록 스타일 옵션을 변경합니다. 스타일과 레이아웃을 업데이트합니다.
- 블로그 콘텐츠가 '/blog/' 범주에 속하도록 업데이트를 실행합니다.
- 모든 URL에 대해 리디렉션을 사용합니다.
- React Context API를 래퍼로 사용하여 야간 모드를 만듭니다.
- 수동 또는 자동 가져오기 도구를 사용하여 WordPress 주석을 Gatsby로 마이그레이션합니다.
이 모든 단계가 끝나면 페이지를 작성하고, GraphQL을 마스터하고, 적절한 쿼리를 만들고, 필요한 경우 작은 혼란을 정리해야 합니다.
마이그레이션 프로세스는 얼마나 걸립니까?
WordPress의 모든 콘텐츠를 Gatsby로 마이그레이션하는 것은 사용 가능한 콘텐츠의 양과 개인적인 노력에 따라 달라집니다. 이상적으로는 2주 이내에 모든 콘텐츠를 전송할 수 있어야 합니다. 그러나 React를 처음 사용하는 경우 적응하는 데 시간이 필요합니다.
일단 익숙해지면 MySQL 데이터베이스 내의 HTML 혼란 감소, 쉽게 액세스, 관리, 편집, 읽기, 백업 및 다른 사람과 공유할 수 있는 파일과 같이 Gatsby와 함께 제공되는 특전을 즐길 수 있습니다.
마지막 한가지…
Gatsby를 관리하려면 CSS, HTML, JavaScript, Node.js, React, ES6 및 GraphQL에 대한 일련의 기술과 배경 지식이 필요하지만 천천히 시작하여 각 기술을 배울 수 있습니다.
프로세스에 문제가 있더라도 궁극적으로 Gatsby 시작하기 자습서를 따라 마이그레이션 프로세스에 대한 더 자세한 가이드를 볼 수 있습니다.
코딩을 해볼까요?