JavaScript 프레임워크로 마이그레이션할 때 SEO 고려 사항

게시 됨: 2022-04-19

웹사이트에 대한 모든 주요 업데이트 또는 변경은 항상 SEO 고려 사항을 염두에 두고 이루어져야 합니다. robots.txt 오류에서 잘못 구현된 페이지 리디렉션에 이르기까지 검색 순위가 말 그대로 하룻밤 사이에 사라지는 것을 보는 것은 너무나 쉽습니다.

웹사이트를 JavaScript 프레임워크로 마이그레이션할 때도 마찬가지입니다. 몇 가지 신중한 계획을 통해 사이트가 검색 엔진 로봇에 계속 표시되도록 하고, 트래픽 손실로 이어지는 일반적인 위험과 함정을 피하고, 향후 지속적인 성장을 위해 사이트를 준비할 수 있습니다.

웹 사이트 마이그레이션 전반에 걸쳐 염두에 두어야 할 많은 기술적 세부 사항이 있는 크고 복잡한 문제입니다. 그러나 피해야 할 몇 가지 일반적인 실수와 올바른 방향으로 안내하는 데 도움이 될 수 있는 몇 가지 중요한 원칙이 있습니다.

다음은 JavaScript 프레임워크로 마이그레이션할 때 주요 SEO 문제 중 일부입니다.

중요한 URL 유지

Googlebot 및 기타 검색 엔진 크롤러는 웹사이트 콘텐츠를 URL과 연결합니다. 이것이 검색결과에서 사용자에게 연결되는 방식입니다. 그러나 JavaScript 프레임워크는 페이지를 동적으로 업데이트하여 정적 URL과 콘텐츠 간의 결합을 끊을 수 있습니다.

이는 이전 웹사이트의 중요한 URL이 보존되고 Googlebot이 계속 볼 수 있도록 특별한 처리가 필요한 SPA(단일 페이지 애플리케이션)에 해당되어 SERP에서 귀하의 기존 존재를 보호합니다.

귀하의 홈페이지가 여전히 올바른 순위로 표시되고 있다면 속지 마십시오. 이는 Google이 귀하의 SPA 홈페이지를 성공적으로 크롤링하지만 클라이언트 측에서 동적으로 제공되는 콘텐츠를 찾지 못한다는 신호일 수 있습니다.

크롤러 액세스 활성화

이것은 robots.txt 파일에서 검색 엔진 크롤러를 차단 해제하는 것 이상입니다. 사이트를 크롤링하고 콘텐츠를 볼 수 있으려면 이러한 도구가 필요합니다. 이를 위해서는 일종의 서버 측 렌더링이 필요할 것입니다.

서버 측 렌더링 또는 사전 렌더링을 구현하면 JavaScript가 실행된 후 표시되는 콘텐츠 버전을 검색 로봇에 제공하여 로봇에게 페이지 콘텐츠 자체를 렌더링하도록 요청하는 리소스 부담을 제거합니다.

이렇게 하면 크롤러가 각 페이지를 볼 수 있을 뿐만 아니라 페이지당 로봇의 크롤링 예산에 대한 수요를 줄임으로써 인덱싱되는 페이지 수와 웹사이트 계층 수준을 높일 수 있습니다.

크롤링 가능성 향상

정보를 소화하기 쉬운 방식으로 제시함으로써 로봇에게 더 많은 도움을 줄 수 있습니다. onclick 이벤트 및 무한 스크롤 페이지 매김과 같은 JavaScript 기능을 구현할 때 이것을 생각하십시오.

로봇이 실제로 할 수 있는 일을 염두에 두면 해당 기능 내에서 로봇이 콘텐츠를 볼 수 있도록 할 수 있습니다. 보상으로 더 많은 콘텐츠가 크롤링되고 색인이 생성되고 순위가 매겨집니다.

추가 보너스는 웹사이트의 크롤러 친화적인 버전을 만들어 사이트를 방문할 때 장치에서 JavaScript가 작동하지 않을 수 있는 일부 방문자의 접근성을 향상시킬 수 있다는 것입니다.

[사례 연구] Googlebot의 웹사이트 크롤링 기능을 개선하여 가시성 향상

Paris Match는 사이트를 심층적으로 감사하고, 강점과 약점을 파악하고, 우선 순위를 결정하고, Google 크롤링에 대한 차단 요소를 수정하는 등 분명한 문제에 직면해 있습니다. 파리매치 웹사이트의 SEO 이슈는 뉴스 사이트의 커먼즈 이슈입니다.
사례 연구 읽기

