Social Media

Open Graph Tags for Social Sharing

When sharing a link on Facebook, sometimes it will pop up with a nice, big, clear photo. It depicts the logo of the organization you’re linking to or something specific about the page you’re sharing. Some of this happens automatically, but chances are if it looks really great, that’s not by accident.

Web developers can control the appearance of shared links in social media platform using Open Graph Tags. They’re not quite as daunting as they may sound to set up or use.

How to View Open Graph Tags

Right-click and View Source on this page. You’ll find a number of open graph tags right in the header of the page. They are all denoted by an og: prefix. For now, we’ll just focus on the og:image tag and how that works.

<meta property="og:image" content="https://i2.wp.com/www.dijonmarketing.com/wp-content/uploads/dijon-marketing-logo-open-graph.jpg?fit=1000%2C500&#038;ssl=1"/>

It’s a metadata with a property of og:image and a content URL pointing to the photo I want to use. You can cut and paste the photo link into your browser to view it like any other image. This one happens to have “open-graph” in the name. That’s because it’s scaled properly to show on Facebook with no skewing or sections of the logo cut off. Here’s what it looks like if you share my website on Facebook (which … feel free to do).

Open Graph Tags using default og:image

Default Versus Featured Open Graph Images

In this case, the home page has no Featured Image set in the WordPress document. I’ve defined a default fall-back photo inside the Yoast SEO plugin. Just go to SEO > Social > Facebook and upload the photo of your choice. The aspect ratio should be 2×1 and preferably 1200×600 pixels large. Then Facebook can scale it as they wish.

If you have a featured image set, then Facebook will default to using that, like with this blog post:

Open Graph Tags using WordPress Featured Image

Sites Without Open Graph Tags

If you have no open graph tags, it doesn’t mean you won’t have shares with nice images. You’re just leaving it up to Facebook’s crawlers to scrape your page looking for some image to use. The results can be completely random, or even inappropriate. If you haven’t defined your og tags, take a moment to get at least a default photo set up. The click-through ratio of your social shares will thank you!