data 属性を使って CSS を当てる

既存のプロジェクトで、JavaScript を使って、 グラフと同時に関連するテキストを表示していました。

SEO 対策

問題なく動いていたのですが、 Google のクローラーが JavaScript によって、 生成された Webページ を正常にロードできていないかもしれない ということを知りました。

そのままにしておくと SEO 的には良くないので、 JavaScript で生成していたテキストを サーバーサイドレンダリングすることにしました。

実装

グラフ描画の実装では、data属性 を渡して JavaScript で処理を行っていました。

そこで、テキスト部分だけを JavaScript を使わずにグラフの描画時に利用していた data属性 を用いることにしました。

具体的な実装は、以下のようになりました。

<!-- sample.vue -->

<template lang="pug">
.sample
  .sample-text(data-size="12") 12pxのフォント
  .sample-text(data-size="18") 18pxのフォント
  .sample-text(data-size="36") 36pxのフォント
  .sample-text(data-size="15") 15pxのフォント
  .sample-text(data-size="8") 8pxのフォント
</template>

<style lang="scss" scoped>
.sample {
  padding: 30px 0;
  color: #ffffff;
  text-align: center;
  background: #2c3e50;

  $font-sizes: 8, 12, 15, 18, 36;

  @each $size in $font-sizes {
    &-text[data-size="#{$size}"] {
      font-size: #{$size}px;
      margin-bottom: #{$size / 2}px;
    }
  }
}
</style>

上記のコンポーネントを呼ぶと、下のようになります。

他にもっと良い書き方があると思うので、 分かり次第修正します。

参考

• data-* | MDN