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以上）
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ツリーを出力することができる。