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.

drib.tech/programming/… says there was a workaround that is no longer working. Maybe one day! — Ryan
– Ryan, Commented Aug 29, 2019 at 22:21

andyrandy · Accepted Answer · 2018-01-25 13:52:13Z

23

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.

edited Jan 25, 2018 at 13:52

answered Dec 15, 2015 at 8:37

andyrandy

74.1k9 gold badges115 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

user1661677 Over a year ago

I already knew this. My question was for 'a way around' my problem. Plenty of sites do it-- there must be a way.

andyrandy Over a year ago

there is no way around, facebook just does not parse javascript. what site is doing it?

user1661677 Over a year ago

I'm not saying I need to use Javascript to accomplish this. There must be a way to dynamically load <meta> tags. Vimeo, Youtube, pretty much any video hosting site like that works flawlessly with FB. I'm guessing they are using PHP to create a new page for every video uploaded?

andyrandy Over a year ago

that´s a bit out of scope, try googling for "apache rewrite", there´s plenty of information about rewriting the url. i don´t think it would be a good idea anyway, because you still have to add the whole description and it can be very long. it was just an idea, but a bad one. youtube takes the video key, looks at their database and gets the tags.

andyrandy Over a year ago

if you downvote something please comment why. my answer is 100% correct, but i am happy to improve it if something is missing.

|

Martin Vandersteen · Accepted Answer · 2018-02-21 15:28:46Z

1

As said previously, Facebook doesn't parse JavaScript at all.

One way of doing it (the way I do it) is to use a prerendering service like prerender.io to prerender your pages and redirect requests coming from web crawlers to that prerendering server based on the user-agent (you can easily find how to do that with your Nginx/Apache server on google).

Prerendering services produce an HTML/CSS render of your page, but they wait until the page is fully loaded and the JavaScript is executed before doing so. That way, Facebook gets a render of your website where the JavaScript has been executed and the OpenGraph tags are set correctly!

Prerender is open-source so you can run your own prerender server for free!

edited Feb 21, 2018 at 15:28

answered Feb 21, 2018 at 15:19

Martin Vandersteen

1351 silver badge12 bronze badges

Comments

user7795526 · Accepted Answer · 2017-04-03 10:16:52Z

Try this it worked for me.

<?php

$params = array();
if(count($_GET) > 0) {
    $params = $_GET;
} else {
    $params = $_POST;
}
// defaults
if($params['type'] == "") $params['type'] = "restaurant";
if($params['locale'] == "") $params['locale'] = "en_US";
if($params['title'] == "") $params['title'] = "default title";
if($params['image'] == "") $params['image'] = "thumb";
if($params['description'] == "") $params['description'] = "default description";

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# MY_APP_NAME_SPACE: http://ogp.me/ns/fb/MY_APP_NAME_SPACE#">
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <!-- Open Graph meta tags -->
        <meta property="fb:app_id" content="MY_APP_ID" />
        <meta property="og:site_name" content="meta site name"/>
        <meta property="og:url" content="http://URL/index.php?type=<?php echo $params['type']; ?>&locale=<?php echo $params['locale']; ?>&title=<?php echo $params['title']; ?>&image=<?php echo $params['image']; ?>&description=<?php echo $params['description']; ?>"/>
        <meta property="og:type" content="MY_APP_NAME_SPACE:<?php echo $params['type']; ?>"/>
        <meta property="og:locale" content="<?php echo $params['locale']; ?>"/>
        <meta property="og:title" content="<?php echo $params['title']; ?>"/>
        <meta property="og:image" content="http://URL/img/<?php echo $params['image']; ?>.png"/>
        <meta property="og:description" content="<?php echo $params['description']; ?>"/>

    </head>
</html>

You're assuming that you would be using php, for many this is not a viable option.

Collectives™ on Stack Overflow

Dynamic Facebook Open Graph tags possible?

3 Answers 3

14 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related