그것에 대해 알아야 할 사항

최근 몇 년 동안 단일 페이지 애플리케이션(SPA)이 점점 인기를 얻고 있습니다. 그러나 SPA-SEO는 도전입니다. 회사는 사용자와 웹 개발자 모두에게 상당한 이점을 제공하기 때문에 단일 페이지 솔루션을 선호하는 경우가 많습니다. 이러한 웹 개발 솔루션은 빠르고 사용하기 쉬우며 ReSTful API를 지원하고 처리 부하를 서버와 클라이언트 시스템 간에 분산할 수 있습니다. 또한 단일 페이지 애플리케이션을 기본 모바일 애플리케이션으로 전환하는 것이 훨씬 쉽습니다.

그러나 최고의 온페이지 SEO 관행은 서로 다른 검색어에 최적화된 서로 다른 페이지 간의 내부 링크를 중심으로 이루어집니다. 따라서 단일 페이지 애플리케이션에는 다른 접근 방식이 필요합니다. 사실 SEO는 기존의 다중 페이지 웹 애플리케이션보다 단일 페이지 애플리케이션에서 더 어렵습니다. 그러나 불가능한 것은 아닙니다. 아래에서 K&C가 고객 중 한 명의 문제를 어떻게 극복했는지 알아보십시오.

Sitemap 프로토콜은 단일 페이지 애플리케이션이든 다중 페이지 애플리케이션이든 상관없이 SEO에 필수적입니다. 검색 엔진에 당사 웹 사이트의 어떤 페이지를 크롤링할 수 있는지 알려줍니다. 이를 통해 Google 및 기타 검색 엔진은 귀하의 애플리케이션이 무엇에 관한 것인지, 애플리케이션이 귀중한 답변을 제공하는 사용자 쿼리가 무엇인지 이해할 수 있습니다.

사이트맵은 웹사이트의 URL을 나열하는 .xml 파일입니다. 여기에서 각 페이지에 대한 정보(마지막으로 업데이트된 시기, 업데이트 빈도, 사이트의 다른 URL과 관련된 페이지의 중요성)를 저장할 수 있습니다. Googlebot과 같은 검색 엔진 크롤러는 이 파일을 읽고 이러한 방식으로 정보를 받아 웹 사이트 크롤링 프로세스를 보다 효율적으로 만들 수 있습니다.

Screaming Frog와 같은 크롤링 도구를 사용하면 완벽한 사이트맵을 쉽게 만들 수 있습니다. 또한 최근 출시된 ChatGPT-3 AI 도구를 사용하면 코딩 지식이나 프로세스에 대한 이전 경험 없이 빠르고 쉽게 사이트맵을 만들 수 있습니다.

단일 페이지 애플리케이션은 대부분은 아니지만 JavaScript로 구축되는 경우가 많습니다. 그러나 Google과 같은 검색 엔진 크롤러는 클라이언트 측 렌더링을 사용하기 때문에 JavaScript도 읽을 수 없습니다. 이로 인해 기술 구성이 도움이 되지 않는 한 크롤러가 SPA에 게시된 텍스트 콘텐츠에 액세스하고 “읽는” 것이 어렵습니다. 따라서 보기 흉한 “#!”을 사용하지 않고 검색 엔진 크롤러가 단일 페이지 애플리케이션에 게시된 콘텐츠를 이해하도록 돕는 방법은 무엇입니까? URL에?

애플리케이션이 단일 페이지임을 검색 엔진 크롤러에 알리려면 웹사이트 상단에 태그를 추가해야 합니다. 그러나 인덱싱할 페이지를 지정하는 가장 좋은 방법은 Sitemap.XML 파일을 사용하는 것입니다. 이는 검색 엔진에 “특정 URL에 집중해 주시면 감사하겠습니다.”라고 말하는 것과 같습니다. 그리고 검색 엔진 크롤러는 공손한 웹 개발자에게 감사합니다!

