CODEWITHSUNDEEP
htmlmeteorsharefacebook-opengraphmeta
annikam
annikam

Reputation: 273

Facebook OG Tags in Meteor Not Working

I am using Meteor on the client side only and have been trying to optimise the open graph meta tags. I have used kadira:dochead and in the router put the following code:

Router.route('/', function() {
  setupOg();
  if (isMobile()) {
    this.render('landing_mobile');
    $('body').css("overflow", "visible");
  }
  else {
    this.render('landing');
    $('body').css("overflow", "hidden");
  }
});

function setupOg() {
  var title = { property: "og:title", content: "Blah" };
  var type = { property: "og:type", content: "website" };
  var url = { property: "og:url", content: "https://blah.io" };
  var image = { property: "og:image", content: "http://i63.tinypic.com/2howf4k.png" };
  var siteName = { property: "og:site_name", content: "Blah" };
  var description = { property: "blah blah blah." };

  DocHead.addMeta(title);
  DocHead.addMeta(type);
  DocHead.addMeta(url);
  DocHead.addMeta(image);
  DocHead.addMeta(siteName);
  DocHead.addMeta(description);
}

In the browser, upon inspecting the HEAD content, the contents are there as <meta property="og:title" content="Blah" dochead="1">, etc for each of the properties above.

However, when I look at the Facebook Sharing Debugger, it does not seem to have found any of these optimisations, and when I try to share on Linkedin, same thing. Why is this?

Note, my main.html looks like this:

<head>
  <link rel="icon" sizes="16x16 32x32" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Blah</title>
</head>

Upvotes: 0

Views: 301

Answers (1)

Artūrs Lataks
Artūrs Lataks

Reputation: 188

There are 2 reasons I can distinguish:

  1. Meteor has client side rendering, meaning that when Facebook opens the URL to analyse OG tags, it does not see any, so you need to tell Facebook bot that it needs to wait until your page is loaded, take a look at this Meteor package: https://atmospherejs.com/meteor/spiderable

  2. Data for that URL may be cached.

Upvotes: 1

Related Questions