Now that I’m writing on my blog again (it’s been nearly two years) it means that I’m also going to start playing around with WordPress. I’ve always loved WordPress and it’s been a way for me to continue to dust off my coding skills and put them to good, practical use. Yes, I know how to code, it’s just that I haven’t had a lot of time to dig into it over the past couple years. A job in ops will do that to you.

Two Titles

When using WordPress, it’s always a work-in-progress as it’s one of the most adaptable and customizable content platforms out there. This not only means that there’s always a way to make it better, but if there’s something wrong with it there’s a good chance that someone else has already run into the issue before. With just a few searches and some patience almost anything can be fixed or upgraded.

But, funny enough, I had an issue today that seems small, but took me at least a couple of hours to fix, so I thought I’d post something about it. The issue is that for some reason I was getting some conflicts with the <title> tags and how the titles were showing up on my blog, but also how the titles were showing up on Facebook whenever I posted something there.

Ideally, my post titles would show up like this:

The Title of my Post | RyanHupfer.com

But, it was showing up all kinds of crazy thanks to my new Breeze WordPress theme and Yoast SEO plugin. When I looked at the source of my posts I was seeing two title tags that were conflicting and the titles would end up looking like this:

RyanHupfer.comThe Title of my Post | RyanHupfer.com

or like this:

RyanHupfer.com – The Title of my Post

Here’s a screenshot of how my WordPress post looked like when I posted it on Facebook. You can see it’s not how I like it, and the description was all messed up.

I was getting super frustrated, but thanks to a couple of things I figured it out. Here’s what happened.

Using The Facebook Developer Debugger

One thing I learned about through all of this is the Facebook Developers Open Graph Debugger (say that all at once – wow). What it allows you to do is see how Facebook sees any URL and the different Facebook Open Graph properties, with the most important being the og:title property, which tells Facebook what to use as the main headline for your WordPress link when adding it to Facebook. You can’t edit this once it pulls up on Facebook, so getting it right is important.

This tool let me keep track of how Facebook sees my URLs and if I made any changes all I had to do was click the “Scrape Again” button on the debugger to have Facebook pull the latest update I made to my blog. This is a super handy tool to know about and it really helped me figure this all out.

Searching For Help

So, now I knew what the issues were, but I was still getting some errors of two different titles showing up with both the HTML title tags as well as the Facebook og:title property tags. So, after searching a little bit I decided to take off the Yoast SEO plugin and that ended up getting me back to the original title structure of:

RyanHupfer.com – Title of my Post

It also removed the duplicate og:title tag, which was good. It was still wrong, but it wasn’t doubled-up, which is progress.

Figuring It Out

After searching through the WordPress Codex and getting deep into the rabbit hole, I found this page that told me about a simple setting on the Breeze WordPress theme that was created by Bluthemes. It told me about an option I didn’t know about in the theme that allows any SEO plugin (like Yoast) to control the title structures and meta data of the blog.

Of course after trying to figure this out for a couple hours I finally find this option, check it to let Yoast do the SEO heavy-lifting and then flip it back on in the plugin settings.

When I did that it let Yoast take control and automatically switched it to force rewrite titles, which is an option that’s available when you enable the advanced settings (which you should do).

All Good

Once I learned the proper order of operations on all of this SEO plugin and title stuff, I made sure that all of the post and homepage structures were setup how I wanted. After that everything looked perfect and the titles were outputting the right way on both the blog and on Facebook. Here’s what the Facebook Developers Open Graph Debugger looked like when when I was done:

Well, one issue figured out and now it’s onto the next one. If you’re having issues with seeing two doubled-up titles with your Breeze WordPress theme (or any other one) and it not looking good when you post it on Facebook, hopefully this helps.