Intentionally Hiding a Div from Indexing

Question

I've published a site with an animated "typer" script. My concern is— I want to keep the div from indexing, as Google might see this as keyword-stuffing.

Can you think of a way to code this appropriately, where:

1. One H1 sentence is displayed for SEO purposes.

   example: **You deserve a website.**

2. The rest of the 'mad-lib' content isn't indexed.

code:

<div class="center-logo"> <h1 class="is-for"> You deserve <br>a <i data-typer-targets="better,better-working,better-looking,faster,stronger,longer,smiling,happier,sweet-smelling,hotter,sleeker,flatter,prettier,schmancy,bolder,blacker,braver,brighter,cleaner,cleverer,cooler,funnier,healthier,wetter,warmer,thicker,taller,sweeter,smoother,kinder,fairer,more handsome,more helpful,fitter - happier - more productive,harder - better - faster - stronger,work is never over,more caffeinated,make - my - neighbors - jealous,make - Mom - proud"> </i> website.</h1> </div>

Answer 1

Google doesn't index custom data attributes like data-typer-targets , so the code you posted should be safe. The keywords are not in the content, but in a custom attribute that is hidden to the readers too. I'm pretty sure Google doesn't see this as keyword-stuffing.

This is confirmed by the answer here: Is Google indexing html custom data attributes?