3

I'm in the process of adding meta tags to a project, and I've been reading through the OpenGraph documentation, however every time I see og:image what comes next is always a URL. Is it possible to pass a file in instead with a relative path?

File Structure:

public
   index.html
   images
    staticimage.png

Can I just link to the image path?

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

So far it doesn't appear to be working.

1 Answer 1

5

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

1
  • 1
    Ahh okay, I didn't see anything indicating about relative paths (I need to really engrain that term) so thought I would ask. Thank you! Nov 20, 2021 at 21:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.