If you share your website link on social media or messaging apps, you’ll notice that it usually loads a preview with an image, title, and description. That's OG at work.

The Open Graph Protocol was introduced by Facebook in 2010 to optimize how your website content appears when shared on social media.

It doesn’t add any direct SEO value, but I still think it matters.

If you haven’t optimized your Open Graph settings, your website preview may use your favicon as a fallback option.

A favicon is usually a 32×32 pixel image designed to sit in the browser's top bar. If that tiny image gets stretched to fit something like a 1920×1080 social media preview, it can get cropped vertically, losing a lot of detail. The horizontal stretching can also make it look extremely pixelated.

Basically, your website might look great, but the preview people see when you share it can look terrible.

How to set it up

For WordPress, I use Yoast as my all-in-one SEO tool. During the initial setup, you can configure your social sharing settings. I take a screenshot of the client's website hero section and use that as the social sharing image. This usually acts as a fallback image option for all pages of the website if they don't have explicit OG configuration.

To set up each page's Open Graph configuration, title, and meta description, select a page from the All Pages tab in the WordPress dashboard. Then hover on each page to see the following options: Edit and Quick Edit. Select Edit (not Quick Edit), and scroll down to where Yoast gives you options like SEO, Readability, and the 3rd tab, Social.

From there, you can add your Open Graph image, title, and meta description.

I had forgoten about this until I noticed how bad the preview was on one of my client's websites.

Hey, I am Chris, What is your experience while trying to configure the Open Graph Protocol?