Vue.jsを使用するにあたり、ディレクティブやコンポーネントがHTMLの仕様的どうなのか？JavaScriptメインのサイトは、Googlebotに認識されるのか？等、気になったことを調べました。

ディレクティブとかコンポーネントって、使っていいの？


<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.js公式より

: や @ は属性名に利用可能な文字です。
すべての Vue.js のサポートしているブラウザで、正しくパースすることができます。
加えて、最終的に描画されるマークアップにそれらは現れません。


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

w3c Markup Validation Serviceには、非標準の有効な属性のerrorを非表示にする機能がある。

Vueコンポーネントで使われるカスタム要素は、Web Componentsの規格


<my-component></my-component>

w3c Web Components リポジトリ
https://github.com/w3c/webcomponents/

WHATWGのカスタム要素の定義
https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements

Vue.jsのコンポーネントは、w3c Web 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は、Chrome 41（M41）に基づくウェブレンダリングサービス（WRS）が使用されている。
https://developers.google.com/search/docs/guides/rendering

一部制限はあるが、Chrome 41で使用可能なJSはレンダリングされる。
モバイルフレンドリーで、レンダリングされたソースコードを確認できる。
https://search.google.com/test/mobile-friendly?hl=ja

ただし、Chrome 41は2015年ごろのバージョンなので、モダンJSで使えない機能がある。

caniuseやヘッドレスブラウザで、レンダリングの検証ができる。
https://caniuse.com/#compare=chrome+41
https://github.com/GoogleChromeLabs/puppeteer-examples

babel等でES5にトランスパイルされていれば、だいたいOK。

ただしただし！

title や description、OG情報系はJavaScriptで書き換えても、FacebookやTwitterが認識してくれないので、直接HTMLに書く必要がある。

HTML Validationって、どうやってやればいいの？

レンダリングされたDOMツリーは、ヘッドレスブラウザを利用して出力することができる。

Puppeteer
https://github.com/GoogleChrome/puppeteer

Googleが開発しているため、安心◎。

まとめ

ディレクティブやコンポーネントは、HTMLの仕様内で使われている。
- レンダリングされるDOMツリーには反映されない。
GooglebotはJavaScriptをレンダリングして評価する。
- 公式のツールで検証することができる。
- ただし、レンダリング能力はGoogle Chrome v41程度なので、気をつける。
ヘッドレスブラウザのPuppeteerを使って、レンダリングされるDOMツリーを出力することができる。