SPA 웹 사이트의 SEO 실천

13664 단어 vuereactseo

배경.



document site을 바탕으로 구축된 create-react-doc을 관찰한 결과 웹 페이지 코드가 비어 있는 것을 발견했다(아래 그림 참조).이것은 분명히 단일 페이지 애플리케이션(SPA) 사이트에서 자주 발생하는 문제입니다.이것은 검색엔진(SEO)에 의해 검색되는 데 불리하다.

설마 SPA 사이트가 SEO를 집행할 수 없단 말인가? 그렇다면 Gatsby, nuxt과 같은 틀은 많은 블로거들이 블로그를 만드는 첫 번째 선택이 될 수 있다.이런 틀의 기술 원리는 무엇입니까?호기심에 사로잡혀 나는 creat-react-doc년에 권한을 부여받은 SEO의 여정을 시작했다.

검색 엔진 최적화


연습하기 전에 왜 검색엔진이 한 페이지 응용 프로그램을 검색할 수 없는지 분석해 봅시다.핵심은 the crawler spider will not execute the JavaScript logic in the webpage during the crawling process이기 때문에 the jump logic hidden in the JavaScript will not be executed either입니다.
현재 SPA 사이트의 패키지 코드를 확인합니다.루트 인덱스 제외.html, 기타 모든 내용은 자바스크립트 논리에 주입되어 있기 때문에 브라우저가 SEO를 실행하지 않습니다.

그 밖에 상세한 검색엔진 최적화는 더욱 복잡한 과제이다.만약 당신이 SEO 최적화 초보자라면 구글 검색센터에서 제공한 Search Engine Optimization (SEO) Beginner's Guide문장을 읽어보는 것을 권장합니다.여기에는 17가지 모범 사례와 33가지 피해야 할 실천이 나열되어 있다.

SPA 웹 사이트 SEO 사례


라이트 파일 웹 사이트의 경우 SSR 시나리오는 잠시 고려하지 않습니다.
저자가 시장 문서 사이트의 SEO 시나리오를 조사한 결과 다음과 같은 네 가지 유형을 요약하였다.
  • 정적 템플릿 렌더링 시나리오
  • 404 리디렉션 방안
  • SSG 프로그램
  • 사전 렌더링 시나리오

    • 정적 템플릿 그리기


    hexo은 정적 템플릿 렌더링 시나리오 중 가장 일반적인 것입니다.이런 프레임워크는 특정한 템플릿 언어(예를 들어 pug)를 지정하여 주제를 개발하여 웹 내용을 직접 출력하는 목적을 달성해야 한다.

    404 리디렉션 시나리오


    404 리디렉션 솔루션의 원리는 주로 GitHub 페이지의 404 메커니즘을 사용하여 리디렉션을 하는 것이다.전형적인 병례는 spa-github-pages, sghpa이다.
    그러나 불행하게도 2019년 구글 adjusted crawler algorithm은 이런 리디렉션 방안이 현재 SEO에 불리하다.spa github 페이지의 작성자는 SEO가 필요하면 SSG 프로그램 또는 유료 프로그램 Netlify을 사용하라고 덧붙였다.

    SSG 프로그램


    SSG 프로그램의 전체 이름은 static site generator입니다.지역사회에서 nuxt, Gatsby과 다른 SEO 기술을 지원하는 구조는 예외 없이 SSG 방안으로 분류할 수 있다.
    nuxt 프레임워크를 예로 들면, conventional routing을 기반으로 nuxt generate 명령을 실행하여 vu 파일을 정적 웹 페이지로 변환합니다.
    예:
    -| pages/
--------| about.vue/
--------| index.vue/
    일시 중지하면 다음이 됩니다.
    -| dist/
--------| about/
----------| index.html
--------| index.html
    경로가 정적 상태인 후에 이 문서의 디렉터리 구조는 정적 사이트 서비스 공급자가 관리할 수 있습니다.

    사전 렌더링 시나리오


    SSG 방안을 상술한 분석을 한 후에 현재 SPA 장소 최적화의 관건은 종이에 static routing이다.nuxt와 Gatsby 등 프레임워크에 비해 create-react-doc은 전통적인 루트의 한계를 가지고 디렉터리 구조에서 유연하고 자유로운 조직을 가지고 있다.그것의 사이트 건설 이념은 File is Site으로 기존의 가격 인하 문서를 이전하는 것도 매우 편리하다.
    blog 프로젝트 구조의 경우 문서 구조는 다음과 같습니다.
    -| BasicSkill/
--------| basic/
----------| DOM.md
----------| HTML5.md
    다음과 같이 변경해야 합니다.
    -| BasicSkill/
--------| basic/
----------| DOM
------------| index.html
----------| HTML5
------------| index.html
    조사 결과 이 아이디어는 prerender-spa-plugin 프리 렌더링 솔루션과 잘 어울린다.사전 렌더링 시나리오의 원리는 다음 그림과 같습니다.

    지금까지 기술 선택은 SSG 구현을 위해 사전 렌더링 시나리오를 사용하도록 결정했습니다.

    사전 렌더링 프로그램 실행


    사전 렌더링 솔루션에서 react doc를 작성하는 절차는 다음과 같이 요약됩니다(전체 변경 사항은 mr 참조).
  • 은 해시 경로를 역사 경로로 전환했다.역사 루트 구조가 문서의 정적 디렉터리 구조와 자연스럽게 일치하기 때문이다.
    • export default function RouterRoot() {
  return (
-<HashRouter>
+ <BrowserRouter>
      <RoutersContainer />
-</HashRouter>
+ </BrowserRouter>
  )
}
  • 은 개발 환경과 생성 환경을 바탕으로 pre-rendering environment을 증가시켰고 루트 환경과 일치한다.주로 resource files과 sub-paths under the main domain name 간의 통신 문제를 해결한다.과정은 구불구불하고 관심 있는 친구는 issue을 볼 수 있다.
    • const ifProd = env ==='prod'
