Rectangle 27 0

jquery Is it possible to use JavaScript to change the meta tags of the page?


$('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');
<!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>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

@DaedalusFall: yeah, I think you can only do that with document.write in the header though, it's too late to change it once the page is loaded as Skype will have already mangled the DOM, horrible thing!

@bobince: Actually, the SKYPE_TOOLBAR one still takes effect if you insert it with js (which is useful as html5 validator doesn't like that meta tag).

I suspect most metas like this have effects that aren't changeable after the page is loaded. But yes, meta is far more than just keywords and description.

So, its not just about search engines.

Some user agents (Opera for example) use the description for bookmarks. You can add personalized content here. Example:

There are some interesting use cases: Some browsers and plugins parse meta elements and change their behavior for different values.

Yes, you can do that.

also you can use meta tags for mobile browsers like ios <meta name = "viewport" content = "width = 640, user-scalable = no"> you may want to modify values for landscape.

Note
Rectangle 27 0

jquery Is it possible to use JavaScript to change the meta tags of the page?


$('meta[name=keywords]').attr('content', new_keywords);
$('meta[name=description]').attr('content', new_description);

Actually, now google is able to run javascript, too with no need to create page snapshots, so now dynamic metatags do matter a lot!

I think it does matter for now, since google said that they will index ajax content via #!hashes and _escaped_fragment_ calls. And now they can verify it (even automatically, with headless browsers, see the 'Creating HTML Snapshots' link on the page mentioned above), so I think it is the way for hardcore SEO guys.

Thank you for this. Just solved my problem. As facebook has open graph. The site I'm developing has a History jQuery plugin and hash tags. So the FB open graph url and description need to be changed when ever a hash change is present. +1 for a great answer and not being negative towards a fair question.

You can change meta with, for example, jQuery calls, like this ones:

Note
Rectangle 27 0

jquery Is it possible to use JavaScript to change the meta tags of the page?


But, I dont know how to change it other then removing it. Btw, in my example.. when you click the 'ADD' button it adds the tag and the viewport changes respectively but I dont know how to revert it back (remove it, in Android).. I wish there was firebug for Android so I saw what was happening. Firefox does remove the tag. if anybody has any ideas on this please note so in my question.

Note
Rectangle 27 0

jquery Is it possible to use JavaScript to change the meta tags of the page?


+1 - I landed on this question because I was wondering specifically about meta refresh. I am creating an app which uses ajax polling to refresh the data on screen and I want to provide a crude fallback for browsers that do not have javascript enabled. I am thinking that I could accomplish this by creating a meta refresh tag by default and if javascript is enabled, just remove the meta tag. - Now to see if it actually works...

@futtta, the meta description tag is used for bookmark descriptions in Opera, so there is actually a benefit to the user that your meta description can be changed.

meta-tags are part of the dom and can be accessed and -i guess- changed, but search-engines (the main consumers of meta-tags) won't see the change as the javascript won't be executed. so unless you're changing a meta-tag (refresh comes to mind) which has implications in the browser, this might be of little use?

Note
Rectangle 27 0

jquery Is it possible to use JavaScript to change the meta tags of the page?


$('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');
<!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>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

@DaedalusFall: yeah, I think you can only do that with document.write in the header though, it's too late to change it once the page is loaded as Skype will have already mangled the DOM, horrible thing!

@bobince: Actually, the SKYPE_TOOLBAR one still takes effect if you insert it with js (which is useful as html5 validator doesn't like that meta tag).

I suspect most metas like this have effects that aren't changeable after the page is loaded. But yes, meta is far more than just keywords and description.

So, its not just about search engines.

Some user agents (Opera for example) use the description for bookmarks. You can add personalized content here. Example:

There are some interesting use cases: Some browsers and plugins parse meta elements and change their behavior for different values.

Yes, you can do that.

also you can use meta tags for mobile browsers like ios <meta name = "viewport" content = "width = 640, user-scalable = no"> you may want to modify values for landscape.

Note
Rectangle 27 0

jquery Is it possible to use JavaScript to change the meta tags of the page?


+1 - I landed on this question because I was wondering specifically about meta refresh. I am creating an app which uses ajax polling to refresh the data on screen and I want to provide a crude fallback for browsers that do not have javascript enabled. I am thinking that I could accomplish this by creating a meta refresh tag by default and if javascript is enabled, just remove the meta tag. - Now to see if it actually works...

@futtta, the meta description tag is used for bookmark descriptions in Opera, so there is actually a benefit to the user that your meta description can be changed.

meta-tags are part of the dom and can be accessed and -i guess- changed, but search-engines (the main consumers of meta-tags) won't see the change as the javascript won't be executed. so unless you're changing a meta-tag (refresh comes to mind) which has implications in the browser, this might be of little use?

Note
Rectangle 27 0

jquery Is it possible to use JavaScript to change the meta tags of the page?


<a href="#" onClick="changeTags(); return false;">Change Meta Tags</a>
<meta id="mtlink" name="url" content="">
<meta id="mtdesc" name="description" content="" />
<meta id="mtkwrds" name="keywords" content="" />
function changeTags(){
   $("#mtlink").attr("content","http://albup.com");
   $("#mtdesc").attr("content","music all the time");
   $("#mtkwrds").attr("content","mp3, download music, ");

}

function change tags with jQuery

simple add and div atribute to each meta tag example

Note
Rectangle 27 0

jquery Is it possible to use JavaScript to change the meta tags of the page?


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>  
  var userAgentHeader = navigator.userAgent ; 
  var browserIsMobileOrNot = "mobileNOT" ; 
  if( userAgentHeader.includes( "Mobi" ) ) { 
    browserIsMobileOrNot = "mobileYES" ; 
    //document.querySelector('meta[name="viewport"]').setAttribute( "content", "width=device-width, initial-scale=1.0" );
  } else { 
    browserIsMobileOrNot = "mobileNOT" ;  
    document.querySelector('meta[name="viewport"]').setAttribute( "content", "");
  }
</script>

<link rel="stylesheet" href="css/index.css">

. . . . . .

This seems to be working for a little rigidly geometrically set app where it needs to run on both mobile and other browsers with little change, so finding the mobile/non-mobile browser status and for mobiles setting the viewport to device-width is needed. As scripts can be run from the header, the below js in header seems to change the metatag for device-width Before the page loads. One might note that the use of navigator.userAgent is stipulated as experimental. The script must follow the metatag entry to be changed, so one must choose some initial content, and then change on some condition.

Note
Rectangle 27 0

jquery Is it possible to use JavaScript to change the meta tags of the page?


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>  
  var userAgentHeader = navigator.userAgent ; 
  var browserIsMobileOrNot = "mobileNOT" ; 
  if( userAgentHeader.includes( "Mobi" ) ) { 
    browserIsMobileOrNot = "mobileYES" ; 
    //document.querySelector('meta[name="viewport"]').setAttribute( "content", "width=device-width, initial-scale=1.0" );
  } else { 
    browserIsMobileOrNot = "mobileNOT" ;  
    document.querySelector('meta[name="viewport"]').setAttribute( "content", "");
  }
</script>

<link rel="stylesheet" href="css/index.css">

. . . . . .

This seems to be working for a little rigidly geometrically set app where it needs to run on both mobile and other browsers with little change, so finding the mobile/non-mobile browser status and for mobiles setting the viewport to device-width is needed. As scripts can be run from the header, the below js in header seems to change the metatag for device-width Before the page loads. One might note that the use of navigator.userAgent is stipulated as experimental. The script must follow the metatag entry to be changed, so one must choose some initial content, and then change on some condition.

Note
Rectangle 27 0

jquery Is it possible to use JavaScript to change the meta tags of the page?


$('meta[name=author]').attr('content', 'New Author Name');

@stealthcopter I can verify that this doesn't :( wait, it does, but the changes are not visible in FFox's "view source" window..?

But that would be mostly pointless as meta tags are usually only scraped when the document is loaded, usually without executing any JavaScript.

Confirmed that it works for meta viewport setting (needed this to enable / disable zoom for certain subpages on jQuery Mobile). Thanks!

I can verify that this works :)

In case anyone else is looking for this exact solution, you need to put quotes around the og:somestuff - I needed the content of the image tag, this was my code: var imgurl = $("meta[property='og:image']").attr("content");

It even works with selectors such as $('meta[property=og:somestuff]'), which I suspected it would clash with the jQuery selection syntax because of the colon.

Note