How social networks find the featured image

postimage

We have written a nice post, set a beautiful featured image, and we share our post in social networks like Facebook, Google Plus or Twitter. And they pick the wrong preview image: the logo or just the first image they found in the code.

We can fix that easily and tell those services which picture to use. The key for that is the Open Graph Protocol (OGP). It is a scheme for meta data, invented by Facebook. Nowadays, most social networks have implemented it, so we don’t have to use something different for each.

These meta data are added either to selected elements in our content or as children of the element head. We need just the second case.

Our goal should look like this:

Of course, we want to create the HTML automatically and put that into a mini plugin, so that we don’t have to care about this issue anymore.

That’s quite simple. In each proper theme, there is an element head with the following code:

The function wp_head() is called here, it calls an action with the same name:

And we use this action to add our HTML code:

Now we need a function marketpress_ogp_image() to make that happen. We will check in this function if …

  1. we are on a single page, a page, a post or another post type,
  2. we’ve set a featured image,
  3. that still exists, and
  4. we get a usable URL for that image.

If everything is ok, we print the HTML.

In PHP it looks like this:

I have added the source code as a complete plugin to our repository Mini Plugins. You can download the plugin as a separate ZIP archive: Open Graph Featured Image.

Post Sharing

Author Avatar

I am a developer and author for MarketPress. In my free time, I am a moderator for several WordPress communities.

Similar Posts

slack-blog

New Plugin: Slack Connector - Connect WordPress, WooCommerce and Slack

by Thomas Scholz

Initially we merely wanted to optimize our own Slack-processes. With automated notifications from our MarkettPress shop, the blog and our forums. The resul ...

Read more
rolebasedprices-en

Role Based Prices for WooCommerce is available again: Different prices for different customer groups

by Thomas Scholz

You want different prices for different customers and users of your online shop? E.g. for subscribers or wholesaler? Or do you need bulk prices? A lot of o ...

Read more
MarketPress GmbH

Note to our Customers: MarketPress becoming MarketPress GmbH

by Thomas Scholz

MarketPress - previously a project of Inpsyde GmbH - is about to become its own company. This is a huge step on our journey of building the first marketpla ...

Read more
vip

Inpsyde is the first WordPress.com VIP partner in Germany

by Thomas Scholz

Automattic has given us the title of WordPress.com VIP Service Partner, the first in Germany, Austria and Switzerland. Worldwide, there are only eleven com ...

Read more

Comments

1 Comment

  1. #1

    Nice post there +Thomas Scholz. 😉
    And well explained.
    I will implement this in the near feature for sure.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">