Meta tag description and keywords used to be all you needed in web pages, but they a no longer sufficient. Here we will look at the tags you need for great Facebook shares.
The old description and keywords meta tags that used to be such an essential part of the code underlying a web page are too limited these days and they don’t provide the information that social media services and search engines require.
They have not completely gone away and you should still use them, but new tags have been added that are better.
Open Graph is a development of meta tags and they can contain a large amount of information that describes the content of web pages in great detail.
They have become a standard and most places you share links from your website will look for the Open Graph tags hidden in the page’s HTML for the information they need.
Open Graph is used by Facebook and other social sharing services, search engines and more. They are not optional, they are essential.
Do your pages use Open Graph tags?
They may already use them and sometimes they are automatic, but don’t count on it. You should check and see. How can you tell if Open Graph tags are being used on a web page?
Right click an empty space on a page and select the option on the menu that appears to view the source. Open Graph tags can be found near the start, although they may be a little way down. Here is an example and they are from line 165 onwards.
As you can see, each one is a type of meta tag. The pattern of this code is obvious and all are meta properties. All have categories like og:type, og:title, og:url, og:description and so on. The og: stands for Open Graph of course.
Can you find these when you view the HTML of a post (not the home page) on your website? You will have sharing and search problems if you can’t.
Open Graph tags with Jetpack
I have included the comment at the start of the listing above and as it says, these tags are created by Jetpack, which is a very popular plugin for WordPress.
All the information above is fully automatic and I did not have to enter any of it. Jetpack automatically created the tags. If you have enabled either the Sharing or Publicize options in Jetpack then whenever you publish a post, Jetpack scans it and if no Open Graph tags are found, they are added.
(If you end up with two sets of Open Graph tags, see the bottom of this post for disabling Jetpack’s tags. It should look for other plugins that add Open Graph tags and if one is installed, Jetpack should not add any of its own. If you turn off the other plugin, you might then need to force Jetpack to insert tags using this plugin.)
Jetpack is automatic, but other plugins that add Open Graph tags may not be. Be sure to check the options in the sidebar or at the foot of the post editor page for options to define Open Graph tags.
Open Graph tags with Yoast
In an earlier article I looked at meta tags and if you have created them for a post using the Yoast SEO plugin, then there is nothing else to do. Yoast will use the information in the meta tags and in the post itself, such as the featured image, to create the Open Graph tags that Facebook needs.
However, it can be beneficial to enter the information manually. This is because it enables you to add different information, either for your Facebook audience or for search engines to better understand the page content.
Scroll down to the bottom of a post to the Yoast plugin and click the share button on the left. Select the Facebook tab and fill in the form.
As the text under each box says, this is to override the post title, meta description or image entered elsewhere in Yoast. You can leave all these blank and still get a set of Open Graph tags.
Use Facebook Debugger
Any social media service that allows you to share links might use open Graph tags, but Facebook is the biggest and most important. It uses them to create the visually attractive shares as shown at the top of this page. It looks great and it is eye-catching.
What if your Facebook shares don’t look like this?
Use Facebook Debugger to find out what is wrong.
Go to developers.facebook.com/tools/debug and enter the URL of page on your website that you have previously shared. The results list any problems that were found.
This shows what information Facebook stored about this web page the last time it looked at it.
Click the link to show all warnings. The grey on grey is not easy to read, but it says there are 6 warnings. Clicking the number expands this section and lists all the problems. Read them carefully.
Fix it and scrape it again
It is important to understand how Facebook works. When you share a URL, Facebook fetches the web page, analyses the content and stores the information it finds in its own database.
If the URL is shared again, it does not fetch the web page again, it looks up the URL in its database and uses whatever information is there.
The reason, presumably, is because some viral links are shared tens of thousands of times. Facebook does not want to visit a website tens of thousands of times to fetch the page and analyse it, so it visits it once and stores the information.
Facebook debugger shows what is stored in its database.
If you change a page you have shared, such as by adding missing Open Graph tags, it won’t fix your shared link. You must click the Scrape Again button. This forces Facebook to fetch the page on your site, analyse it, and update the information in its database.
- If shared links don’t look right, enter the URL into Facebook debugger
- Fix the warnings that are listed – show them all, not just the first
- Use the Debugger to scrape the page again to update the information Facebook has
