Vue 개발 사이트 seo 최적화 방법

vue 등 js 데이터 바 인 딩 메커니즘 으로 페이지 데 이 터 를 보 여 주 었 기 때문에 파충류 가 얻 은 html 는 최종 데이터 의 렌 더 링 페이지 가 아니 라 모델 페이지 이 고 검색엔진 은 요청 한 js 를 실행 하지 않 습 니 다.vue 의 프로젝트 는 모두 ajax 요청 데이터 입 니 다.엔진 파충류 가 페이지 에 들 어가 텍스트 내용 을 얻 을 수 없습니다.현재 대부분의 솔 루 션 은 ajax 렌 더 링 데 이 터 를 사용 하지 않 고 server 엔 드 렌 더 링,즉 SSR 을 사용 합 니 다.
현재 vue 기반 방안 은 Nuxt.js 입 니 다.같은 유형 에 도 React 버 전의 Nuxt.js 가 있 기 때문에 서버 렌 더 링 은 가능 한 한 서버 에서 브 라 우 저 에 보 내기 전에 페이지 에 파충류 가 기어 오 를 수 있 는 데이터 가 있 습 니 다.
방법 1.prerender-spa-plugin 플러그 인 을 이용 하여 한 페이지 를 여러 페이지 로 포장 합 니 다.
전통 적 인 vue 는 vue-cli 비 계 를 통 해 구축 이 완 료 된 후에 npm run build 를 통 해 마지막 으로 온라인 에 올 릴 html 코드 를 포장 하여 생 성 해 야 합 니 다.
vue 가 구축 한 단일 페이지 프로젝트 는 여러 가지 장점 이 있 고 유지 하기 쉬 우 며 코드 가 간결 하고 개발 체험 이 좋다 는 등 이다.그러나 일부 전통 적 인 인터넷 회사 에 대해 vue 단일 페이지 에 치 명 적 인 문 제 는 바로 seo 최적화 문제 이다.다음은 정상적으로 포 장 된 vue 단일 페이지 디 렉 터 리 와 index.html 코드 입 니 다.


디 렉 터 리 는 index.html 파일 만 있 고 이 html 파일 에는 아무런 내용 이 없 으 며 하나의 id 만 app 으로 vue 인 스 턴 스 를 마 운 트 하 는 div 입 니 다.
구 글 검색엔진 은 이미 한 페이지 의 정 보 를 얻 는 것 을 잘 지원 할 수 있 지만 구 글 은 외국 의 국내 에서 사용 하기 때문에 벽 을 넘 어야 하기 때문에 고려 하지 않 는 다.바 이 두 는 국내 에서 가장 주요 한 검색엔진 으로 바 이 두 는 한 페이지 의 데 이 터 를 얻 을 수 없 기 때문에 이런 프로젝트 가 인터넷 에 접속 하면 다른 사람 이 바 이 두 에서 검색 할 때 이 프로젝트 를 찾기 어렵다.현재 우리 회사 의 대부분 프로젝트 는 서 최 적 화 를 해 야 하기 때문에 이 문 제 는 나 에 게 잃 어 버 렸 다.
해결 방법
여기 서 먼저 말씀 드 리 겠 습 니 다.포장 할 때 오류 가 발생 하면 npm 에 puppeter 를 설치 해 야 할 것 같 습 니 다.
첫 번 째 단 계 는 prerender-spa-plugin 을 통 해 vue.config.js 설정 을 진행 합 니 다.

npm isntall prerender-spa-plugin --save

이 물건 은 vue 에서 한 페이지 를 여러 페이지 로 포장 하 는 제3자 플러그 인 입 니 다.설치 가 완료 되면 vue.config.js 설정 은 다음 과 같 습 니 다.

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const webpack = require('webpack');
const path = require('path');
 
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    //        ，    webpakc     。
                    //          ！！！
                    //          ，          ，               ，             。
                    staticDir: path.join(__dirname,'dist'),
                    //          ，  a   ，      /a/param1。
                    routes: ['/','/about','/store_vuex','/cssAnimate','/connectMongoDB','/childParent','/child1','/elementUI'],
                    //      ，        ，        
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        //   main.js   document.dispatchEvent(new Event('render-event'))，           。
                        renderAfterDocumentEvent: 'render-event'
                    })
                })
            ],
        };
    }
}

