Add Open Graph Protocol Markup to Any WordPress Theme

Rich objects in a social graphs

When you share a link on Facebook, an image from the link is shown, usually. Sometimes, no image is displayed, as if Facebook couldn’t find a suitable image at the URL.

Why?

Adding Open Graph protocol tags to your site will ensure that Facebook knows which image to use when someone shares a page on your website. Open Graph markup is similar to schema.org markup. Both allow you to define values for certain aspects of your website, as seen by other sites like Facebook, Twitter, and many other social media sites.

How?

There’s a couple of ways we can do this. You can use a plugin, like Open Graph Protocol Framework, or you can add Open Graph markup to your WordPress theme manually.

We’ll be covering how to add Open Graph markup to your theme manually. Especially useful for theme developers who want to build Open Graph protocol support into their themes.

The markup we’ll be adding can be seen in this GitHub gist:
https://gist.github.com/tlongren/e9e2316fa95b50cbed38

Most of that should be pretty self-explanatory.

The og:type property is the only tag that needs explanation, as there’s only certain values that are valid. Most of the time, you’ll probably be setting the og:type property to article or website. A list of other Open Graph protocol object types can be found at the Open Graph protocol site.

The Code

Every Open Graph property will be set on-the-fly, depending on which post or page is being viewed or shared. To add the necessary markup, we need to use the add_action WordPress function inside your theme’s functions.php file. Here’s how I’ve been handing it:
https://gist.github.com/tlongren/de3f80c5f0b54a01e24f

Comments are open below, feel free to ask questions or tell me how wrong I am on one point or another. 🙂

Well, now what?

Work with Me

I'm available for hire and always taking new clients, big and small. Got a project or an idea you'd like to discuss? Startup plan but no developer to make it happen? Just get in touch, I'd love to see if I can help you out!

Leave some Feedback

Got a question or some updated information releavant to this post? Please, leave a comment! The comments are a great way to get help, I read them all and reply to nearly every comment. Let's talk. :)

Longren.io is proudly hosted by DigitalOcean

DigitalOcean

4 thoughts on “Add Open Graph Protocol Markup to Any WordPress Theme

  1. if the post doesn’t have an image, where i put the url of the image that i want set for default, here: $image = ‘url image here’;

    0
    1. Right, in functions.php, line 11 you can specify the default image URL if no image is set for a post or page.

      See below, especially the comment as it has an example:
      https://gist.github.com/tlongren/de3f80c5f0b54a01e24f#file-functions-php-L11

      And here’s the example from the comment on the GitHub file:

      If no image is set for a post or page, the $image variable can set or dynamically constructed to point to an image on your server. To point it to a static file, line 11 would look like:
      $image = 'http://yourserver.com/images/whatever.png';

      0
  2. Pingback: traiteur rabat

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.