What meta tags for social sharing do for you
Meta tags for social sharing are the things that allow social sites, such as Facebook and Twitter, to get the right information from your website to share. By using the right meta tags you control the information that is seen in the share.
Here is what a Facebook share will look like when it has the proper meta tags defined:
The three important elements to note here are the image, title, and description. Without the meta tags for social sharing properly defined, this Facebook share could look drastically different, and not be at all appealing. Which means that it will get ignored by those who see it.
If Facebook has to guess at what information to pull for the share, it might grab the wrong image from your page, such as an ad. It might pull the wrong title or description information as well. This could ruin any chance that someone will click on the link and find your site.
One of the great things about WordPress is that it is extremely easy to make sure that you have these meta tags. No coding involved.
What are meta tags for social sharing?
Meta tags for social sharing are not something that you are going to see on the front end of your website. They are not something that you are going to see in the admin pages of your WordPress installation. They are buried in the HTML code of your site.
When I was in college and we were learning about “meta” data, we were taught that it is “data about data.” When it comes to websites, meta tags contain data about the website, page, or post.
If you want to see them, go to any page/post on any website, right click your mouse in some white space (not on an image) and click on “view source” or “view page source” or something similar depending on which browser you are using.
This should open a new tab in your browser, displaying all of the code that renders the web page in the browser. Depending on the page you are viewing, you might have to scroll down a bit, but you will eventually start seeing something that looks similar to the following:
<meta name="description" content="Having the right meta tags for social sharing makes it much easier for people to share your content on Facebook and Twitter. Learn how to add these tags..."/> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Wordpress OG Meta Tags for Social Sharing | Dennis Caskey" /> <meta property="og:description" content="Having the right meta tags for social sharing makes it much easier for people to share your content on Facebook and Twitter. Learn how to add these tags..." />
Anything that begins with a “<meta” is a meta tag.
So what does this have to do with social sharing?
Well, Facebook, Twitter, and many of the other social networks as well, look for a special set of meta tags called Open Graph meta tags. Actually, Twitter has it’s own set of meta tags called Twitter Card meta tags, but if those aren’t present, it will use the Open Graph tags instead.
These tags contain specific information about the web page and allow them to display that information in Facebook posts and Tweets in a nicely formatted way.
The Facebook tags contain and “og:” in the property attribute, looking like this:
<meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Wordpress OG Meta Tags for Social Sharing | Dennis Caskey" /> <meta property="og:description" content="Having the right meta tags for social sharing makes it much easier for people to share your content on Facebook and Twitter. Learn how to add these tags..." /> <meta property="og:url" content="http://www.denniscaskeywoodworking.com/?p=1101" /> <meta property="og:site_name" content="Dennis Caskey" />
The Twitter tags simply replace the “og” with “twitter”, looking something like this:
<meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:description" content="Having the right meta tags for social sharing makes it much easier for people to share your content on Facebook and Twitter. Learn how to add these tags..."/> <meta name="twitter:title" content="Wordpress OG Meta Tags for Social Sharing | Dennis Caskey"/> <meta name="twitter:site" content="@DennisCaskey"/> <meta name="twitter:image" content="http://www.denniscaskeywoodworking.com/wp-content/uploads/2015/10/Header1_1920x800_.jpg"/> <meta name="twitter:creator" content="@DennisCaskey"/>
So what is the point of having meta tags for social sharing?
Now that you know what meta tags for social sharing are, let’s talk about why you need them.
It’s all about getting more reach out of a share. When someone shares your content on a social sharing site, and you have these meta tags, the share will be nicely formatted and will contain an image.
Research is showing more and more that when people share images on social sites, they get more reach than do shares that don’t contain images. This, of course, will lead more and more people to your site, which is what you want, right?
According to Social Media Examiner, photos get the highest interaction rate with 87%. Second place, well, 4%. Need I say more?
You’ll be happy to know that you don’t have to know any code to be able to put this on your WordPress site. It is as simple as installing a plugin and changing a couple of settings. Piece of cake.
Yoast SEO does a lot of things, but today I am just highlighting part of it; the social part, of course.
This first step is to install and activate the plugin. You’ll notice that you now have a new menu item in your WordPress Admin Menu called SEO. Hover over that and select “Social.”
You will now be faced with the following screen:
Fill out the information for your Facebook page, Twitter username, etc. Just a note here: Don’t put the @ symbol in for your twitter username, just put in your username itself. Don’t forget to save your changes.
Now select the Facebook tab at the top.
Here is the really important part. Make sure you check the box that says “Add Open Graph meta data”. You might want to add an image to be used as a default if the post or page being shared doesn’t contain any. Using your logo, or head shot here is usually a good idea. Again, don’t forget to save your data.
Now select the Twitter tab.
The important thing to do here is to make sure the box is checked next to “Add Twitter card meta data”. You can set the default card type to use to either “Summary” or “Summary with large image”. I prefer the “Summary with large image”, but, obviously, the choice is yours. Again, save your changes.
That’s really all there is to it. Your pages and posts will now have the meta tags for social sharing that they need.
Okay, there is one more thing you are going to need to do. You need to visit the Twitter Card Validator and validate your metadata. Enter the URL for one of your pages and select “Preview Card”. If everything is working right you will see a preview of what the share will look like when tweeted. Once you know it is working for one of your posts, it should work for them all, however, you might want to double check each new post.
What problems might you run into
There are a couple if issues that could crop up here. The first thing is quick and easy. If you have a caching plugin installed, make sure you clear the cache. This will make sure that the page cache is rebuilt with all the meta tags.
One problem that I ran into is that both Facebook and Twitter have a cache of everything that gets shared. So if your page has already been tweeted before having the meta tags for social sharing installed, your meta tags won’t mean anything until they clear the cache. I have read that Twitter clears theirs every 7 days, I am not sure about Facebook.
There is a way to speed this up, though.
For Twitter, just visit the Twitter Card Validator and validate the page you want to clear the cache for. After that, it should work.
Another thing about Twitter that you will want to be aware of is that when you select the share button on the web page, what you see before you select tweet is not what will show up on Twitter. For example, you might see something like the following, only the title of the page and a link, no image:
Once you hit “Tweet”, though, what you will actually see on Twitter will be quite different. It will look similar to this:
You will need to select the “View Summary” link in order to see the Twitter Card.
For Facebook, visit the Facebook Debugger and enter the URL that of the page you want to clear the cache for and hit “Debug”. A new page will come up showing a bunch of information about the cached metadata. What you need to do now is select “Fetch New Scrape Information”. This will reset the cache.
Resources, Sources, and Links
Here is a recap of the resources used above:
- Yoast SEO Plugin
- The Yoast Website
- The Facebook Debugger
- The Twitter Card Validator
- Social Media Examiner
I hope this helps you in your efforts to set up your meta tags for social sharing.
I am curious to know if you have used any other methods for adding your open graph meta tags. If so, what have you done? Please feel free to leave a comment below.