Website Metadata Explained: How to Make Your Content Shareable

By Grace Stoeckle May 16, 2016

AWeber just launched our new mobile app, Curate. Why do I mention this in an article about metadata? Because Curate relies entirely on metadata to create beautiful, readable newsletters for our customers. Metadata is the life force behind Curate.

Does your website suffer from being “un-shareable?”

It was during the course of Curate’s beta study that the importance of metadata for the typical AWeber customer—like you—came into hyper focus for me.

We gave Curate to dozens of AWeber customers, and some of them wondered why their own websites were not cooperating with the app. In almost every case, it was due to poor or non-existent metadata on their own websites.

Your digital marketing is likely the core of your business. Which means it’s a really good thing if people share content from your website or blog with their own networks. It’s also very likely that you share your own website or blog content in the hopes of attracting clicks. You do this through social media, email marketing, SEO, paid advertising, etc. These are the reasons you have a site in the first place.

So it’s important that you put your website to the test. Is it shareable? What condition is your metadata in?

Go ahead and test your content right now

Go to your most recent blog post or to a product page or information page on your website, and share that page to Facebook. You don’t even have to publish it in order to see the preview that Facebook generates. Is the image what you want, or expect? Does the title have click appeal? Overall, do you think it’s representing that content in a way that you’re proud of?

Metadata makes your website more findable and more shareable.

That’s why I wanted to provide some background and important guidelines about metadata to apply to your website. If you’re already managing your metadata, that is fantastic! If you aren’t, here’s how to get started.

How metadata makes your content shareable

Metadata lives in the code of a webpage and is not visible on your web page. It’s the most visible invisible part of your website. Specifically, it lives inside the head tag of a web page.

When you share a web page—any web page—on social media, you see a preview of that content. You’ve all seen it. The preview that is generated (which usually displays an image, a title, and sometimes a short description and a source name) is nothing more than metadata. Previews are not magic. Previews are not mysterious. Previews are based on the quality of a website’s metadata, of your website’s metadata, and this is something you have control over.

If your website content previews aren’t satisfying, it’s time to consider an overhaul of your Open Graph metadata tags.

Why Open Graph metadata tags?

Years ago Facebook created its own metadata protocol called “Open Graph.” Open Graph tags are a specific kind of metadata. But they live in the same place of your web page code, and do the same kinds of things that other metadata does. Since they were introduced, Open Graph tags have become the standard for building previews of content by most social networks and apps.

Open Graph tags are now so widely accepted that they’re built into many SEO plugins for WordPress and other platforms.

The metadata tags I recommend you have in the header of your web pages are the following Open Graph tags.

• og:image
• og:title
• og:description
• og:site_name

There are many other Open Graph tags, but the four above are the most valuable to content marketers like you and will provide all the elements necessary for a highly shareable web page.

Here’s an example.

Above you see the nicely formatted preview for a food blog post. It shows the Open Graph metadata indicated by the blog’s author for the og:image, og:title, og:site_name and og:description. Here is what metadata looks like in the course code of the web page:

<meta property="og:image" content="http://media.simpleseasonal.com/wp-content/uploads/2016/05/homemade-italian-beef-pork-meatballs.jpg" />

<meta property="og:title" content="Italian Meatballs with Beef and Pork - Simple Seasonal" />

<meta property="og:site_name" content="Simple Seasonal" />

<meta property="og:description" content="You just can&#039;t go wrong with this recipe for Italian Meatballs with Beef and Pork. They&#039;re sure to be a favorite of your entire family!" />

Some website-building services such as Squarespace automatically generate Open Graph tags, while others do not and may require plug-ins. Since we know many AWeber customers use WordPress, I’ve outlined the best way to go about getting Open Graph metadata onto your WordPress website.

Adding Open Graph tags to your WordPress website

Without a Plug-In

WordPress sites, without an SEO plug-in, do not generate metadata for your posts by default. This leaves you at a sharp disadvantage. Bots will crawl your web page for the metadata they need to build a preview of your content but will come up empty, except for the page title.

So what are your options? Very advanced webmasters will know how to access the site’s raw code and add metadata tags to the head tag.

Since accessing the raw page code is unusual for most WordPress accounts, you’ll be better off getting a plug-in.

With a Plug-In

One of the most popular WordPress plug-ins is called Yoast SEO for WordPress, but there are many others. Yes, it’s for SEO purposes, but this plug-in provides a very nice interface for adding in the important Open Graph metadata tags.

By completing the Facebook fields under the “Social” tab of the Yoast plug-in, you’ll be populating three of the four important tags: og:image, og:title and og:description.

What makes good Open Graph metadata?

Essentially you want your tags to generate a preview of your content that will spark people’s interest and align with your brand.

This example shows an Open Graph image, title and description. The site_name tag is also populated (“MEDIUM.COM”).

Image: og:image

Images are critically important in today’s visually crowded marketing landscape. The image that you assign as your Open Graph image will probably provide the most power within the preview. Make it a strong image that is relevant to the content, and intrigues viewers. Also be sure to pay attention to size, quality and orientation so that your image is optimized for sharing.

Title: og:title

Keep your title to around 100 characters or fewer, or at least put the most important words inside the first 100 characters. Make it have “click appeal” by being intriguing and descriptive. This is the most prominent text attached to your content preview, so make it effective. Sometimes it can match the first headline on the page, but often you should write something separate for the Open Graph title.

Description: og:description

The description should concisely sum up the content and contribute to click appeal. Don’t worry about SEO or keywords, just worry about writing an intriguing description that you think will draw attention on Facebook and other locations. Try to stay within 200 characters, though there are no actual limits (but it will truncate).

Site Name: og:site_name

Providing the site name allows you to have control over how your site is referred to when it’s shared. So for instance, AWeber’s blog address is https://blog.aweber.com/ but we may want to be referred to as “AWeber Blog” which is a little more human friendly. In that case, setting the og:site_name tag to “AWeber Blog” will ensure it appears as we desire on places like Facebook and LinkedIn.

Now you’re ready!

I hope your website is already optimized for sharing, but if it’s not, rest assured it is well within your powers to turn it around, and with relative ease.

Once your website is optimized and ready to share, why not try it out in our new mobile app, Curate? 🙂