adding meta tags to head with javascript

gistfile1.js

var meta=document.createElement('meta');
meta.name='viewport';

meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

document.getElementsByTagName('head')[0].appendChild(meta);

Hi, after the script executes, will the tag be visible in the HTML code, when you inspect within the browser? I am not able to confirm if it worked or not.

yes, it should be visible in the inspector / console of the browser @ayush-mandowara-bst

Hi,
I was trying to create and append some meta tags through JS. Though the tags will be visible, the crawlers would already have loaded the HTML file and the meta content would be missing. Did anyone come over this issue?

Although it is expected that the page is first rendered and only then it is crawled, I faced the same issue.
I wanted the search engines to respect the noindex tag, and tried an experiment of adding the tag in the body. That worked for me. I did this on zendesk in the article page hbs file. You can try adding the tag in the body if that is a possibility.
Moreover, the experiment took well over two weeks to show the effect.

@ayushxx7 Were you trying to load the meta tags through a script. I've tried adding it in the body too. But didn't work out.
Basically what I'm doing is keeping a script file with below content to be executed, So that all the meta tags will be appended in HEAD tag.

`
function createMetaTags(tags, type) {
var comment = document.createComment(type);
document.getElementsByTagName('head')[0].appendChild(comment);
tags.forEach(element => {
var attribute = Object.keys(element)[0];
var link = document.createElement('meta');
link.setAttribute(attribute, element[attribute]);
var metaKey = element[attribute].split(':');
var content = metaKey.length > 1 ? metaValues[metaKey[1]] : metaValues[metaKey[0]]
link.content = content;
document.getElementsByTagName('head')[0].appendChild(link);
});
}
var logoUrl = 'https://test/logo.svg';
var author = 'test';
var metaValues = {
title: "test.",
description: "test",
url: "test",
image: logoUrl,
'image:src': logoUrl,
type: "Website",
creator: author,
author: author,
site: author
}

var ogMeta = [
{ property: 'og:title' },
{ property: 'og:type' },
{ property: 'og:url' },
{ property: 'og:image' },
{ property: 'og:description' }
]

var twitterMeta = [
{ name: 'twitter:title' },
{ name: 'twitter:type' },
{ name: 'twitter:url' },
{ name: 'twitter:image' },
{ name: 'twitter:description' },
{ name: 'twitter:creator' },
{ name: 'twitter:image:src' }
]
var schemaMeta = [
{ itemprop: 'title' },
{ itemprop: 'type' },
{ itemprop: 'url' },
{ itemprop: 'image' },
{ itemprop: 'description' }
]

var meta = [
{ name: 'title' },
{ name: 'author' },
{ name: 'description' }
]

createMetaTags(meta, 'Primary Meta Tags')
createMetaTags(ogMeta, 'Open Graph / Facebook')
createMetaTags(twitterMeta, 'Twitter')
createMetaTags(schemaMeta, 'Schema.org markup for Google+')
`

I had the option to add the tag using article_page.hbs file. This file runs on every article in my Zendesk Help Center.
All I had to do was add the following to the beginning of that file:

{{#each article.labels}}
{{#is identifier 'noindex'}}<meta name="robots" content="noindex">{{/is}}
{{/each}}