0

So I am going to have many pages that have a bunch of text in them, that a JS and CSS file will convert to a colored and everything webpage. I noticed that the text is usually going to be long, and since there are going to be many webpages, I should lower file size. Also since I don't want to ruin file quality, I have decided that my JS file is going to take the text and make a webpage out of it. Side Note: what I am trying to do is make tutorial pages, so I am going to use JS to generate a lot of the things that are on every tutorial page, like the lessons list, to lower file size.

I have noticed that metadata (<head> content) usually takes up some space that JS could generate, so I thought, Why don't I just generate this with JS? But then arose the problem that the some browsers might not parse it, or it might be slow to parse it. So I am asking here on Stack Overflow:

Should JavaScript generate metadata (and maybe almost the whole page, like remove the <head> tag completely and generate it with JS)?

Lakshya Raj
  • 1,669
  • 3
  • 10
  • 34

1 Answers1

1

It depends on your desired result.

Google has improved it's SEO mechanisms to render your page before indexing it, see here:

https://developers.google.com/search/docs/guides/javascript-seo-basics

However other bots may not do the same, such as social media crawlers like facebook or twitter that read Open Graph meta tags, or other search engines like Baidu.

If a bot doesn't render your document then the javascript doesn't get executed and your meta isn't present.

Additionally, if your initial document does not contain the stylesheets or other CDNs it takes a bit longer for the client. Imagine the process:

With head

  1. fetch document
  2. fetch resources
  3. render content

Without head

  1. fetch document
  2. render content
  3. fetch resources
  4. re-render

That's way over-simplified but it demonstrates my point.

Alternative:

If your content is so dynamic, you might consider Server Side Rendering (SSR) or Pre-Rendering

You would build your pages programmatically and store/serve them all, or build them on the server-side as they are requested.

https://developers.google.com/web/updates/2019/02/rendering-on-the-web

Sydney Y
  • 2,912
  • 3
  • 9
  • 15
  • OK, let's say I don't remove the `` tag. Is it still fine to add `` or `` tags dynamically? Will it still do something about the meta tags, or will they be ignored? – Lakshya Raj Dec 06 '20 at 21:09
  • Yes, it is fine, but also: Yes, they may be ignored by less fancy bots than Google. – Sydney Y Dec 06 '20 at 21:11
  • They wont be ignored by the DOM, though. If you add those tags dynamically they will be used. The user may experience a slight lag (probably imperceivable). Imagine your document content loads before your stylesheet. Just things to keep in mind; you can certainly make it work your way if that's what you really want to do. – Sydney Y Dec 06 '20 at 21:21
  • 1
    Thank you for your answer! I have marked it as accepted. As to your lag part, it will not matter as I have a loader set up until `window.onload`, so my stylesheet will give styles to everything before you can see anything other than the loader. – Lakshya Raj Dec 06 '20 at 21:34
  • Thanks! If the data you need in order to dynamically build your `link` and `meta` elements is known via the http request (ie. you don't need any info from the visitor's browser) then I still think you'd find pre-rendering or SSR to be an interesting option. You can use a combination of pre-rendering and client side rendering, too. But I'm glad you have the info you need to make a decision :) – Sydney Y Dec 06 '20 at 21:40