Dynamic Facebook Open Graph tags possible?

user1661677 picture user1661677 · Dec 15, 2015 · Viewed 20.6k times · Source

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

luschn picture luschn · Dec 15, 2015

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.