Mobile app version of vmapp.org
Login or Join
Angela700

: Simulation of text-writing, what is the best way for SEO to allow the written text to be crawled? For a client's website, I made a script that simulates typing and deleting of text. The client

@Angela700

Posted in: #Html #Javascript #Jquery #Seo

For a client's website, I made a script that simulates typing and deleting of text. The client can enter the text himself, using [verwijder]-tags (which means 'Delete' in Dutch).

See the demo at codepen.io/AartdenBraber/pen/ybebew
It works great, except that the h1-tag is not originally filled and hence not being crawled by Google.

What would be the best way to allow this text to be crawled by Google?

Some ideas of my own:

<h1 data-text="Text that's being [verwijder]delet[verwijder] <i style='color: red;'>changed</i>. HTML is allowed."
class="hero-title type-me">Text that's being <i style='color: red;'>changed</i>. HTML is allowed.</h1>


and then delete the content with Javascript. You'd get a flash, though.

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Angela700

1 Comments

Sorted by latest first Latest Oldest Best

 

@Speyer207

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme