What are Open Graph and Twitter Card Meta Tags?

For the past year I’ve been working on NGFB, a WordPress plugin that adds Open Graph, Search Engine Optimization (SEO), and Twitter Card meta tags to webpage headers. It’s one of those things that all websites need, but few website owners actually know what meta tags are or look like. There are a lot of plugins for WordPress that add meta tags to webpages, but not all are created equal. ;-) This article will explain what meta tags are, why they are useful, and what makes one set more complete than another. But first, we need to get everyone on the same page…

The Header

An HTML document is made up of two important parts: the header, and the body. A simple HTML document might look like this:

An Example HTML Document

XHTML

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<head>

<title>A Simple HTML Document</title>

</head>

<body>

<p>These aren't the droids you're looking for...</p>

</body>

</html>

As a broad description, we can say the section between the <head> and </head> HTML tag describes the document, and the section between the <body> and </body> HTML tag is what’s shown in your web browser. For example, when your web browser loads an HTML document, the title “A Simple HTML Document” will be used in the navigation tab.

Search engines also use the <title> HTML tag value when displaying search results. And when you share a URL on a social website like Facebook or Google+, they make a connection back to that URL to get the <title> and other information. That “other information” is the tricky part… For example, which image should Facebook display? What description should Google Search show in its search results? As webpage design has gotten more complicated, so have the challenges in parsing the content for the “useful” information.

Meta Tags

The answer to this problem is fairly easy: create a structure within the <head> section that accurately describes the document. If Facebook needs an image, it looks within the <head> section for an HTML meta tag like this one:

If it needs to describe the page, it looks for an HTML meta tag like this one:

An Example og:description Meta Tag

XHTML

1

2

3

<meta property="og:description"content="Tetraodontidae is a family of primarily marine and estuarine fish of the order Tetraodontiformes." />

Open Graph

These meta tags, and many more, are described in the Open Graph standard. Facebook wrote the Open Graph standard to help communicate information accurately between websites, applications, etc. Most social websites, like Google+, LinkedIn, and many more, also read the Open Graph meta tags. Facebook also created a Debugger to test and validate Open Graph meta tags. This is a useful tool to compare, for example, the differences between the various Open Graph plugins for WordPress. If we use the Puffers webpage from Underwater Focus as an example, we can submit it to the Debugger and see how Facebook will interpret that webpage content. If someone posts that Puffers URL to Facebook, the post will show the correct image(s), title, description, etc.

Some readers may have noticed that this search result also includes a link and image to the webpage author’s Google+ profile. This is accomplished using a few different methods, the most popular being the <link> HTML tag within the header:

Twitter Cards

Recently, Twitter announced a new standard called Twitter Cards. Their aim is to present shared webpages differently based on the type of “Card” that webpage presents. So some webpages could be Galleries, or Products, etc., and each one would be handled and presented differently on Twitter.

<meta name="description"content="Tetraodontidae is a family of primarily marine and estuarine fish of the order Tetraodontiformes. The family includes many familiar species, which are variously called pufferfish, puffers, balloonfish, blowfish, bubblefish, globefish, swellfish, toadfish, toadies, honey..." />

<meta name="twitter:site"content="@underwaterfocus" />

<meta name="twitter:title"content="Puffers" />

<meta name="twitter:description"content="Tetraodontidae is a family of primarily marine and estuarine fish of the order Tetraodontiformes. The family includes many familiar species, which are variously called pufferfish, puffers..." />

<meta property="og:description"content="Tetraodontidae is a family of primarily marine and estuarine fish of the order Tetraodontiformes. The family includes many familiar species, which are variously called pufferfish, puffers, balloonfish, blowfish, bubblefish, globefish, swellfish, toadfish, toadies, honey..." />

All these different header tags are similar, and yet slightly different. For example, Facebook likes to have multiple images presented sequentially, including their width and height, while Twitter prefers a unique meta tag name for each. Facebook prefers larger images to (potentially) use as banners in the future, while Twitter has various size restrictions based on the type of Twitter Card. The maximum title and description lengths are also different for Google, Facebook, and Twitter. The Open Graph and <link> author values are also used a little bit differently, and shouldn’t usually have the same values.

The challenge for a plugin author is to gather this information from the webpage content as well. For example, to present a series of images, the plugin must get them from somewhere. If they come from the content, then some images, like thumbnails, might be too small. Images, videos, content text, etc., may also come from a variety of sources. I wrote the NGFB Open Graph+ plugin in part because I couldn’t find an Open Graph plugin that could use images from the NextGEN Gallery plugin. Little did I know that I would spent the next year writing code for what would become one of the more popular Open Graph plugins for WordPress. ;-)