Is it possible to use JavaScript to change the meta-tags of the page?
If I put a div in the head and display:none, than use JavaScript to display it, will this work?
Edit:
I have stuff loaded in AJAX. And as my AJAX changes the "main" portion of the site, I want to change the meta-tags as well.
Yes, it is.
E.g. to set the meta-description:
document.querySelector('meta[name="description"]').setAttribute("content", _desc);
Yes, you can do that.
There are some interesting use cases: Some browsers and plugins parse meta elements and change their behavior for different values.
Examples
Skype: Switch off phone number parser
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
iPhone: Switch off phone number parser
<meta name="format-detection" content="telephone=no">
Google Chrome Frame
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Viewport definition for mobile devices
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This one can be changed by JavaScript. See: A fix for iPhone viewport scale bug
Meta description
Some user agents (Opera for example) use the description for bookmarks. You can add personalized content here. Example:
<!DOCTYPE html>
<title>Test</title>
<meta name="description" content="this is old">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<button>Change description</button>
<script type='text/javascript'>
$('button').on('click', function() {
// Just replacing the value of the 'content' attribute will not work.
$('meta[name=description]').remove();
$('head').append( '<meta name="description" content="this is new">' );
});
</script>
So, it’s not just about search engines.
You'd use something like (with jQuery):
$('meta[name=author]').attr('content', 'New Author Name');
But that would be mostly pointless as meta tags are usually only scraped when the document is loaded, usually without executing any JavaScript.
It is definitely possible to use Javascript to change the meta tags of the page. Here is a Javascript only approach:
document.getElementsByTagName('meta')["keywords"].content = "My new page keywords!!";
document.getElementsByTagName('meta')["description"].content = "My new page description!!";
document.title = "My new Document Title!!";
I have verified that Google does index these client side changes for the code above.