I have a web page that is dynamically built and am trying to get links that are shared on Google+ to show snippets and look nice, an example snippet for article rendering and documentation can be found here:
https://developers.google.com/+/web/snippet/article-rendering
When I follow the documentation my links do not render with everything I set in google plus, they show up like this:
The head of my page looks like this:
<head>
<div id="replaceGoogle"></div>
</head>
In my javascript I have this to insert the open graph tags once generated:
//replace google
var google = '<meta property="og:type" content="article" /><meta itemprop="og:headline" content="'+ data[0].name+'" /> <meta itemprop="og:description" content="View beer on Beer Portfolio" /> <meta property="og:image" content="'+ data[0].icon +'" />';
$("#replaceGoogle").replaceWith(google);
The data is taken from json read in from an ajax call. Can I not do this dynamically?
I think that question is similar to Generating Open Graph meta tags dynamically. The main reason of your problem is that google+ and facebook will not execute your javascript so none of them will see your dynamic og tags.
Basic solution to this problem is :
Use server side scripting (ask for details in the comments)