JavaScript SEO: 따라야 할 모범 사례
게시 됨: 2018-11-27소개:
JavaScript와 SEO 간의 관계는 오랫동안 논쟁의 여지가 있는 주제였으며 Java의 기본을 이해하는 것은 SEO 전문가의 중요한 작업이 되었습니다. 개발 중인 대부분의 웹사이트는 JavaScript를 프로그래밍 언어로 사용합니다. 우수한 프레임워크를 사용하여 웹 페이지를 만들고 해당 페이지의 다양한 요소를 제어합니다.
JS 프레임워크는 처음에 브라우저의 클라이언트 측에서만 구현되었지만 클라이언트 측 렌더링에는 많은 문제가 있었습니다. 최근에는 호스트 소프트웨어에도 내장되어 있고, 웹서버의 서버측에도 내장되어 있어 그 고통과 수고를 경감시키고 있다. 이 이니셔티브는 또한 자바로 작성된 웹페이지의 검색 엔진 가치를 향상시키기 위해 자바스크립트와 SEO 관행을 결합하는 길을 열었습니다.
JavaScript는 SEO에 어떤 영향을 미칩니까?
두 사람의 관계는 수년 동안 가상 세계에서 명확하게 이해되지 않았습니다. 10년 전에는 JavaScript가 콘텐츠를 표현하고 이해하는 데 있어 검색 엔진에 미치는 영향에 대한 명확한 아이디어 없이 JavaScript로 웹 페이지를 만드는 것이 유명한 관행이었습니다. 검색 엔진도 JS 콘텐츠를 적절하게 처리할 수 없었습니다.
시간이 지남에 따라 Google은 JS로 작성된 웹사이트를 처리하는 관점을 변경했습니다. 검색 엔진이 JS 웹사이트를 크롤링할 수 있는지, 그리고 Google이 그러한 웹사이트의 순위를 매길 수 있을지에 대해 엄청난 의심이 있었습니다. JS를 사용하는 웹 사이트는 뛰어난 로드 시간, 더 빠른 서버 및 서버 응답을 기다리지 않고 코드 기능을 즉시 실행할 수 있는 탁월한 이점이 있습니다. 더 풍부한 인터페이스와 다양성을 갖춘 JS 웹사이트를 구현하는 것도 쉬웠습니다. 그러나 JavaScript SEO는 그 과정에서 많은 문제를 가져왔고 웹마스터는 JS 코드를 기반으로 하는 콘텐츠를 최적화하는 데 실패했습니다.
Google과 같은 검색 엔진은 JavaScript 코드를 크롤링할 수 없었지만 색인을 생성하고 순위를 매길 수 있었습니다. 이제 웹마스터는 Google이 생성된 콘텐츠를 쉽게 이해하고 검색 엔진에서 웹페이지의 순위를 매길 수 있도록 하는 방법을 생각해야 합니다. 이 접근 방식을 방해하는 많은 도구와 플러그인이 있습니다.
구글은 자바스크립트를 어떻게 읽는가?
논의된 바와 같이 Google이 JS 코드로 작성된 웹페이지를 크롤링하는 것은 매우 어렵습니다. 크롤링 프로세스는 모두 새로운 발견에 관한 것이며 프로세스가 복잡합니다. 기능을 수행하기 위해 웹 크롤러 또는 스파이더를 사용합니다. Googlebot은 색인 생성 관점에서 웹사이트를 301페이지와 같이 취급하는 인기 있는 크롤러 중 하나입니다. 이러한 인덱싱된 URL은 리디렉션된 URL로 대체됩니다.
Googlebot은 웹 페이지를 식별하고 웹 페이지의 색인이 생성되는 지점까지 페이지의 링크를 따릅니다. 이는 페이지를 렌더링하지 않고 소스 코드만 분석하고 스크립트에서 찾은 URL을 추출하는 구문 분석 모듈을 사용하여 수행됩니다. 이 웹 스파이더는 HTML 코드와 하이퍼링크도 확인할 수 있습니다. Googlebot은 robots.txt 파일을 사용하여 크롤링할 페이지와 팔로우하지 않을 페이지를 알려줌으로써 도움을 받을 수 있습니다.
이 방법을 통해 크롤러는 웹 페이지의 코드 데이터에 액세스할 수 있습니다. robots.txt 파일을 사용하여 사용자가 보기를 원하는 페이지와 액세스하지 말아야 할 페이지를 Google에 지시할 수 있습니다. 동일한 파일을 사용하여 순위 하락 및 오류를 방지하고 봇의 속도도 향상시킬 수 있습니다.
JavaScript 웹사이트를 SEO 친화적으로 만드는 방법은 무엇입니까?
처음에는 검색 엔진이 AJAX 및 JS 스크립트 기반 웹사이트를 처리할 수 있는 장비가 없었습니다. 시스템은 사용자와 웹사이트 모두에게 고통을 주는 이러한 코드에 쓰여진 페이지를 이해할 수 없었습니다. 현대의 SEO 전문가는 순위를 매기기 전에 웹 페이지를 탐색하고 분석하기 위해 문서 개체 모델의 기초를 이해해야 합니다. 2018년부터 Google은 JavaScript 웹 페이지를 렌더링하기 위해 AJAX를 요구하지 않았습니다.
HTML 문서를 수신하고 해당 JS 요소를 식별한 후 Google 브라우저는 DOM을 시작하여 검색 엔진이 웹페이지의 순위를 매길 수 있도록 합니다. JavaScript 웹 페이지를 SEO 친화적으로 만들기 위한 몇 가지 이니셔티브는 다음과 같습니다.
1. 검색 엔진에서 JS 페이지를 볼 수 있도록 만들기:
Robots.txt 파일은 검색 엔진에 충분한 크롤링 기회를 제공하며 이를 차단하면 웹 크롤러에 대해 페이지가 다르게 표시됩니다. 따라서 검색 엔진은 완전한 사용자 경험을 얻을 수 없으며 Google은 클로킹과 같은 작업을 고려할 수 있습니다. 웹 크롤러가 사용자와 동일한 방식으로 웹 페이지를 볼 수 있도록 모든 리소스를 렌더링하는 것이 중요합니다.
2. 내부 연결:
이것은 웹사이트의 아키텍처를 구축하고 일부 중요한 웹 페이지를 검색 엔진에 투영하는 강력한 SEO 도구입니다. 이러한 내부 링크는 JS 온클릭으로 대체되어서는 안 됩니다. 더 나은 사용자 경험을 위해 일반 HTML 또는 DOM 태그를 사용하여 내부 링크를 작성할 수 있습니다.
3. URL의 구조:
JS 웹사이트에는 Google에서 엄격히 허용하지 않는 hashbangs 및 lone 해시와 같은 URL로 조각 식별이 포함되어 있습니다. API는 주소 표시줄의 URL을 업데이트하고 JS 웹사이트가 명확한 URL을 활용할 수 있도록 하므로 API를 사용하는 것이 좋습니다. 명확한 URL은 비기술 사용자도 이해할 수 있으므로 검색 엔진에 친숙합니다.
4. 웹사이트 테스트:
Google은 다양한 형태의 JS 웹 페이지를 크롤링할 수 있지만 그 중 일부는 다른 것보다 더 어려워 보입니다. 따라서 웹사이트를 테스트하여 가능한 문제와 실수를 예측하고 이를 방지하는 것이 중요합니다. 웹페이지의 콘텐츠가 DOM에 나타나는지 확인하는 것이 중요합니다. Google이 콘텐츠의 색인을 생성할 수 있는지 확인하기 위해 몇 개의 웹페이지를 확인해야 합니다.
5. HTML 스냅샷:
Google은 여전히 HTML 스냅샷을 지원하지만 이를 피해야 할 요소로 제안합니다. 이는 검색 엔진이 웹사이트에서 JS를 파악할 수 없는 경우에 중요합니다. HTML 스냅샷을 검색 엔진 웹 크롤러에 반환하는 것이 콘텐츠가 완전히 거부되는 것보다 낫습니다.
그러나 현재 JavaScript에 올바르지 않은 것이 있고 지원 팀에 연락할 수 없는 경우에만 그렇게 하십시오.
6. 웹사이트의 지연 시간:
브라우저가 HTML 문서로 DOM을 생성하면 문서 상단에 방대한 파일이 존재하고 다른 모든 정보는 나중에 나타납니다. 사용자에게 중요한 정보를 먼저 리드하는 것이 바람직합니다. 사이트 대기 시간을 방지하고 웹사이트를 SEO 친화적으로 만들려면 가장 중요한 정보가 맨 위에 있어야 합니다.
JavaScript SEO의 원칙:
다음은 JS SEO의 원칙입니다.
1. 서버 측 렌더링 수행:
서버 렌더링에 어떤 기술을 사용하든 보편적인 접근 방식을 사용해야 합니다. 또한 웹 크롤러가 검색 엔진에 나열할 적절한 페이지를 쉽게 렌더링할 수 있습니다.
2. 이미지 갤러리 교체:
대부분의 웹 사이트 개발자는 많은 이미지를 통합하여 성능을 향상시키는 경향이 있습니다. 그러나 검색 엔진은 이미지에 의존하고 이미지 특정 트래픽을 렌더링합니다. 모든 이미지를 렌더링하기 위해 웹 사이트 개발자는 jQuery를 사용하여 검색 엔진에 표시되는 내용을 제어하는 아키텍처를 사용해야 합니다.
3. 탭 콘텐츠 처리:
웹 사이트에는 콘텐츠를 안팎으로 바꾸는 단일 블록 요소가 있는 경향이 있지만 이는 첫 번째 탭의 콘텐츠만 인덱싱되고 다른 탭의 콘텐츠는 인덱싱되지 않는다는 의미이기도 합니다. 반품 정책 및 개인 정보 보호 정책의 페이지를 제외하고 웹 사이트의 다른 중요한 콘텐츠는 이 범주에 속해서는 안 됩니다.
4. 페이지가 매겨진 콘텐츠:
웹 페이지에 처음 나타나는 데이터만 인덱싱되고 나머지는 인덱싱되지 않습니다. 따라서 다른 페이지의 콘텐츠도 검색 엔진에서 링크로 쉽게 확인할 수 있는 URL과 연결되어야 합니다.
5. 메타데이터:
메타데이터 업데이트 및 라우팅은 JS 지향 웹사이트에서 악몽이 될 수 있습니다. Vivaldi와 같은 솔루션은 초기 로드와 탐색 페이지 모두에서 즉각적인 메타데이터 생성을 허용하므로 괜찮습니다. 페이지 사이를 탐색하는 사용자 경험에도 일관성이 있으므로 Google은 순위를 고려합니다.
JS 프레임워크를 위한 SEO의 기본:
JavaScript 프레임워크의 SEO에 대한 기본 사항은 다음과 같이 나열할 수 있습니다. 이러한 핵심 원칙 요소는 웹 페이지 개발자가 검색 엔진에서 JS 콘텐츠의 순위를 인덱싱할 때 직면하는 모든 문제와 질문을 해결하는 데 도움이 됩니다.
- load 이벤트로 프레임된 콘텐츠는 인덱싱 가능해야 합니다.
- 사용자 이벤트에 의존하는 콘텐츠는 검색 엔진에서 인덱싱할 수 없습니다.
- 페이지에는 검색 엔진 순위에 대한 서버 측 지원과 함께 최적의 URL이 필요합니다.
- 기존 페이지와 같은 SEO 관행을 사용하여 렌더링된 HTML 요소를 검사하는 것이 중요합니다.
- HTML 버전 간의 모순을 피하는 것이 중요합니다.
SEO 웹사이트에 JavaScript 구현을 구현하는 것은 몇 가지 위험이 있으며 사용자가 핵심 원칙에 대해 배우고 웹사이트 구현도 수정해야 합니다. 위험 허용은 JS용 SEO를 구현하는 동안 중요한 기능입니다. 그러나 HTML에서 전체 웹사이트를 마이그레이션하고 시간과 적절한 테스트를 통해 Google에서 순위를 매길 수 있습니다.
자바스크립트 SEO 모범 사례:
많은 검색 엔진 크롤러는 JS 기반 웹사이트를 크롤링하는 데 어려움을 겪고 있으며 결과적으로 브랜드 관리자와 웹 개발자는 자바 기반 플랫폼에서 웹 페이지 생성을 중단합니다. 그러나 실제로 일부 JS 기반 웹사이트는 사랑스러운 사용자 경험을 제공합니다. JS로 SEO 작업을 전략적으로 수행하고 웹사이트 개발자와 최종 사용자가 기술이 제공하는 이점을 최대한 활용할 수 있도록 도와야 할 때입니다.
SEO와 JS를 결합하는 모범 사례 중 하나는 Google 검색의 페이지 렌더링입니다. 이는 검색 엔진이 소스 코드가 아닌 렌더링된 페이지를 크롤링하기 때문입니다. 소스 코드만 고려하면 많은 것을 놓칠 수 있으며 이러한 렌더링된 페이지를 크롤링하는 것은 시간이 많이 걸리고 정보에 대한 가치가 거의 없습니다.
Googlebot은 웹사이트를 최적화하기 위한 최적의 위치인 웹에서 렌더링 서비스를 사용합니다. URL 구조는 페이지에 액세스할 때 크롤러를 끌어들이는 첫 번째 흥미로운 요소입니다. JS SEO의 모범 사례 중 하나는 검색 엔진에서 웹사이트 URL에 액세스할 수 있도록 하는 것입니다. JS 웹페이지는 해시태그를 많이 사용하는 경향이 있으며 해시태그 뒤에 오는 것은 서버로 전송되지 않고 Google에서 식별하지 않습니다. 이에 대한 가장 좋은 대안은 Google에 URL을 고려하도록 지시하는 hashbang입니다. 웹사이트 크롤러가 URL을 추적할 수 있도록 하는 한 가지 방법은 웹페이지에 깨끗한 URL을 사용하고 웹사이트 API의 푸시 상태 기능을 활용하는 것입니다.
검색 엔진에서 크롤링하고 따라갈 수 있는 내부 링크를 사용하는 것도 좋은 방법입니다. 웹사이트 전반에 걸친 내부 링크는 최고의 SEO 관행에 도움이 되고 웹 콘텐츠를 홍보할 기회도 제공합니다.
콘텐츠 로드 시간을 단축하는 것은 JS 페이지에서 효율적인 SEO 방법입니다. 메타데이터는 사이트의 특정 위치에서 많은 정보를 제공하고 뛰어난 탐색을 용이하게 하기 때문에 여기에서 가장 좋은 전술입니다. 탭 콘텐츠를 사용하여 로드 시간을 단축할 수도 있습니다. 사용자가 첫 번째 탭을 탐색하는 동안 두 번째, 세 번째 및 네 번째 탭의 콘텐츠가 계속 로드될 수 있습니다. 그러나 Google이 콘텐츠가 숨겨진 페이지에 도착하면 검색 크롤러에서 탈출합니다. 따라서 가장 좋은 방법은 각 탭에 대해 독립적인 페이지를 만드는 것입니다.
결론:
비즈니스 성공을 위해 웹사이트는 청중이 콘텐츠에 액세스하고 읽을 수 있도록 해야 합니다. 쉽게 액세스할 수 있도록 Google은 검색 엔진의 맨 위에 페이지의 순위를 지정해야 합니다. 웹사이트가 멋지게 보이도록 하는 충분한 기술이 있습니다. 그러나 검색 엔진이 해당 콘텐츠에 액세스할 수 없으면 웹 가시성이 너무 많이 떨어집니다. 따라서 SEO는 비즈니스 수익성을 위한 가시성과 트래픽을 향상시키기 위해 작동하고 기술의 한계에 적응해야 합니다.