FB OpenGraph og:image, link a folder?

November 20, 2021

I’m in the process of adding meta tags to a project, and I’ve been reading through the OpenGraph doc, however every time I see og:image what comes next is always a URL. Is it possible to pass a folder in?

file structure:
public
   index.html
   images
    staticimage.png

Can I just...
<meta property="og:image" content="./images/staticimage.png" />

So far it doesn’t appear to be working.

>Solution :

Relative URLs will not work, the og:image property can only handle full URLs.

The og:image property does have some optional structured properties:

og:image:url – Identical to og:image.
og:image:secure_url – An alternate url to use if the webpage requires HTTPS.
og:image:type – A MIME type for this image.
og:image:width – The number of pixels wide.
og:image:height – The number of pixels high.
og:image:alt – A description of what is in the image (not a caption). If the page specifies an og:image it should specify og:image:alt.

A full image example:

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

Source: https://ogp.me/#structured