Table of contents
Issue: You are using SVG as your logo or post image
You’ll notice that your SVG image isn’t showing up when you share your post on Facebook, or an Open Graph checker/tester service. Bellow are some services to preview meta tags :
- https://metatags.io/
- https://www.opengraph.xyz/
- https://dnschecker.org/open-graph-preview-generate-metatags.php
- https://developers.facebook.com/tools/debug/ (You must be logged in to use this tool)
Since i’m using Rank Math plugin, in Title & Meta section, i went to Homepage tab and i set my site svg logo as the Homepage Thumbnail Preview for Facebook. This was my mistake and perhaps yours as well.
Problem is Open Graph does not support SVG images.
So if you’ll have a piece of code like this :
<meta property="og:image" content="http://site.xyz/logo.svg" />
Open Graph Object Debugger will not detect it as an image.
Solution: Use png or jpg images as your thumbnail
To solve this i exported my logo from my original .ai project as a png image
After save i went to test the preview of my site’s homepage on https://metatags.io/ .
Issue: Open Graph doesn’t allow relative URLs
If you’ll have relative paths OG will say it’s not an image. Code example :
<meta property="og:image" content="images/logo.png" />
Solution: Use absolute URLS
Your code must look like this in order to be valid for the OG protocol :
<meta property="og:image" content="https://mustcode.xyz/images/logo.png" />
