Open Graph Debugger/ Simulator is compatible with each SNS.
- Displaying how a webpage is shared with Open Graph, by entering the URL.
- Showing og:image/ og:title/ og:description in preview how a webpage is shared on facebook/ Twitter/ LINE/ Hatena Bookmark.
- Displaying all those versions of PC, smartphone and app with various display sizes/ character lengths.
- Selecting and uploading up to 50 pictures for a display confirmation. Useful for comparing how these pictures are shown.
While multiple pictures are displayed, you can change a specific picture with a click.
* Please understand that the display might be different from the actual one along with the change of each SNS's display method.
* Once a webpage is shared, Open Graph setting is cached on a SNS.
In case the display (OG image, title, etc.) isn't updated after changing the setting, please try cache clear on each SNS.
What is an OGP?
OGP stands for Open Graph Protocol, which is a defined system to convey the contents of webpages on SNS. By setting Open Graph properly, a specified image/ title/ description is displayed when a web content is shared.
Why is og:image important?
When a webpage is shared, og:image fill a large portion of the display.
By setting the og:image eye-catching in appropriate size, the webpage will be more appealing for users, which leads to an increase in CTR/ the number of views.
Appropriate image for og:image
*recommended images as of May, 2019*
- Things to emphasize is set in the middle
- 1200*630 (aspect ratio: 1:0.525)
- PNG images
The reasons for the recommendations are related to the aspect ratio of an image and image compression process of each SNS.
*Aspect ratio of images*
- Facebook - 1:0.522
- Twitter (large), PC version - 1:0.502/ smartphone version - 1:0.524
- Hatena Bookmark, PC version - 1:0.68/ smartphone version - 1:0.75
Aspect ratio is mostly laterally long. When a square image is used for og:image, top and bottom are cropped. Og:image is square on Twitter (summary), Hatena Bookmark app and LINE, so when vertically/ laterally long og:image is set, top and bottom, left and right are cropped and and in displayed in square.
*Image compression process*
Og:image is sometimes compressed by SNS. Since PNG is a lossless compression format (a data compression method that makes before and after process with compression and development be totally equal), the image quality doesn't change.