Menu
To use JavaScript to change the meta tags of the page, we can set the properties that are available in a meta element. and set its content attribute value. and set its content attribute value.
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data. <meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
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.
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With