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.
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.