I've been doing an SEO audit on my site and noticed something that I wanted to flag.
When Google crawls my homepage, it's picking up raw Vue.js template syntax in the HTML — things like {{playListTitle}}, {{ track.track_title }}, {{ track.track_artist }} and so on. Because Google's crawler doesn't always wait for JavaScript to finish executing, it's reading the page before Vue has had a chance to replace those placeholders with real data.
I did a bit of digging and I believe the fix is to apply Vue's v-cloak directive to the player elements, combined with a CSS rule that keeps them hidden until Vue has finished rendering. That way the raw template tags never get exposed to crawlers or users.
Is this something you can look at on your end, either as a settings option or a plugin update? Many thanks in advance for your time.
The player already uses Vue’s v-cloak directive to prevent the template syntax from being displayed to users before Vue finishes rendering.
However, v-cloak only hides the elements visually with CSS. The raw template placeholders (e.g. {{ track.track_title }}) still exist in the initial HTML source until Vue renders the component. This is expected behavior with JavaScript frameworks like Vue.
Google typically crawls pages in two stages: it first reads the raw HTML, then renders the page with JavaScript. Once the page is rendered, those placeholders are replaced with the actual track metadata.
Since the player metadata is injected dynamically and is not primary SEO content, this should not impact indexing of the page itself.
That said, we’ll keep this in mind for future improvements to see if we can further optimize how the player markup is exposed to crawlers.
Hi Sonaar team,
I've been doing an SEO audit on my site and noticed something that I wanted to flag.
When Google crawls my homepage, it's picking up raw Vue.js template syntax in the HTML — things like {{playListTitle}}, {{ track.track_title }}, {{ track.track_artist }} and so on. Because Google's crawler doesn't always wait for JavaScript to finish executing, it's reading the page before Vue has had a chance to replace those placeholders with real data.
I did a bit of digging and I believe the fix is to apply Vue's v-cloak directive to the player elements, combined with a CSS rule that keeps them hidden until Vue has finished rendering. That way the raw template tags never get exposed to crawlers or users.
Is this something you can look at on your end, either as a settings option or a plugin update? Many thanks in advance for your time.
Cheers,
Stevie
Hi Stevie,
Thanks for flagging this.
The player already uses Vue’s v-cloak directive to prevent the template syntax from being displayed to users before Vue finishes rendering.
However, v-cloak only hides the elements visually with CSS. The raw template placeholders (e.g. {{ track.track_title }}) still exist in the initial HTML source until Vue renders the component. This is expected behavior with JavaScript frameworks like Vue.
Google typically crawls pages in two stages: it first reads the raw HTML, then renders the page with JavaScript. Once the page is rendered, those placeholders are replaced with the actual track metadata.
Since the player metadata is injected dynamically and is not primary SEO content, this should not impact indexing of the page itself.
That said, we’ll keep this in mind for future improvements to see if we can further optimize how the player markup is exposed to crawlers.
Thanks again for bringing it up.
Thanks,
Alex from the Sonaar.io Crew