이전 URL 리디렉션

이전 URL을 있는 그대로 보존할 계획이 아니지만 검색 인지도가 높은 경우 로봇이 새 사이트맵 내에서 가장 근접하게 일치하는 URL을 가리키도록 영구 리디렉션을 구현하는 것이 좋습니다.

이렇게 하면 도메인 권한을 유지하고 순위를 보호할 수 있습니다. 최소한 새로 게시된 콘텐츠가 완전히 크롤링되고 색인이 생성될 때까지는 이전 페이지가 더 이상 상당한 트래픽을 가져오지 않는 경우 이전 리디렉션을 제거할지 여부를 결정할 수 있습니다.

일관된 내부 링크 사용

다시 말하지만, 이것은 콘텐츠의 동적 로딩에 관한 것입니다. JavaScript 프레임워크는 다른 URL로 이동하는 대신 외부 리소스에서 데이터를 가져와 현재 페이지를 업데이트하는 데 사용하는 기능과 같은 몇 가지 멋진 기능을 발휘할 수 있습니다.

SEO의 경우 콘텐츠를 상대적으로 정적으로 유지하고 페이지를 크게 변경할 때 다른 URL을 로드하는 것이 좋습니다. 크롤러는 이 접근 방식을 더 잘 이해하고 웹사이트를 전체적으로 더 잘 매핑할 수 있으며 새 페이지를 방문하고 올바르게 해석할 가능성이 더 높습니다.

내부 연결에 대한 잘못된 규율은 많은 마이그레이션의 주요 함정입니다. 로봇이 일부 페이지를 크롤링하기 훨씬 더 어렵게 만들고 일부 페이지의 상대적 중요성에 대해 다른 페이지와 비교하여 혼란스러운 신호를 보낼 수 있습니다.

일관성의 중요성

내부 링크 외에도 검색 엔진에 보내는 모든 신호에 대해 일관성을 유지하십시오. JavaScript 페이지가 사이트의 HTML 또는 PHP 페이지와 유사하게 로드되고 작동하는지 확인해야 하므로 웹사이트가 JavaScript 프레임워크를 통해 콘텐츠의 일부만 로드하는 경우 특히 그렇습니다.

예를 들어 후행 슬래시가 있거나 없는 URL 확인(해당 확인 또는 리디렉션이 웹사이트의 모든 영역에서 일관되어야 하는지 여부)과 표준 태그 구현과 같은 SEO 모범 사례(다음과 같은 측면에서 일관되어야 함)가 포함될 수 있습니다. 콘텐츠는 표준으로 간주됩니다).

특히 검색 순위와 관련된 경우 예방이 치료보다 낫습니다. 따라서 콘텐츠가 웹사이트에 표시되는 방식뿐 아니라 클라이언트 측 렌더링이든 서버 측 렌더링이든 간에 콘텐츠가 표시되는 방식과 JavaScript로의 마이그레이션이 웹사이트의 콘텐츠 가시성에 영향을 미치는지 여부를 이해하려고 노력하십시오. 다음 번에 크롤링됩니다.

[사례 연구] 재설계가 SEO에 불이익을 주지 않도록 하십시오.

웹사이트 재설계 1년 후, EasyCash는 곧 그들이 바라던 성능이 거기에 없다는 것을 깨달았습니다. 그들은 몇 가지 SEO 장애물을 식별하고 해결했습니다.
사례 연구 읽기

이게 바뀔까요?

동적 렌더링은 검색 로봇의 상대적으로 단순한 특성 때문에 SEO의 친구가 아닙니다. 미래에는 이러한 문제 중 일부를 해결할 수 있는 더 복잡하고 유능한 Googlebot을 볼 수 있지만 현재로서는 가능한 한 가장 먹을 수 있는 방식으로 콘텐츠를 제공하는 책임은 웹마스터에게 있습니다.

이것은 검색 존재에 의존하는 모든 웹 사이트의 계획, 구현 및 관리 전반에 걸쳐 사실입니다. 그러나 JavaScript 프레임워크로의 마이그레이션을 포함하여 주요 업데이트, 업그레이드 및 마이그레이션 중에 가장 중요합니다.

위에 설명된 몇 가지 함정과 모범 사례를 염두에 두면 웹사이트 마이그레이션의 최전선에서 SEO 야망을 유지하고 하룻밤 사이에 SERP에서 크고 수익성 있는 웹사이트가 사라지는 악몽 같은 시나리오를 피할 수 있습니다.