When setting up OG meta tags for a website. Many people find it simpler to have relative URLs like this.
<meta property="og:image" content="../assets/banner.jpg"/>
OR
<meta property="og:image" content="/banner.jpg"/>
Now the question arises... Does Facebook's Open Graph Specification support relative URLs?
And more importantly... Is it a good idea to put a relative URL rather than an absolute URL like this...
<meta property="og:image" content="https://example.com/assets/banner.jpg"/>
The Wrong Approach
This
<meta property="og:image" content="../assets/banner.jpg"/>
And this
<meta property="og:image" content="/banner.jpg"/>
Both are incorrect approaches. Even though they will work just fine for sharing in a rich format. You better make sure it's as per the standard.
To make sure it works in the future without any intervention.
The Correct Answer
According to Official Facebook's Open Graph Protocol Schema. They define the og:image value as the following...
A string of Unicode characters forming a valid URL having the HTTP or HTTPS scheme.
So that means that even though Relative URLs will work. Facebook uses a fallback approach for Invalid Full URLs.
I always recommend you to stick with Absolute URLs
Correct Usage Example
<meta property="og:image" content="https://example.com/assets/banner.jpg"/>
Conclusion
Here is the content part of the meta tag that has to contain a full URL. Which can be either a self-hosted image on your domain. Or even CDNs will work just fine.
Go ahead. Make sure your entire website has this setup - as per the correct specifications.
Hope you found this helpful! Subscribe to our newsletter. Share this with your friends...