Sadly Google and other search engines don't consider data-attributes content, any text in those elements will not be considered. You should also opt a mixture of both <span>
or <i>
AND data
within the parent to ensure that bots consider the first values.
Your options are limited but here's some suggestions:
Option 1. Don't use important keywords in the elements prior the change.
<h1 data-text="[Sex], [Pizza]">My Website Design is better than <span>Marmite</span></h1>
Or
<h1 data-text="[I won't be beaten in price], [Nor will you find better results]">
<span>
My Website Designs taste better than Marmite
</span>
</h1>
The keywords being Website Design and the later being not so important but good for UX. In other words, have the keywords that matter always visible or at least appear before the text changes.
Option 2. Inject the changes after page load.
The other option would be to use a page loader such as PACE but its important to note that Google will only consider the first values, this however does combat the issue of the "FLASH" effect.
Ideally... the best method would be not to use important keywords in those elements. You also also note that you should use <span>
over <i>
unless there is a change in mood eg:
- We make designs that are
<i>bad</i>
, <i>good</i>
, <i>bloody awesome</i>
.
- We build
<span>websites</span>
, <span>web apps</span>
, <span>UX driven websites</span>
.
However in terms of SEO, both <i>
and <span>
are correct and will have no baring no matter what you use.
You obviously can set the opacity or display: none in JavaScript in the head rather than the body, so the flash is minimal but you should not that Google treats hidden content with less importance, it does factor it somewhat.