HTML
JavaScript
vue.js
WebComponents

Vue.js初学者が迷う、HTMLの仕様やSEO(Googlebot)のことを調べてみた。

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>

https://developer.mozilla.org/ja/docs/Web/HTML/Element/template


: や @ は属性名に利用可能な文字

Vue.js公式より


: や @ は属性名に利用可能な文字です。

すべての Vue.js のサポートしているブラウザで、正しくパースすることができます。

加えて、最終的に描画されるマークアップにそれらは現れません。



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

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

スクリーンショット 2018-08-28 22.46.11.png


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