Open Graph Debugger/ Simulator

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.

• Facebook/ LINE Object Debugger - Facebook Developers
• Twitter Card Validator | Twitter Developers

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.