During our 2022 redesign, Tyler noticed that our OG (Open Graph) tags weren’t working quite right. We had been using Jetpack to add these, but for reasons that weren’t clear to us, that stopped working in late 2020. In the interim, we tried a few alternative plugins, but none of them worked quite the way we wanted.

Here’s the great thing about the Open Graph protocol: It uses native HTML elements! There’s nothing particularly complex about the tags themselves, there are just a lot of them, and it was convenient to have a plugin generate them for us. But that meant we were giving up a degree of control, and accepting what the plugin thought was the correct output. Since our site has several custom content types and some special logic for handling the featured image, we decided to roll our own.

If you’re interested in doing the same, I hope this is helpful. I’ll be broadly summarizing what we did in this article, but if you use WordPress, you may be interested in viewing our OG helper code directly.

Adding an Open Graph helper functionStep one was adding a new PHP file containing a script that will generate the OG tags. We already have a collection of these, which we store in a /helpers directory. I created add_open_graph_tags.php there, and stubbed out an empty add_open_graph_tags() function.

```

'og:site_name', 'content' => get_bloginfo('name')], ['property' => 'og:locale', 'content' => get_locale()],];// Echo the OG tags to the pageforeach ($open_graph_tags as $tag) { echo sprintf( "\n", $tag['property'], $tag['content'] );} ``` And with that, suddenly two OG tags are being rendered on every page of the site! Homepage OG tagsFrom here, the bulk of the function is broken up by WordPress content type, using the handy `is_type()` helpers. For example, here’s what the code to add homepage-specific OG tags looks like: ``` // Homepage OG tagsif (is_front_page()) { $open_graph_tags = array_merge($open_graph_tags, [ ['property' => 'og:type', 'content' => 'website'], ['property' => 'og:url', 'content' => get_bloginfo('url')], ['property' => 'og:title', 'content' => get_bloginfo('name')], [ 'property' => 'og:description', 'content' => get_bloginfo('description'), ], [ 'name' => 'description', 'content' => get_bloginfo('description'), ], ]);} ``` The whole thing is nested inside an `is_front_page()` check, so we know this code will only run on the homepage. You may have noticed that all the items have a `property` key except the second `description` item. That’s because we want to generate both an OG description tag and a traditional `` tag. In theory, you can skip `og:title` and `og:description` and sites that consume your OG tags *should* fall back to the `