Changing meta facebook og with jQuery

Question

I have a problem (obviously), I've done a form that sends data in AJAX. I get the return value from my request when it success and I append it in the og tag content. for example

$('meta[property="title"]').attr('content', data.title);

after what when I check Elements in my chrome console, these changes are done. But if i click on the Facebook share button, it doesn't care about my changes... At the end , all what I want to change is the og tag title, description and image.

Any solutions ? Thanks everyone.

Answer 1

When a page is Liked or referenced on Facebook, Facebook requests the URL from their end, downloads the HTML, and parses it using a very simplified HTML parser that looks for OpenGraph tags.

For this reason, only the HTML generated directly by the server will be seen by Facebook. Any JavaScript embedded in the HTML will not get run, nor will any resources referenced by the page be loaded.

You'll need to figure out some way to communicate the information by manipulating the URL; such as adding URL parameters, assigning a permalink to the content, using re-write rules on the web server, etc.

Answer 2

One URL can only have one opengraph description. BUT, you can add some variable in order to change the opengraph tags according to the content. Let's say you have a page www.example.com and wanna share some entities. If you have a user, you can share www.example.com?user=[id] and set the server side code to do this:

if (isset($_GET['user'])) {
   // Opengraph for user
   // Perhaps you wanna load the user and show his infos.
}
if (isset($_GET['team'])) {
   // opengraph for team
}
else {
   // Default opengraph
}

Don't forget that the opengraph IMAGE must be IN THE DOM. You can always add

<div style="display: none;">
<img src="[path to the shared image]" />
</div>

Hope that helps