jquery - Dynamic Facebook Open Graph tags possible?

Question

I'm dynamically changing my <meta property="og:image" content="#"> and <meta property="og:title" content="#"> tags using jQuery (below). When I view the code via 'inspect' in Chrome, the tags have successfully been changed.

HTML:

<meta property="og:title" content="#">
<meta property="og:image" content="#">

jQuery:

$("meta[property='og:title']").attr("content", data.name);
$("meta[property='og:image']").attr("content", data.thumbnail.url);

But the Facebook debugger tool is still showing content="#" for each. I'm assuming this is because Facebook reads the source code, before Javascript has a chance to replace the content.

Is there a way around this?

Thank you.

Answer 1

Facebook does not parse JavaScript at all, you can′t use dynamic Open Graph tags. It does not really make sense to change them on the fly anyway.

You can only change the OG tags dynamically on the server - obviously. For example: https://yourdomain.com/dynamicogtags.php?title=xxx&description=xxx

<meta property="og:title" content="<?php echo $_GET['title'];?>">

Not sure if that′s what you want to do though, the URL looks pretty ugly that way. Rewrite would be nice, of course.

You also may want to try something like prerender.io, but i am not sure if it will handle dynamic og tags.