Skip to content

Instantly share code, notes, and snippets.

@robertkowalski
Created December 4, 2012 17:17
Show Gist options
  • Save robertkowalski/4206422 to your computer and use it in GitHub Desktop.
Save robertkowalski/4206422 to your computer and use it in GitHub Desktop.
adding meta tags to head with javascript
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);
@ayush-mandowara-bst
Copy link

ayush-mandowara-bst commented Aug 13, 2020

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.

@robertkowalski
Copy link
Author

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

@kiranbabu189
Copy link

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?

@ayushxx7
Copy link

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.

@kiranbabu189
Copy link

kiranbabu189 commented Aug 28, 2020

@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+')
`

@ayushxx7
Copy link

ayushxx7 commented Sep 4, 2020

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}}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment