Does setting meta tags in Javascript work without server side rendering?

Viewed 716

I am developing a single page application and each page should have different open graph meta tags.

It seems that tools like react-helmet just use Javascript functions like element.setAttribute to update the meta tags as you transition between pages.

My question is: does this work without server side rendering? Because in this case you would have a "default" set of meta tags and then when the page is loaded the client-side routing would determine what page you were actually on and then the Javascript would set the proper meta tags in the onPageLoad handler.

That is, if you inspect the source for the page, the meta tags would be just the default, but if some crawler instead waited for the page to load and then inspected the new meta tags, they would see the proper values.

I don't use server side rendering. Is it a waste of time to use something like react-helmet without server side rendering? If I link my page on Slack or Discord will it simply inspect the source to determine the meta tags or does it wait for the page to load and then grab the newer meta tags that were set via Javascript?

I figured I'd ask rather than test first because developing this functionality and pushing to production is a decent amount of work if this isn't even supported and someone already knows that.

1 Answers

try implementing http://prerender.io/ - this will detect crawlers, cache the appropriate sites and serve the appropriate sites.

Related