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 and LinkedIn.
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 Social media sites view multiple tags and fields 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 Twitter look first for Open Graph tags. Twitter looks first for Twitter cards.
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 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 Open Graph Image field on the Social Warfare Custom Options section of the post editor. If an Open Graph 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 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’s 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:
- Open Graph Image Field: If you upload an image into the Open Graph 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 Open Graph 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 Open Graph 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 Open Graph image field or 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 its settings, but also 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.
If a user crafts a title, description, or image for Social Warfare Open Graph fields, Yoast will overwrite them.
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” is 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.
