javascriptjqueryfacebookfacebook-opengraphmeta-tags

Selecting og:image with JavaScript

I'm selecting my Facebook og:image with JavaScript with:

$('head').append('<meta property="og:image" content="calculatedImageURL">');

I can see that the tag appears in generated source but no in source code (before JavaScript), of course. The problem is that the image I selected does not appear in Facebook and with the Facebook debugger I see this error:

The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

The question is: is it possible to put the meta og:image in the body tag? I know that W3 schools say we shouldn't but I don't have access to change the head content.

Solution

  • Appending a meta tag to HTML on client side won't work for you. Crawlers such as google, facebook and twitter will not read those meta tags. These tags should be placed in your generated HTML file on server-side. By the way, if you want to change a meta tag:

    $("head meta[property='og:image']"); // select meta tag using this jQuery selector