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?

Recently, I got a project to build an ecommerce website, and it’s been an interesting one.

Some pages were built with WPBakery while others used Elementor. I’m much more comfortable with Elementor, so I tried importing the demo content for the Elementor pages.

The problem? Some of those pages were apparently built specifically for WPBakery. When I tried opening them with Elementor, the layout was completely messed up.

So I decided to bite the bullet and rebuild the page from scratch in Elementor.

Then I hit another issue.

It’s a contact page, and I wanted to use Contact Form 7. But apparently, adding a CF7 form directly through Elementor requires the Pro version.

What confuses me is that Contact Form 7 is a separate plugin and isn’t even an Elementor feature. Why should I need Elementor Pro just to drop a CF7 widget onto a page?

Has anyone else run into this limitation with Elementor Free? What’s your preferred workaround?