Hi guys
You can see our website here:
I have a CSS animation rich page which have some elements that animate after initial rendering. Stuff like a top border on buttons.
Now the thing is that we’re using FastBoot in production which renders a complete HTML page upon first request. This HTML contains the elements that will do initial animations. Once the Ember javascript part is initialized the entire node-set is updated causing the animations to update.
I’m guessing this will either be a “lesson learned” kind of a topic, or me asking for help because what I’m doing isn’t SEO friendly.
The way I have solved this locally (which will enter the great production realm in a couple of days) is quite simple:
- Create the following CSS class:
.o-hidden-elem { position: absolute; clip: rect(0, 0, 0, 0); }
- Inject the service “fastboot” in my components.
- Apply the class to initially animating elements if we’re on a fastboot rendered page. Like so:
class="{{if fastboot.isFastBoot “o-hidden-elem”}}
- Add a styling in a noscript-tag on the body, so that the page will still render if no Javascript is available.
<noscript><style>.o-hidden-elem{position: initial; clip: auto;}</style></noscript>
I would love for our website to be SEO and “stupid-browser” friendly. To my understanding Google isn’t really looking at rect(0,0,0,0) as me trying to actully hide elements and is therefore still using the content for their index. Please let me know if I’m totally wrong here. Otherwise, enjoy my solution to the problem.