그리고 vue 경로 의 모드 를 history 로 바 꿔 야 합 니 다.
마지막 으로 mian.js 입구 파일 에 이 코드 를 추가 해 야 합 니 다.그 중에서 render-event 는 vue.config.js 의 render AfterDocumentEvent 와 대응 해 야 합 니 다.

new Vue({
  router,
  store,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

npm run build 는 현재 포장 한 디 렉 터 리 구조 가 이렇게 되 었 고 모든 폴 더 의 index.html 코드 가 되 었 습 니 다.
현재 html 코드 는 vue 파일 의 template 관련 코드 가 있 지만 문 제 는 모든 폴 더 의 index.html 코드 가 모든 js 와 css 파일 을 참조 하 는 것 입 니 다.이것 은 seo 최적화 에 불리 합 니 다.그래서 아직 끝나 지 않 았 다.



왜 이렇게 많은 js 와 css 가 있 습 니까?vue-cli 가 포장 할 때 모든 vue 파일 의 script 과 style 라벨 은 해당 하 는 js 와 css 로 포장 되 어 있 기 때 문 입 니 다.탭 에 아무것도 쓰 여 있 지 않 더 라 도.
두 번 째 단 계 는 압축 합병 부피 가 비교적 작은 js 와 css 파일 입 니 다.
vue-cli 문 서 를 찾 았 지만 관련 자 료 를 찾 지 못 해 웹 팩 으로 전 투 를 걸 었 습 니 다.
이 api 는 최소 병합 파일 의 부 피 를 설정 할 수 있 습 니 다.위의 웹 팩 설정 에 있 는 plugins 에 이 코드 를 추가 하면 10000=1kb 입 니 다.

const webpack = require('webpack');
 
new webpack.optimize.MinChunkSizePlugin({
                    minChunkSize: 10000 //        minChunkSize     chunk，  chunk              
                }),

그리고npm run build그 디 렉 터 리 였 지만 js 와 css 는 많이 줄 었 습 니 다.

방법 2.Vue SSR(서버 엔 드 렌 더 링)
한 마디 로 하면 브 라 우 저 에서 생 성 할 구성 요 소 를 서버 에 두 고 먼저 만 든 다음 에 해당 하 는 html 를 생 성하 여 브 라 우 저 에 직접 보 내 고 마지막 으로 이 정적 표 시 를 클 라 이언 트 에서 완전히 상호작용 할 수 있 는 응용 프로그램 으로 활성화 하 는 것 입 니 다.
Vue SSR 은 SPA(단일 페이지 응용)에 비해 좋 은 점 과 나 쁜 점
1.좋 은 점
더 좋 은 SEO,검색엔진 파충류 캡 처 도구 로 완전히 렌 더 링 된 페이지 를 직접 볼 수 있 습 니 다.
더 빠 른 콘 텐 츠 도착 시간(time-to-content),특히 느 린 네트워크 상황 이나 느 린 장 치 를 실행 합 니 다.
2.나 쁜 점
1)개발 조건 에 한 함.브 라 우 저의 특정한 코드 는 일부 생명주기 갈고리 함수(lifecycle hook)에서 만 사용 할 수 있 습 니 다.일부 외부 확장 라 이브 러 리(external library)는 서버 렌 더 링 프로그램 에서 실행 할 수 있 도록 특수 처리 가 필요 할 수 있 습 니 다.
2)구축 설정 과 배치 에 대한 더 많은 요구.모든 정적 파일 서버 에 배치 할 수 있 는 완전 정적 단일 페이지 응용 프로그램(SPA)과 달리 서버 렌 더 링 응용 프로그램 은 Node.js server 실행 환경 에 있어 야 합 니 다.
3)더 많은 서버 단 부하.Node.js 에서 완전한 프로그램 을 렌 더 링 하면 정적 파일 만 제공 하 는 server 보다 CPU 자원(CPU-intensive-CPU 밀집)을 많이 사용 할 수 있 습 니 다.따라서 높 은 트 래 픽 환경(high traffic)에서 사용 할 것 이 라 고 예상 되면 해당 하 는 서버 부 하 를 준비 하고 캐 시 정책 을 현명 하 게 사용 하 십시오.
Vue 개발 사이트 의 seo 최적화 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue seo 최적화 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!