사이트맵을 사용하면 페이지 우선 순위, 최종 수정 날짜, 변경 빈도, 특히 다국어 웹 사이트의 경우 eflang> 링크를 반환하는 웹 사이트의 표준 URL(비표준 URL은 적용되지 않음)을 지정할 수 있습니다.

어쨌든 사이트맵에는 약간의 광고가 필요합니다. 검색 크롤러가 먼저 robot.TXT 파일을 대상으로 하는지 확인해야 합니다. 다음 행을 추가합니다. “Sitemap: https://www.example.com/sitemap.xml”은 사이트맵의 위치를 ​​나타내며 사이트맵이 크롤러에 대한 첫 번째 방문 및 모든 후속 방문의 첫 번째 주소인지 확인합니다.

좋은 사이트맵 프로모션의 두 번째 단계는 웹마스터 도구 사이트에 사이트맵을 제출하는 것입니다. 이것은 크롤링을 시작하는 좋은 방법이며 일반적으로 다음 몇 시간 내에 수행됩니다.

JavaScript의 클라이언트 측 렌더링은 SEO 관련 고려 사항도 가져옵니다. Google의 Martin Splitt는 다음과 같이 설명합니다.

“JavaScript 프레임워크를 사용하는 경우 기본값은 클라이언트 측 렌더링입니다. 즉, 원시 HTML을 보낸 다음 브라우저에서 콘텐츠를 가져와 어셈블하는 JavaScript 조각을 보냅니다.”

Botify는 클라이언트 측 렌더링을 IKEA에서 가구를 주문하는 것과 같이 생각할 것을 제안합니다. 가구는 별도의 조각으로 배송된 다음 조립해야 합니다.

원천: 보티파이

클라이언트 측 렌더링의 단점은 Googlebot과 같은 검색 엔진 봇이 콘텐츠에 액세스하는 방식입니다. Googlebot에는 두 번째 인덱싱 웨이브라는 것이 있습니다. 즉, 페이지의 HTML 코드가 먼저 크롤링되고 인덱싱됩니다. 그런 다음 리소스를 사용할 수 있을 때 봇이 돌아와 JavaScript를 렌더링합니다. 이 2계층 접근 방식은 때때로 자바스크립트 콘텐츠가 간과되어 Google 색인에 포함되지 않을 수 있음을 의미합니다.

웹 앱의 소셜 미디어 통합은 현대 온라인 공간에서 필수적입니다. 이는 한 페이지 및 여러 페이지 검색 엔진 최적화에 모두 적용됩니다. 그러나 전자의 경우 특히 중요합니다. Open Graph와 같은 프로토콜은 소셜 네트워크에서 공유하려는 정보를 최적화하고 구조화합니다.

원래 Facebook용으로 개발된 Open Graph 프로토콜은 이제 사용자가 타사 웹사이트의 콘텐츠에 대한 URL 링크를 통해 공유하는 데이터를 제어하는 ​​데 사용됩니다.

OG(오픈 그래프)를 웹사이트에 통합하려면 공유할 HTML 페이지 섹션에 특수 태그를 추가하기만 하면 됩니다.

OG 메타 태그는 소셜 미디어에서 공유할 때 웹 페이지가 어떻게 보이는지에 대한 책임이 있습니다. 사용자가 처음으로 URL 링크를 공유하면 Facebook의 크롤러가 페이지를 분석하고 관련 정보를 수집한 다음 Facebook 페이지에 표시되는 그래픽 개체를 생성합니다.

OG에는 몇 가지 필수 태그가 있습니다.

– og: 제목 – 이름(예: 기사);

– og: 설명 – 데이터 내용에 대한 간략한 설명

– og: type – 페이지 콘텐츠의 데이터 유형(기본값은 “website”)입니다.

– og: image – 페이지를 표시해야 하는 이미지의 URL 주소입니다.

