Front-end metadata is more important than ever. Starting with the humble page title and meta description tags, metadata has grown to include a plethora of protocols including Schema.org, Twitter Card, Open Graph, and more.
The benefits of getting the right metadata into your code are many and they go beyond SEO to social media and brand engagement. Let's take a look at the major metadata elements, their benefits, how to implement them, and some tools to make it easier.
Titles and Descriptions
The humble HTML title tag and meta description meta tag are still key for SEO. Having keyword and user-targeted copy here is still an SEO must.
In fact, titles and descriptions have only become more important as Facebook and other platforms will often pull these values if there is not an explicit instruction to do otherwise when a URL is shared in social media.
Formed from an alliance of the biggest search providers to create a common structured data protocol, Schema.org is a comprehensive set of values that covers pretty much everything in the human experience.
Schema.org tags are used by Google in several ways, most noticeably to show rich snippets in events like movies and concerts, names and addresses, recipes, and to specify content types like embedded videos or articles. Schema.org also plays a role in local search results.
Due to the scope and complexity of Schema.org, it pays to check the quality of your code with the Google Structured Data Testing Tool. Several free tools also will create Schema.org code for your specific needs, including the Microdata Generator or the WordPress Schema Creator by Raven plugin.
Started by Facebook and now broadly adopted, Open Graph is a protocol used both internally by Facebook as well as on external sites to supply semantic information about web pages, videos, and other types of content that are likely to be shared. Google recently started paying attention to Open Graph tags pointing to video content to show the video play icon alongside video results.
Open Graph tags can be used to specify how a piece of content will look when shared on Facebook, and can be a signal to search engines as well. Specifying an Open Graph image for a post or web page is especially powerful as the image has a large impact on the engagement the post will have in user newsfeeds.
You may have noticed really pretty tweets appearing in your Twitter stream. Most likely, these are folks who have successfully implemented the relatively new Twitter Card metadata protocol. Similar in many ways to Open Graph, Twitter Card is a simple protocol that allows you enrich how your content appears when tweeted.
There are several card types you can specify (e.g., a summary, a summary with an image, a video, and a slideshow), along with the URL and copy you would like to appear when the URL is tweeted.
Implementing Twitter Card is pretty straightforward. Put the tags in your HTML (more on that later), test them with the Validator Tool and then apply to Twitter for acceptance into the program via the Twitter Developers site.
Just putting the tags in isn't enough. You need to apply and be accepted, which typically takes a few weeks.
Google has a whole slew of custom meta tags. We will focus on the two that impact SEO most. Specifically, the authorship and publisher meta tags.
Adding the authorship meta tag, in conjunction with adding the website to the "Contributor to" section of your Google+ profile, helps you get the much-desired rich snippet and puts your face in the search results next to content you've created:
The publisher meta tag is sort of like the author meta tag for individuals. It won't get you a rich snippet, but it makes it absolutely clear which Google+ page is connected to the web site. It may also get your Google+ brand assets to appear on the right rail Knowledge Graph area of Google for branded queries.
Implementing Metadata Made Easy
While metadata and the semantic web is exploding, it's also getting easier and easier to actually add the tags.
If you use WordPress as your CMS, the good news is a variety of plug-ins allow you to easily add multiple metadata protocols to your content. Depending on your WordPress theme, things may work better or worse for your site, but most plug-ins will at least cover the basics of getting authorship and Schema.org tags onto web pages, if not other types of content. Here are a few to consider:
- SEO Ultimate: This super-plugin allows you to create and edit Schema.org, Twitter Card, Open Graph, and standard HTML metadata values.
- Yoast WordPress SEO: This is an essential plug-in for WordPress SEO. It allows for the editing of basic HTML tags as well as Open Graph, and site-wide Twitter Card metadata.
Not on WordPress? Despair not. The major CMS platforms have a variety of somewhat-less user-friendly options.
- Joomla has a section on their site for SEO and metadata extensions. There doesn't seem to be a Joomla equivalent of the comprehensive SEO plugins for WordPress, but you should be able to put a few together into a workable solution that doesn't require custom coding.
- Drupal, staying true to form, requires a bit more work but you should be able to find something in their Module Library. Let me know in the comments if there is a Drupal metadata module that works for you.
Metadata for the Long Haul
As more brands and bloggers see the benefit of adding metadata, its adoption and expansion seems fated to grow. By providing structure to the chaos of the web, metadata helps people find what they want and gives your content the edge in search engines and social sharing.
More than a fling, metadata and you should be a relationship with legs. Settle down with metadata for the long haul and make it a part of your digital life.