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 file 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.
CodePudding user response:
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 specifyog: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