Open Graph is a protocol used by developers to make sure that Facebook and Twitter can crawl our websites and display shared posts the way we want.
Setting the open graph meta tags is very important for our marketing, as explained in this guide by KISSmetrics. If you are on WordPress and using the popular WordPress SEO by Yoast, you just need a few clicks for an optimal setup.
But Yoast is a resource-intensive plugin, and there are cases you don’t need to install it because you SEO need can be already covered in other ways.
As an example, Genesis Framework has a pretty good SEO engine. It is basic but lightweight, and from a developer’s perspective is very good to extend and customize for specific needs, but has no built-in support for the open graph tags.
Add open graph meta without a plugin
Open Graph tags need to be printed in the website header and contain content and technical information about our site, like country, language, title, and image to display on social networks (even different from what we show on site).
So we can use the wp_head hook to add them to WordPress using any theme. Let’s wrap the code up:
I run this code on my own site, but is important to highlight some details you may want to understand or change:
- I am the only author on my blog, that’s why I use a fixed value for twitter:creator tag
- I need tags only on post and pages, but if you run a more complex site with custom post types like products, events, jobs, you will need to to a better use of og:type tag
- sometimes I wanna display a different featured image on social media, so I added an og_image custom field but this is not something really needed
- if you run a multilingual site, you will need to add some more conditionals to add the og:locale tag
Now you have enough material to start testing code on your site and master your open graphs and social sharing look.
Until next time,