Unable to display meta tags or images properly

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"?

you can disable minify to trim quotes on attributes value by setting this minify config:

minify:
  tdewolff:
    html:
      keepQuotes: true

More on minify configuration:

When I put that page in

I get

 2 Open Graph tags detected.
 The og:title tag was not detected.
 The og:type tag was not detected.
 The og:url tag was not detected.

It looks like you are only adding the image related tags not the rest of the opengraph metadata.

Quotation marks around attributes are not required unless the attribute contains one or more of the following: whitespace, ", ', =, <, >, or `.

Ref: https://html.spec.whatwg.org/multipage/syntax.html#attributes-2

Facebook’s sharing debugger produces:

1 Like