I am unable to have my open graph images show up on any platform, even though I think I’ve implemented them correctly. This is my frontmatter in all my posts:
---
feature: abstract.png
metaimage: abstract.jpg
Title: Some title
summary: Lorem Ipsum
slug: someslugs
---
The metaimage
parameter links to the image for the OG tags in the static folder.
In my <head>
partial (here), I have defined the meta tags are follows:
{{ with .Params.metaimage }}
<meta itemprop="image" content="{{ . | absURL }}" />
<meta property="og:image" content="{{ . | absURL }}" />
<meta name="twitter:image" content="{{ . | absURL }}" />
<meta name="twitter:image:src" content="{{ . | absURL }}" />
{{ else }}
<meta itemprop="image" content="{{ .Site.Params.ogimage | absURL }}" />
<meta property="og:image" content="{{ .Site.Params.ogimage | absURL }}" />
<meta name="twitter:image" content="{{ .Site.Params.ogimage | absURL }}" />
<meta name="twitter:image:src" content="{{ .Site.Params.ogimage | absURL }}" />
{{ end }}
<meta name="description" content="{{ .Params.summary }}" />
<meta itemprop="description" content="{{ .Params.summary }}" />
<meta property="og:description" content="{{ .Params.summary }}" />
<meta name="twitter:description" content="{{ .Params.summary }}" />
This head partial is included in my baseof.html.
The image is accessible when I go to it directly. You can see the page here and view the source.
I have tried to check if this works by going to a website like MetaTags.io and they are able to pull it up there. However, this does not work on Whatsapp, Facebook, Twitter or Discord. In some places only the description is pulled up or description and title but never the image.
What am I doing wrong and how can I fix it?
One thing I have noticed in the generated source code is that the double quotes are being removed from around the links.
<meta itemprop=image content=https://thedivtagguy.com/abstract.png>
<meta property=og:image content=https://thedivtagguy.com/abstract.png>
<meta name=twitter:image content=https://thedivtagguy.com/abstract.png>
<meta name=twitter:image:src content=https://thedivtagguy.com/abstract.png>
Could this be the problem? Aren’t links supposed to be like this: "somelink.com/whatever.png"
?