Vue.우리는 js 초보자가 현혹된 HTML의 방법과 SEO(Googlebot)를 조사했다.

Vue.js를 사용할 때 HTML의 규격에 지시와 구성 요소가 어떻게 됩니까?주요 사이트가 구글에 인식되었습니까?등, 마음에 드는 일을 조사했다.

디렉터리나 구성 요소를 사용할 수 있습니까?

<template>
  <div>
    <input @click="count++" :class="{'is-active': isActive}"></input>
      <ul>
        <li v-for="message in messages">{{message}}</li>
      </ul>
    <my-component></my-component>
  </div>
</template>

이런 HTML 징그러워!W3C Markup Validation Service에서도 오류가 발생합니다.징그럽다!
하지만 괜찮아요(^^ω^))

template 요소는 표준 태그입니다.

<template></template>

: 지원 @ 은 속성 이름에 사용할 수 있는 문자입니다.

Vue.정부
: 지원 @ 은 속성 이름에 사용할 수 있는 문자입니다.
모든 Vue.js를 지원하는 브라우저에서 정확하게 지울 수 있습니다.
또한 최종 드로잉 태그에는 나타나지 않습니다.

<div @click="count++" :class="{'is-active': isActive}">

w3c Markup Validation Service에는 비표준 유효 속성을 숨기는 error 기능이 있습니다.

Vue 구성 요소에 사용되는 사용자 정의 요소는 웹 Components의 표준입니다.

<my-component></my-component>

웹 Components 웨어하우스
https://github.com/w3c/webcomponents/
WHATWG 사용자 정의 요소의 정의
https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements
Vue.js의 구성 요소는 w3c 웹components를 참고하여 제작되었기 때문에 표준에 가까운 규격을 안전하게 사용할 수 있습니다.(IE9 이상)
사용자 정의 요소와의 관계
https://jp.vuejs.org/v2/guide/#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E8%A6%81%E7%B4%A0%E3%81%A8%E3%81%AE%E9%96%A2%E4%BF%82

JavaScript의 웹 사이트는 SEO에 문제가 없습니까?

괜찮습니다(^^ω^))
Googlebot은 Chrome41(M41) 기반 웹 렌더링 서비스(WRS)를 사용합니다.
https://developers.google.com/search/docs/guides/rendering
제한은 있지만 크롬 41에서 사용할 수 있는 JS를 재현합니다.
이동이 친밀하여 원본 코드를 확인할 수 있습니다.
https://search.google.com/test/mobile-friendly?hl=ja
그러나 크롬41은 2015년께 버전이어서 현대 JS에서 사용할 수 없는 기능이 있다.
caniuse와 헤더 없는 브라우저를 통해 렌더링을 검증할 수 있습니다.
https://caniuse.com/#compare=chrome+41
https://github.com/GoogleChromeLabs/puppeteer-examples
Babel 등으로 ES5로 전송하면 대체로 OK.
하지만 단지!
타이틀, descript, OG 정보시스템을 자바스크립트로 다시 써도 페이스북과 트위터는 인식되지 않기 때문에 HTML에 직접 써야 한다.

HTML Validation, 어떻게 하면 좋을까요?

표시되는 DOM 트리는 헤드 없는 브라우저를 사용하여 출력할 수 있습니다.
Puppeteer
https://github.com/GoogleChrome/puppeteer
구글에서 개발했으니까 안심하세요.

총결산

디렉토리와 구성 요소는 HTML 사양에서 사용됩니다.

표시된 DOM 트리에 반영되지 않습니다.

Googlebot은 JavaScript를 렌더링하고 평가합니다.

는 공식 도구를 통해 검증할 수 있다.

단, 렌더링 능력은 Google Chrome v41 정도이므로 주의해야 합니다.

헤드 없는 브라우저의 Puppeeteer를 사용하여 렌더링된 DOM 트리를 출력할 수 있습니다.