Changing Facebook meta tag Content Attribute using JQuery

Question

I want to know how can I use JQuery in order to replace the content attribute of my Facebook meta tags.

I searched StackOverflow and what I've found was this example:

$("meta[property=og:title]").attr("content", title);
$("meta[property=og:url]").attr("content", url);

In my code I have the following meta tags:

<meta property="og:title" content="some content"/>
<meta property="og:url" content="some content"/>
<meta property="og:site_name" content="some content"/>

When I run the function that should change the content for the 'title' and 'url' variables, the change doesn't take place. The same values for the 'content' still remains the same.

I want to know how, if it's possible, to use JQuery to change the value of Facebook's meta tags.

Pollinosis

Answer 1

It is definitely possible to change meta tags using jQuery, but I don't think that's going to accomplish what you want since the meta tags are pulled by the FB scraper. The FB scraper goes out and scrapes your page to read the meta tags.

Editing Meta Tags

You can update the attributes of your page by updating your page's tags. Note that og:title and og:type are only editable initially - after your page receives 50 likes the title becomes fixed, and after your page receives 10,000 likes the type becomes fixed. These properties are fixed to avoid surprising users who have liked the page already. Changing the title or type tags after these limits are reached does nothing, your page retains the original title and type.

For the changes to be reflected on Facebook, you must force your page to be scraped. The page is scraped when an admin for the page clicks the Like button or when the URL is entered into the Facebook URL Linter. You can programmatically force your page to be scraped by cURL'ing the linter. For example ...

https://developers.facebook.com/docs/opengraph/

Saxena

Just wondering about using javascript to set these properties. That would require the scraper to execute javascript on the page before it reads the properties. Is that very likely? – Nobe

When i check Facebook or their debugger tool they appear to indeed not use Javascript. – Subito

Answer 2

This is how it worked for me:

$('meta[name=og\\:url]').attr('content', newVideoUrl);

note the double backslash, without it Jquery will fail with an error.

Wilmott

@jtblin - Sorry - my mistake. – Judgemade

@jinn When i try your markup it indeed changes the html. But Facebook still picks my old content value. I don't think Facebook takes javascript into account. Can you verify wheter Facebook actually shows the proper content which you applied via jQuery? – Subito

my meta tags used "property" instead of name, so i had to write $('meta[property=og\\:url]').attr('content', newVideoUrl); instead – Bates

Should, in fact, be 'property' and NOT 'name'. – Dromedary

Answer 3

The Facebook scraper doesn't execute JavaScript.

So using Javascript to modify the metatags in order to show different share content won't work.

You'd need to use serverside code to write them out as needed in the HTML source.

Dight

Yeah - I don't see it changing any time soon either. – Dight