3

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 https://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.

Improve this question
1
  • If that text is not being crawled by Google (despite Google getting much better at processing JavaScript) then I don't really see many options, other than populating the element in the HTML source in the beginning and have this visible on the page (as you suggest). However, if Google does process the JS and sees the text being deleted then it may not "see" the text anyway (is it seeing the text for the later examples that contain the text)? Maybe block Google from crawling that particular JS file in that case?
    – MrWhite
    Apr 19, 2017 at 15:18

1 Answer 1

Reset to default
2

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.

Improve this answer
4
  • Thanks for your answer! I think now that setting the visibility to hidden (in native js for speed-reasons) is the best way to go at the moment. See codepen.io/AartdenBraber/pen/ybebew for my current solution. Any suggestions?
    – Aart den Braber
    Apr 20, 2017 at 10:23
  • 1
    Okay two things. 1. Googleon and Googleoff has no bearing on Google Searches, only for companies that use Google Search Appliance. 2. Your sentences now have a poor readability rating. The sentence should be readable and make sense without JavaScript through its not required I guess, but personally I'd use data-attribute, there's nothing wrong with using it, just put the important keywords outside those elements... but... if you have multiple H1's, H2's before usage then it doesn't really matter if you include keywords or not.
    – Simon Hayter
    Apr 20, 2017 at 13:43
  • Ah ok, I guess I wanted the text to be hyphenated and hence put it in the normal HTML (although I found a different way to do the hyphenation now). But will I be penalised now for entering the same value twice? Or how could I exclude the typed-part? Because that is just for visual fun, nothing else.
    – Aart den Braber
    Apr 21, 2017 at 16:07
  • 1
    Well you could always use a preloader as the other solution I suggested but your over thinking the importance of these keywords. As long as you have keywords appearing in other elements of the page you have nothing to worry about. Google doesn't use keyword density the same way it did a decade ok... treat headers as a signal, the more you have the higher the signal but at some point you reach a MAX, thereafter its noise and ignored.
    – Simon Hayter
    Apr 22, 2017 at 17:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.