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

Question

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

User · Answer

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   lt meta name  SKYPE TOOLBAR  content  SKYPE TOOLBAR PARSER COMPATIBLE  gt    iPhone  Switch off phone number parser   lt meta name  format-detection  content  telephone no  gt    Google Chrome Frame   lt meta http-equiv  X-UA-Compatible  content  chrome 1  gt    Viewport definition for mobile devices   lt meta name  viewport  content  width device-width  initial-scale 1 0  gt    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    lt  DOCTYPE html gt   lt title gt Test lt  title gt   lt meta name  description  content  this is old  gt   lt script type  text javascript  src  http   code jquery com jquery-1 8 2 js  gt  lt  script gt    lt button gt Change description lt  button gt    lt script type  text javascript  gt     button   on  click   function            Just replacing the value of the  content  attribute will not work         meta name description    remove           head   append    lt meta name  description  content  this is new  gt           lt  script gt    So  it   s not just about search engines

User · Answer

var description document getElementsByTagName  h4   0  innerHTML  var link   document createElement  meta       link setAttribute  name    description       link content   description     document getElementsByTagName  head   0  appendChild link   var htwo document getElementsByTagName  h2    var hthree document getElementsByTagName  h3    var ls     for var i 0 i lt hthree length i    ls push htwo i  innerHTML     for var i 0 i lt hthree length i    ls push hthree i  innerHTML     var keyword ls toString     var keyw   document createElement  meta       keyw setAttribute  name    keywords       keyw content   keyword     document getElementsByTagName  head   0  appendChild keyw    in my case  I write this code and all my meta tags are working perfectly but we can not see the actual meta tag it will be hidden somewhere

User · Answer

The name attribute allows you to refer to an element by its name  like id  through a list of children  so fast way is  document head children namedItem  description   content

User · Answer

No  a div is a body element  not a head element  EDIT  Then the only thing SEs are going to get is the base HTML  not the ajax modified one

User · Answer

Yes  it is   E g  to set the meta-description   document querySelector  meta name  description     setAttribute  content    desc

User · Answer

var metaTag   document getElementsByTagName  meta    for  var i 0  i  lt  metaTag length  i          if  metaTag i  getAttribute  http-equiv     refresh           metaTag i  content    666       if  metaTag i  getAttribute  name     Keywords           metaTag i  content    js  solver

User · Answer

If we don t have the meta tag at all  then we can use the following   var  desc    Out description   var meta   document createElement  meta    meta setAttribute  name    description    meta setAttribute  content    desc   document getElementsByTagName  head   0  appendChild meta

User · Answer

You can use more simpler and lighter solution   document head querySelector  meta name  description     content    desc

User · Answer

simple add and div atribute to each meta tag example   lt meta id  mtlink  name  url  content    gt   lt meta id  mtdesc  name  description  content      gt   lt meta id  mtkwrds  name  keywords  content      gt    now like normal div change for ex  n click   lt a href     onClick  changeTags    return false   gt Change Meta Tags lt  a gt    function change tags with jQuery  function changeTags           mtlink   attr  content   http   albup com           mtdesc   attr  content   music all the time           mtkwrds   attr  content   mp3  download music

User · Answer

Yes  it is possible to add metatags with Javascript  I did in my example   Android not respecting metatag removal   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

User · Answer

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

User · Answer

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

User · Answer

have this in index   lt link rel  opengraph  href   http   yourPage com subdomain php    gt    have this in ajaxfiles          og type og title og description  and og  image  and add this also   lt link rel  origin  href  http   yourPage com   gt    then add in js after the ajaxCall  FB XFBML parse      Edit  You can then display the correct title and image to facebook in txt php douments mine are just named  php as extensions  but are more txt files   I then have the meta tags in these files  and the link back to index in every document  also a meta link in the index file for every subfile    if anyone knows a better way of doing this I would appreciate any additions

User · Answer

For anyone trying to change og title meta tags  or any other   I managed to do it this way   document querySelector  meta property  og title     setAttribute  content    Example with og title meta tag      Attention that the  meta property  og title    contains the word PROPERTY  and not NAME

User · Answer

It should be possible like this  or use jQuery like    meta name author    attr  content        lt html gt   lt head gt   lt title gt Meta Data lt  title gt   lt meta name  Author  content  Martin Webb  gt   lt meta name  Author  content  A N  Other  gt   lt meta name  Description  content  A sample html file for extracting meta data  gt   lt meta name  Keywords  content  JavaScript  DOM  W3C  gt    lt  head gt    lt body gt   lt script language  JavaScript  gt  lt  -- if  document getElementsByName      var metaArray   document getElementsByName  Author      for  var i 0  i lt metaArray length  i          document write metaArray i  content     lt br gt            var metaArray   document getElementsByName  Description      for  var i 0  i lt metaArray length  i          document write metaArray i  content     lt br gt            var metaArray   document getElementsByName  Keywords      for  var i 0  i lt metaArray length  i          document write metaArray i  content     lt br gt             -- gt  lt  script gt   lt  body gt    lt  html gt

User · Answer

You can change meta with  for example  jQuery calls  like this ones      meta name keywords    attr  content   new keywords      meta name description    attr  content   new description     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

User · Answer

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             lt meta name  viewport  content  width device-width  initial-scale 1 0  gt   lt script gt      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             lt  script gt    lt link rel  stylesheet  href  css index css  gt

User · Answer

document  ready function          meta property  og title     remove         meta property  og description     remove         meta property  og url     remove         head   append   lt meta property  og title  content  blubb1  gt          head   append   lt meta property  og description  content  blubb2  gt          head   append   lt meta property  og url  content  blubb3  gt

User · Answer

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

[javascript] Is it possible to use JavaScript to change the meta-tags of the page?

Examples

Skype: Switch off phone number parser

iPhone: Switch off phone number parser

Google Chrome Frame

Viewport definition for mobile devices

Meta description

Examples related to javascript

Examples related to jquery

Examples related to meta-tags