Understanding what Open Graph Tags and Twitter Cards are, how to maximize their effectiveness, and how they work with the Social Warfare plugin.
Table of Contents:
What are Open Graph Tags and Twitter Cards?
Open Graph meta tags are designed to communicate information about your website to Social Media sites when links to your site are shared. These tags allow you to craft custom titles, descriptions, and images to be used when your pages are shared on Facebook, LinkedIn, and Google Plus.
Shared links with carefully crafted Open Graph meta tags have the potential to garner far more visibility than those without them. As such, we make sure that if you have our plugin installed, Open Graph meta tags will be generated for all of your posts and pages.
Twitter cards are pretty much exactly like Open Graph meta tags, except that there is only one network, Twitter, that looks at them.
Important: Open Graph and Twitter Card meta tags were created specifically for Social Media sharing. As such, they have absolutely no impact on SEO. Google and other search engines ignore these tags completely because they know that these are webmaster’s specific communications to Social Media sites and are intended to be different than what is presented to search engines.
Most of the Social media sites have multiple different tags and fields that they look at in order to populate the information needed to make a share look good. For example, Facebook checks first for an Open Graph title tag, but if it isn’t present on the page, then they use the actual page title.
All of the networks except for Google Plus and Twitter look first for Open Graph tags. Twitter looks first for Twitter cards. Google Plus looks first for Schema markup, and if that’s not present then they look at Open Graph tags.
Important: Although Google Plus looks first for Schema markup, so does Google, the search engine, along with other search engines like Yahoo and Bing. As such, we will not use Schema for Google Plus. It is outside the scope of a social media plugin to use tags that could impact SEO. We only use Open Graph tags which Google Plus will use if Schema is not present on the page.
What are the specific tags used in each set?
Open Graph tags and Twitter Cards use very specific tags to communicate very specific information to the various social networks. Here is a list of each of these tags and where you can modify their output.
Open Graph & Twitter Title & Description: These tags are pretty self-explanatory. We’ll pull this from the Social Media Title & Description fields on the Social Warfare custom options section of the post editor. If a Social Media Title or Description has not been added, we’ll use the title of the post or the post excerpt respectively to fill these tags.
Open Graph Image: This tag will populate a preview image into the share. We’ll pull this from the Social Media Image field on the Social Warfare Custom Options section of the post editor. If a Social Media Image has not been set, then we’ll look for a post thumbnail. If that’s not set, then we won’t be outputting an image tag.
Open Graph Author & Publisher: The Author tag is refers to the individual who wrote the post and is taken from the Facebook Author URL field on the user profile settings page in WordPress. The Publisher refers to the site and is taken from the Facebook Page URL field on the Social Identity tab of the Social Warfare options page.
Twitter Creator & Site: This works the same way as the Open Graph author and publisher. The creator Twitter handle is taken from the Twitter Username field of the user profile settings page. The site is taken from the Twitter Username field on the Social Identity tab of the Social Warfare options page.
What type of Twitter Card does Social Warfare output?
There are two types of Twitter Cards that Social Warfare will output for your pages.
Summary Card: A summary card showcases the title and description of the post on Twitter.
Summary with Large Image: In addition to the title and description, this type of card will also showcase a large image maximizing the visual real estate that shares of your posts gain on that platform.
As you can imagine, it’s our desire to always use the large image version of the Twitter card. However, in order for that to happen, you need to let the plugin know what image you want it to use to generate those cards.
Here’s how we built the Twitter cards in the order of precedence:
- Social Media Image Field: If you upload an image into the Social Media image field, we will use that image and therefore create a Summary Large Image Twitter card.
- Featured Image: If you don’t upload an image into the Social Media image field, we will use the Featured Image and therefore create a Summary Large Image.
- Nothing: If you don’t upload an image into the Social Media image field and you don’t upload a Featured Image, we have no way of knowing what image you want for your Twitter Card so we are forced to use the Summary Card without an image.
So basically, you just need to put something there for the plugin to use and we’ll use it. Either in our Social Media field the post’s featured image field.
How does Social Warfare coordinate with Yoast’s Open Graph settings?
When developing the core logic for how we wanted to generate Open Graph and Twitter Card meta tags, we quickly realized that Yoast SEO also has options for generating these as well.
Since Yoast SEO is one of our absolute favorite plugins, we took special care to make our plugin not only detect the presence of Yoast SEO and it’s settings, but also to directly interact with it in order to create only one set of each tag, carefully crafted to get you the maximum exposure possible on Social Media networks.
Here’s how we craft these meta tags for you:
If Yoast is not present, we simply generate the tags without question so that you don’t have anything to worry about.
If Yoast is present and Open Graph tags are turned on in their settings, we do not output a set of Open Graph tags unless you manually craft at least one of our Open Graph fields on the post editor screen.
If a user crafts a title, description, or image for our Open Graph fields, then not only are we going to output that specific tag, but we’re going to ensure that an entire set of Open Graph tags are generated.
Here’s how we will populate the value for each field. We’ll go through each necessary field that needs to be output using the following sequence of checks to determine what to output in that field.
- First, we’re going to check if you filled out the Social Media field in the Social Warfare options for that post. If that’s not filled out, we’ll move on to step 2.
- Second, we’ll check if you filled out the Facebook field for Open Graph and Twitter fields for Twitter Cards in the Yoast SEO options for that post. If that’s not filled out, we’ll move on to step 3.
- Third, we’ll check if you filled out the SEO field in the Yoast SEO options for that post. If that’s not filled out, we’ll move on to step 4.
- If nothing else is filled out, we’ll automatically generate some content from the post.
If we determine that we need to generate Open Graph tags, we will turn off open graph tags from Yoast, and pull the values from Yoast into our own Open Graph tag set.
We don’t want to have two sets, but at the same time, we do want to use their values if they’re available. This allows the two plugins to work perfectly in conjunction with one another.
How do I test and view what Facebook is seeing on my site?
As mentioned above, Facebook scrapes your page looking for those Open Graph tags. Once they do, they cache and reuse that information for about a week or so. So when you first add Open Graph tags, Facebook might not see them right away. Instead, they might continue to use the information they saw the last time they checked it out.
But here’s the great news: Facebook provides a tool called the Facebook Open Graph Debugger that allows you to simply input a link to your page and have them reexamine it instantly.
Important: If you ever have an issue with a Facebook share, simply use this debugger to have Facebook reexamine your page. If you’re using Bitly link shortening, be sure to use the Bitly version of the link. Facebook will see that the Bitly link forwards to your page and use the open graph information from your page when the Bitly link is shared.
Here’s how you can find the Bitly link that Social Warfare uses for Facebook sharing:
- Go to the post editor, navigate to the top and open the “Screen Options” tab at the top right of the page. Ensure that “Custom Fields” are activated.
- Scroll down to the custom options section of the editor. From there, you can find the Bitly links for each network.
- Grab the one for Facebook and put that through the debugger.