jsで１つだけの要素を、横に無限スクロールさせたい

現在、「WHAT's NEW!」という大きい見出しを、横に無限スクロールさせようとしています。
よくマガジンとかファッション系のWEBデザインで採用されているのを見かけますが、要は
WHAT's NEW! WHAT's NEW! WHAT's NEW!　←が電光掲示板みたいにずっと横にスクロールしてるエフェクトですね。
こういうやつhttps://codepen.io/ponzu/pen/KKdbqxgです。

このcodepenを参考に組もうと思ったのですが、seo的な疑問が出てきまして、
htmlのドキュメント的には「WHAT's NEW!」という言葉(タグ)は１つで良いのですが、しかし参考のjsをcodepenで試してみたら、レンダリングされたHTMLにはスクロールさせるタグが無限に生成されてしまっています。当たり前っちゃ当たり前ですが、これだと検索エンジンのbotが読むには不都合かなと思いました。

そこでもしお分かりになれば教えていただきたいのですが、
レンダリングされたHTMLには１つの要素しかないけど、それを無限に横スクロールする(もしくは見せかける)方法ってあるのでしょうか？
この程度のことでSEOを気にするのもコスト的にどうかと思ったのですが、好奇心が勝ってしまい質問に至りました。
SEOからの視点ではもはや完全無視していいレベルですかね？
そこについても皆さんのご意見をいただけたら嬉しいです。

行動規範の内容に同意します

回答2件

ベストアンサー

試してみたら、レンダリングされたHTMLにはスクロールさせるタグが無限に生成されてしまっています。

無限には生成されていないですね。
画面幅に応じて必要な個数を複製しています。
そのうえで、先頭の要素を削除して、最後に追加するというのを繰り返しています。
ですので個数は固定です。

要素幅が小さければ複製しないと画面幅一杯でスクロールできないので仕方ない仕様かと。

投稿2021/02/10 03:57

編集2021/02/10 04:08

hatena19

総合スコア34075

Yariii

2021/02/10 04:31

本当ですね、無限ではないですね、失礼しました。やはりSEO的には目を瞑って、念のため個数は少なくする努力にとどめた方がいい気がしてきました。ありがとうございました。

行動規範の内容に同意します

１つの要素を分割していますが・・・
見た目重視のページ程、情報価値は少ない。

js
1<!DOCTYPE html><html>
2<head><meta charset="UTF-8">
3<style>
4.b span { display: inline-block; font-size: 40px; width: 40px; }
5</style>
6<body>
7<div class="b">WHAT's NEW!</div>
8<div class="b">WHAT's NEW!</div>
9<div class="b">WHAT's NEW!</div>
10<script> 
11
12class A {
13  constructor (chars, interval) {
14    this.chars = [...chars];
15    this.interval = interval;
16    this.timerId = null;
17  }
18
19  start () {
20    if (! this.timerId)
21      this.timerId = setInterval (this.remove.bind (this), this.interval);
22    return this;
23  }
24
25  stop () {
26    if (this.timerId)
27      this.timerId = crearInterval (this.timerId);
28  }
29
30  remove () {
31    let first = this.chars.shift ();
32    first.parentNode.appendChild (first);
33    this.chars.push (first);
34    return this;
35  }
36
37  static create (div, time = 500) {
38    let chars = [...div.textContent];
39    [...div.childNodes].forEach (e=> e.remove ());
40    chars.forEach (c=> div.appendChild (document.createElement ('span')).textContent = c);
41    let obj = new this (div.querySelectorAll ('span'), time);
42    obj.start ();
43    return obj;
44  }
45}
46
47const [a, b, c] = document.querySelectorAll ('.b');
48A.create (a, 300);
49A.create (b, 600);
50A.create (c, 900);
51
52</script>