Control How WordPress Posts Look On Social Media, With Open Graph

You want your WordPress posts and pages to look as good as possible when they’re shared on social media. Here’s how to control that, using the Yoast SEO plugin to set Open Graph meta data. Watch the video, or read the notes below it.

What you’re trying to do is make sure that social media sites pull the right title, description, and image from your WordPress post/page. Here’s an example from Facebook:

You want a default image for your site, so that if a post/page doesn’t have an image, social media sites still have something to show. Otherwise you’ll get an ugly blank instead of an image.

The Yoast SEO plugin lets you set this in SEO > Social > Facebook > Image URL. Set this to your logo or some other branded image.

Here’s a post that doesn’t have its Featured Image set. Facebook pulls the site’s default image:

Every page and post in WordPress has its own Featured Image. Set this, and it’ll be the first choice for social media sites.

To set a separate image for certain social sites, click the Social icon in the Yoast SEO box, then choose the image for Facebook, Twitter, and/or Google+.

By default, this will be your post/page title. To customize it, write a different title in the Yoast SEO box that appears when you edit your post/page. If you write it in the Snippet Editor, it will apply to search engines (Google, Bing, etc.) as well as to social media.

To set a separate title for certain social sites, click the Social icon in the Yoast SEO box, then write the title for Facebook, Twitter, and/or Google+.

By default, this will be the first part of the text of your post/page title. That’s not idea. To customize it, write a different description in the Yoast SEO box that appears when you edit your post/page. If you write it in the Snippet Editor, it will apply to search engines (Google, Bing, etc.) as well as to social media.

To set a separate description for certain social sites, click the Social icon in the Yoast SEO box, then write the description for Facebook, Twitter, and/or Google+.

A great way to troubleshoot how posts appear on social is Facebook’s Open Graph Object Debugger. Enter the URL you want to test, and click Show existing scrape information. That shows what Facebook already has for that URL. Scroll down to see the two sections that are most helpful:

• Based on the raw tags, we constructed the following Open Graph properties
• When shared, this is what will be included.

To force Facebook to check the URL again, click the Fetch new scrape information button at the top of the page, then check those sections again. You may need to click that 2-3 times for Facebook to show the latest info.

This looks like a lot of work, but the basics are pretty simple. And you’re probably already doing most or all of this anyway; you’re probably already setting the Featured Image so it shows on your site, and you’re probably already writing descriptions for the sake of SEO.

Let us know if you’re looking for help optimizing your site to look good when your content is shared in social media.