Javascript To Change Metadata / Metatags Dynamically

Question

I'll describe what I'm trying to accomplish and if it seems that my method is dumb please feel free to let me know:

I have a page with a video gallery and a flash video player iframe. When the user clicks on a video thumbnail, it starts to play in the frame.

Users can also go to the page with a specific video loaded into the iframe by appending the filepath to the end of the url - blabla.com/videogallery?videofilepath. I set this up so that videos could be shared easily.

I want to be able to add Share buttons for facebook/twitter, but I cannot get them to work and present themselves properly with the correct metadata (image and title).

So I was thinking of putting the Share buttons in the player iframe as well and then update the metadata tags dynamically when a video change occurs, but am unsure as to how to go about this.

Any help would be much appreciated, thanks.

Solution 1

You wanna do something like this in the code for jQuery

$(document).ready(function(){
    $('title').text("Your new title tag here");
    $('meta[name=description]').attr('content', 'new Meta Description here');
});

Solution 2

Shorter answer in pure javascript.

document
      .getElementsByTagName('meta')
      .namedItem('description')
      .setAttribute('content','My Meta Description Here')

Solution 3

As the above two solutions are using JQuery, here is a solution in pure javascript, incase if anyone is looking for:

to change the title:

<script>document.title = "this is title text";</script>

to change any meta tag:

<meta name="description" content="this is old content which we are going to change through javascript">

javascript code to change the above metatag.

<script>
var allMetaElements = document.getElementsByTagName('meta');
//loop through and find the element you want
for (var i=0; i<allMetaElements.length; i++) { 
  if (allMetaElements[i].getAttribute("name") == "Description") { 
     //make necessary changes
     allMetaElements[i].setAttribute('content', "description you want to include"); 
     //no need to continue loop after making changes.
     break;
  } 
} 

Good luck.

Solution 4

you can add anything in the head tag by using the this (jquery)

$('head').append('<meta .... />');

View more solutions

Comments

[Wreeecks]

can search engine get the new values? I tried using online seo tool ( seocentro.com ), it didn't get the values set by js.

[Wreeecks]

never mind got the answer already - spiders cannot read them, hence metadata should be generated on server side.

[Ales Potocnik Hahonina]

Simple and it works! I was looking for a solution to add headers to Meteor Iron Router supported application and found all sorts of complicated solutions. This works like a charm.

[Niklas]

Would be interesting to know if this has changed. Especially with SPA this would be really helpfull @Wreeecks