– og:url – 페이지의 표준 URL입니다.

페이지에 OG태그가 포함되어 있지 않으면 Facebook 크롤러는 자동으로 필요한 콘텐츠를 검색하고 페이지에서 찾은 정보를 가장 잘 전달하는 방법을 스스로 결정합니다. 이것은 귀하의 선호도와 일치하지 않을 수 있습니다.

페이지에 Open Graph 메타 태그를 설정하는 것은 웹사이트를 소셜 네트워크와 잘 통합하는 가장 좋은 방법입니다. 메타 태그에 대한 이전 경험이 있으면 쉽게 수행할 수 있습니다.

rel=canonical 링크 요소는 웹 개발자가 콘텐츠 중복을 방지하는 데 도움이 되는 HTML 요소입니다. 이 요소를 사용하면 단일 페이지 애플리케이션의 SEO가 향상됩니다. Google의 봇은 웹사이트의 동일하거나 매우 유사한 콘텐츠에 관심이 없기 때문입니다.

아이디어는 간단합니다. Google을 혼란스럽게 할 수 있는 유사한 콘텐츠가 여러 개 있으면 SERP(검색 엔진 결과 페이지)에 중복 콘텐츠 페이지가 제대로 표시되지 않을 수 있습니다. 버전을 선택하고 “표준”으로 만드세요. . “. 그런 다음 검색 엔진은 귀하가 선택한 콘텐츠에 초점을 맞추고 다른 중복되거나 유사한 콘텐츠는 대체로 무시합니다.

각각의 유사한 URL 집합에 대해 적절한 표준 URL을 선택하면 사이트의 검색 엔진 최적화가 향상됩니다. 검색 엔진은 신뢰할 수 있는 버전을 알고 있기 때문에 서로 다른 버전에 대한 모든 링크를 해당 버전에 대한 링크로 계산할 수 있습니다.

단일 페이지 애플리케이션에 링크 요소 rel=”canonical”을 사용하려면 URL을 동적으로 생성해야 합니다.

또한 “canonical”과 “sitemap.xml”의 URL은 동일해야 합니다!

단일 페이지 애플리케이션의 SEO는 도전적이며 아마도 SEO 컨설턴트의 첫 번째 선택은 아닐 것입니다. 그러나 검색 엔진 크롤러에 대한 JavaScript의 기본 액세스 불가능성은 위에서 설명한 대로 우회할 수 있습니다. 단일 페이지 구조는 SEO 전문가가 작업하기를 좋아하는 인페이지 링크 및 콘텐츠 사일로 접근 방식을 제한합니다.

그러나 단일 페이지 애플리케이션을 Google 및 기타 검색 엔진에 인덱싱하고 키워드 순위를 높이는 것은 확실히 불가능하지 않습니다. 그러나 비즈니스상의 이유로 단일 페이지 응용 프로그램을 사용하기로 결정한 경우 약간의 오버헤드가 예상된다는 의미입니다.

K&C(Krusche & Company)는 뮌헨에 기반을 둔 IT 아웃소싱 회사로 근해 및 중부 연안 기술 인재를 모집하고 있습니다. 당사는 다음을 통해 귀사의 소프트웨어 개발 및 기타 IT 리소스를 유연하고 편리하게 보완하거나 제공합니다.

• IT 팀 확장
• 전담 팀

본체 임대에서 전체 프로젝트/납품 관리에 이르기까지 유연한 협력 모델 중에서 선택할 수 있습니다.

우리는 4개의 근해 및 중부 지역에 사무실을 두고 있으며 더 많은 지역에 원격 지사를 두고 있습니다.

우리의 고유한 판매 제안은 독일과 유럽에서 가장 잘 알려진 일부 브랜드와 최대 20년 이상 IT 아웃소싱 파트너십을 맺는 것입니다. 우리는 귀사의 IT 아웃소싱 및 인력 요구 사항도 충족할 것을 약속드립니다.