CODEWITHSUNDEEP
jekyllfacebook-opengraph
Richard Fortune
Richard Fortune

Reputation: 305

Open Graph data not rendering even though test tool works

I've got a Jekyll site setup where I've been trying to enable open graph meta tags for sharing on social. I began using the jekyll markup approach to implement dynamic OG meta tags, however they didn't work - so I resorted to hardcoding them.

I've confirmed my tags are present using this tool - https://coveloping.com/tools/open-graph-tag-tester

Yet when I try to share the site I'm not seeing a preview.

The meta data is present - view-source:http://amillionwordsforcharity.org/ But I'm obviously missing something. I also have Twitter card meta data in there too, can they co-exist or should OG meta data work in Twitter?

Upvotes: 0

Views: 259

Answers (1)

Goyllo
Goyllo

Reputation: 331

First you should test your site here

So, looks like your Facebook APP id is not configured well, so correct it, or simply remove it.

Another thing is that, you have placed same details in your all blog post, but it should be various for each page.

Use this front matter in your jekyll blog

layout: post
title: Your Blog Post/page title
description: Write unique description for each webpage.
ogimg: http://www.example.com/assest/image/photo0.png

Now, you need to add this meta tags in your head section.

<meta property="og:title" content="{{page.title}}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}}}" />
<meta property="og:description" content="{{page.description}}">
<meta property="og:image" content="{{page.ogimage}}" />
<meta property="og:type" content="website" />

Also, I have seen double slash in your blog URL (click on continue reading and you will see double slash in permalink), so fix that also in your config permalink option.

Upvotes: 3

Related Questions