How to Add Meta Tags for Social Sharing in WordPress

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.

Having the right meta tags give you a certain amount of control over what your social shares will look like.

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:

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?

How do you put these tags on your WordPress site

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.

The plugin that I use on all of my sites is Yoast SEO, sometimes called WordPress SEO. There is both a free and a premium version of this plugin. I currently use the free version on all of my sites.

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.”

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.

Your email address will not be published. Required fields are marked *

Comment

Name *

Email *

Website

New Video Course Coming Soon – Learn More!!

Check Out My Etsy Store

About Me

Hello, my name is Dennis Caskey. I have been a hobbyist woodworker since 1999.

I have a day job, a mortgage, a home with an extra deep 2 stall garage, and a family to support. I have a lovely wife and two teenage boys who are now taller than me, (it is very hard for me to admit that).

Woodworking is a passion for me. For over 20 years I have worked in ..... Read More

Just a Note…

Well, in the past, I have owned a few different blogs, Bloggeristic.com, MapleGroveWoodworks.com, & ShoestringWoodworker.com being among them. When I decided to start DennisCaskey.com I decided to close down these blogs down and just import the content here.

Disclosure of Material Connection:

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”