Search code examples
htmlfacebook-opengraphmeta-tags

FB OpenGraph og:image, link a folder?

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.

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