-2

I have a typewriter animation in the h1 and I don't want the search engine to scan that as most of the time, the content is incomplete due to the animation.

Instead, I provided a visually hidden h1 for search engines to do their job.

How do I "hide" the animated h1, so that search engines will not scan it?

Matthew Kwong
  • 2,548
  • 2
  • 11
  • 22

1 Answers1

0

Use progressive enhancement.

Do not start with static empty (meaningless) content and do not fill it gradually with JavaScript, it is not only dangerous from SEO perspective, it also bad for accessibility and performance.

Start with static content that contains everything meaningful and only change transforms, opacity and visibility, not display. And respect prefers-reduced-motion.

Hiding fragments of page content from search engines is not possible nowadays and hasn't been reliable in the past. Using visually hidden h1 "for SEO" may even trigger deceptive content detection and bring you penalty.

myf
  • 9,874
  • 2
  • 37
  • 49
  • Actually, I can kind of work around this by using `div` as the container of the typewriter instead of `h1`. This is what I meant when I said typewriter: https://mwskwong.com. – Matthew Kwong Oct 20 '21 at 16:57
  • Sure, describing it as "typewriter animation" conveyed the general idea pretty well. My advice was just to have the real content you want to be indexed in the HTML source from the start -- so it could be readable even without JS -- and instead of putting character by character into DOM to have each character inside `span` and either use pre-calculated delay for CSS animation or gradually swap visual appearance of each character. Again, better not use `display: none` nor `visibility: hidden` (`transform scale(0); position: absolute` should be fine) and respect `prefers-reduced-motion`. – myf Oct 20 '21 at 17:56