+ const ifPrerender = window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.prerender
+ const ifAddPrefix = ifProd && !ifPrerender

<Route
  key={item.path}
  exact
-path={item.path}
+ path={ifAddPrefix? `/${repo}${item.path}`: item.path}
  render={() => {... }}
/>
  • 은 웹 패키지 5의 prerenderspa 플러그인과 호환됩니다.
    • 공식 버전은 현재 웹 패키지 5를 지원하지 않습니다. 자세한 내용은 issue을 참고하십시오. 미리 렌더링한 후에 리셋을 실행해야 합니다.이에 따라 현재 version의 사본이 갈라져 상술한 문제를 해결했다.
    위 단계를 통해 static routing은 결국 SPA 사이트에서 구현됩니다.

    SEO 최적화에 추가 버프를 더하면 사이트가 몇 초 안에 열릴까요?


    지금까지 FP, FCP, LCP 및 기타 지표 데이터가 사이트 최적화 전후의 변화를 살펴보겠습니다.
    blog 사이트의 경우 전후 인덱싱 데이터를 다음과 같이 최적화합니다.
    최적화 전: 사전 렌더링 시나리오에 액세스하기 전에 첫 번째 그래픽(FP, FCP)의 시간 노드는 약 8s, LCP는 약 17s입니다.

    최적화 후: 사전 렌더링 시나리오에 액세스한 후 첫 번째 그리기 타임 노드는 1s에서 시작하고 LCP는 1.5s에서 시작합니다.

    최적화 전후 대비: 첫 번째 화면 제작 속도는 8배, 최대 내용 제작 속도는 11배 증가했다.SEO를 최적화하고 싶지만 웹 사이트의 성능을 최적화하는 또 다른 방법을 찾았습니다.

    사이트 맵 생성 사이트 맵


    사전 렌더링을 완성하고 사이트의 정적 루트를 실현한 후에 검색엔진 최적화 목표와 한 걸음 더 가까워졌다.SEO optimization details을 잠시 보류하고 SEO site map의 핵심 복지로 직행한다.
    사이트 맵의 형식과 각 필드의 의미는 다음과 같습니다.
    <?xml version="1.0" encoding="utf-8"?>
<urlset>
  <!-- Required tag, this is the definition entry of a specific link, each piece of data must be included with <url> and </url>, this is required -->
  <url>
    <!-- Required, URL link address, length must not exceed 256 bytes -->
    <loc>http://www.yoursite.com/yoursite.html</loc>
    <!-- You don't need to submit the tag, which is used to specify the last update time of the link -->
    <lastmod>2021-03-06</lastmod>
    <!-- You don't need to submit the tag, use this tag to tell the update frequency of this link -->
    <changefreq>daily</changefreq>
    <!-- You don’t need to submit the tag, which is used to specify the priority ratio of this link to other links. This value is set between 0.0-1.0 -->
    <priority>0.8</priority>
  </url>
</urlset>

    In the above sitemap, the lastmod, changefreq, and priority fields are not so important for SEO, see how-to-create-a-sitemap


    상기 구조에 따라 저는 사이트 지도 생성 패키지 crd-generator-sitemap을 개발했는데 그 논리는 미리 렌더링된 루트 경로를 상기 형식으로 연결하는 것입니다.
    사용자는 사이트 루트 디렉터리 config.yml에 다음과 같은 매개 변수를 추가하면 자동 발표 과정에서 sitemap을 자동으로 생성할 수 있다.
    seo:
  google: true
    생성된 사이트 맵을 Google Search Console에 제출하여 시도,

    마지막으로 최적화 전후 구글 검색 site을 검증했다.
    최적화 전: 데이터 하나만 찾습니다.

    최적화 후: 사이트 맵에 표시된 위치 데이터를 검색합니다.

    지금까지 SSG를 사용하여 SPA 사이트를 최적화하여 SEO를 실현하는 완전한 과정은 이미 실현되었다.후속 작업은 Search Engine Optimization (SEO) Beginner's Guide을 참고하여 SEO 세부 사항을 최적화하고 엔진이 시작된 후의 더 많은 검색을 지원하십시오.

    요약


    본고는 SPA 사이트 SEO의 실현에 착안하여 SEO의 기본 원리, SPA 사이트 SEO의 네 가지 실제 사례를 차례로 소개하고 create-react-doc SPA 구조와 결합하여 완전한 SEO 실천을 한다.
    이 글이 도움이 된다면 star, feedback을 환영합니다.

    관련 링크

  • create-react-doc
  • why-is-my-website-not-showing-up-on-google/
  • A Technical Guide to SEO With Gatsby.js
    • Swift에서 Evernote 응용 환경 구축 절차

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage