Most single-page application (SPA) only ship a minimal static HTML skeleton and then build the entire page dynamically. This also applies to tags in the HTML header <head>.
Today, I ran into a problem with dynamically added RSS feeds. The crucial part of the client side script looks like
// During SPA initialization routine
const head = document.querySelector('head');
config.rss_feeds.forEach(function (feed){
const link = document.createElement('link');
link.rel = "alternate";
link.type = feed.mimetype;
link.href = feed.url;
link.title = feed.title;
head.appendChild(link);
});
Don't bother yourself what the config object is. This one is provided by the backend to the SPA via a previous AJAX request and contains all the necessary configuration of the SPA. But it is pretty straight forward. The SPA creates a <link> element for each RSS feed and appends it to <head>.
When I look into my developer panel and inspect the HTML DOM, then the <link> tag exists as expected. However, RSS readers do not seem to detect the feed automatically. I mostly tried with Firefox and various plugins, but it the result is always negative.
I guess, the RSS plugins only analyze the HTML page onyce immediately after is has been loaded, but do not consider any changes due to Javascript.
How do I enable RSS feed autodetection for dynamically added <link> tags via JavaScript?
Preferably, a solution should work cross-client, i.e. in Firefox, Chrome, Edge, Safari, etc. Is there any JS method like "re-scan header"?
In general, yes.
You can't. They only look at the HTML. There's no way for you to go and add JavaScript supports to all the RSS software everyone uses.
You need to generate more-than-skeleton HTML. This is generally known as prerendering and usually takes one of two forms:
Frameworks like Next.js tend to come with features for this built in.
If you have an RSS feed then you probably want to look at server side rendering (as having RSS implies your content updates frequently).