Dynamic Facebook Open Graph tags possible?

how to share dynamic content on facebook from your website
og tags seo
open graph tester
facebook share dynamic image
dynamically change meta tags javascript
og:locale
dynamic open graph tags with javascript
facebook og:image dynamic

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.

What You Need to Know About Open Graph Meta Tags for Total , The huge audiences of Facebook and Twitter make them the best platforms for sharing, but do you know how to optimize that outreach potential? Why was Open � Introduction. In most situation Facebook open graph (og) meta tags will be filled while a page is being generated – before it is served to the browser. But there are situation where you want to change data to be shared dynamically with JavaScript, after the page has been served to the browser.

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!

Solved: Dynamic meta tags based on URL parameters (Facebook , <meta property="og:url" But is it possible to create dynamic meta tags in the WiseJ document, based on URL parameters? I have a method in� The Open Graph protocol is a great way to not only share a page's information but to also control how your site's information is shared. Using these META tags could be the difference in attracting just a few visitors from Facebook or attracting loads of visitors because your shared links provide useful keywords and imagery!

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>

Dynamically change Facebook open graph meta data with , In most situation Facebook open graph (og) meta tags will be filled while a page is being generated – before it is served to the browser. Dynamic Open Graph Tags - JoomlaKave Make Your Site Open Graph Protocol Compatible in a Matter of Clicks. After activating this Plugin your site is Open Graph ready. An essential extension to make your website pages Social Media friendly.

Knowledge: Dynamically add Facebook OpenGraph meta tags to , How to dynamically add Facebook OpenGraph tags to the page's head based on the current page's title and description in Sitefinity. Setting Open Graph tags in WordPress. Install Yoast’s SEO plugin. Go to the editor for a post or page, then scroll down. You should see a Yoast SEO box. Hit the “Social” tab, then “Facebook.”. Fill this in to set the og:title, og:description, and og:image tags. There’s no need to set og:url manually.

How to Add Open Graph Information Dynamically, function doctype_opengraph($output) { return $output . ' xmlns:og="http:// opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/� Open Graph Markup Most content is shared to Facebook as a URL, so it's important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook. Without these tags, the Facebook Crawler uses internal heuristics to make a best guess about the title, description, and preview image for your content.

Dynamically changing OG tags - JavaScript, means that I need to setup OG tags for the Facebook share b… Is it possible to use JavaScript to dynamically alter OG tag contents or would� One of the ways to optimize the potential outreach lies in the creative use of the dynamic Open Graphic image (aka OG images). What are Open Graphic Meta Tags? For starters, Open Graph meta tags

Comments
  • drib.tech/programming/… says there was a workaround that is no longer working. Maybe one day!
  • I already knew this. My question was for 'a way around' my problem. Plenty of sites do it-- there must be a way.
  • there is no way around, facebook just does not parse javascript. what site is doing it?
  • 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?
  • 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.
  • if you downvote something please comment why. my answer is 100% correct, but i am happy to improve it if something is missing.
  • You're assuming that you would be using php, for many this is not a viable option.