HTML Meta Tags
Depending on your content management software and the search engine optimization plugins you installed, your pages might already have all the metadata they need. The following explanations will help you find out. If it isn’t the case, there are plugins which will see that it gets included. I will tell you which you should try at the end of the article. Don’t worry, you won’t need to edit your templates or write code, unless you want to. However, a little bit of theory on markup will make it easier for you to know with certainty if the plugins work and include the right stuff into your site. It isn’t too complicated. I promise. Ready?
HTML has tags which permit the author of a web document to embed name-value pairs in the <head> of your document (at the beginning). The names are part of standardized vocabularies. HTML already includes a basic vocabulary but other vocabularies such as Dublin Core and Open Graph build upon the same mechanisms to convey richer information. For the moment, let us stay with plain HTML. Here are some meta tags as an example.
<meta name="description" content="This is a post about meta-tags and their 1001 uses" />
<meta name="keywords" content="metatags, meta-tags, paper.li" />
Evren Kiefer" />
<meta name="generator" content="WordPress 3.4.1" />
You may see similar code on any live website. Click right on the page and select “View Source” in the contextual menu. The meta tags should be near the top in the <head> section.
Each meta tag is like a box. The content attribute defines the content of the box: the information that you want to convey. The name attribute defines the label you put on the box to identify the information. In plain language, <meta name="author" content="Evren Kiefer" /> is equivalent to “Evren Kiefer is the author of this page”.
Better Sharing on Facebook with OpenGraph
When an enthusiastic visitor shares a piece of your content on Facebook, most often Facebook displays the title, a snippet and an image from your post. It pulls the title from the <title> tag, the snippet is drawn from the content and the image is the first image appearing in your post. Now, depending on your publishing software and on the theme you use, the <title> tag will not be most useful. Depending on your writing style, the first few words of your post which appear in the snippet won’t be enough to inform people. And if, for once, you don’t include a nice image, you’re missing out on an opportunity to draw attention to your content. If they can’t figure out what the content is about, the friends of the kind person sharing your content won’t click the link. The well-meaning sharers won’t get social capital and you won’t get new visitors.
Fortunately, you can tell Facebook everything it wants to know about your article in markup. The presentation of your article on Facebook will be more appealing. Unfortunately, the big players each have their own vocabularies of meta data. The special kind of metadata that Facebook created for itself is called the Open Graph Protocol. It is a very powerful scheme of metadata.
It is based upon the tag mechanisms detailed above. However, it uses properties instead of names. Moreover, the properties’ names are all prefixed with “og” to attach them to a different schema and prevent confusion. Like so:
<meta property="og:title" content="The title of this post is still a work in progress" />
<meta property="og:type" content="article" />
Get Your Work Cited and Catalogued Using Dublin Core
As long as you don’t manually edit your HTML pages and your bandwidth bill isn’t a problem, you can add as many meta data formats as your CMS will support because they don’t take much space, add a lot of context and show your audience that you care about your content.
Along with Facebook’s and the standard HTML one, you may want to add meta-data using the Dublin Core vocabulary. It is a set of fifteen names that all begin with the prefix “dc”. Like so.
<meta name="DC.title" content="Title of the post" />
It is well used in academic and scholarly circles. Numerous tools understand and use it to perform useful services for your audience and for you. For example, research tools such as Zotero use it to create databases of citations and references. Then, these tools output well-formatted bibliographies for research papers and reports. During my college years, when I found out Dublin Core data was present on a website, it was always a true delight. Moreover, the website was more likely to feature in my research papers.
Using Dublin Core in your blog posts will make it easier to cite your work in white papers and other industry-relevant publications. Wouldn’t it be great to be able to feature your work in your own or other people’s research papers about your industry?
How to Get Basic HTML, OpenGraph and Dublin Core Tags on Your Site
Depending on your content management system, you might already have one or more of them in your pages. See what you have and what is lacking. Many content management software have plugins that will add these metadata formats for you. If you can’t find any or if you find they do a poor job of it, you might have to add them manually to your templates or have someone do that for you.
In WordPress, a lot of search engine optimization plugins and specialized metadata plugins add meta tags to your site. If you have several of these installed, you have to make sure that each kind of meta-data gets added once and only once. For example, WordPress SEO by Yoast adds the OpenGraph and basic HTML meta tags. To have the Dublin Core meta tags too, you would have to install another plugin.
The “Add Meta Tags” plugin can add all three kinds of metadata. You can activate each one on its own through the configuration panel and use it alongside other plugins.
It doesn’t raise compatibility issues with WordPress SEO on my installation, though your mileage may vary. It doesn’t add the formal declaration for the Dublin Core schema which would make it completely standards-compliant. I haven’t found any plugin which does add this declaration properly but that doesn’t seem to matter with most tools.
Once you have these pieces of code in the <head> of your HTML documents, you will have taken steps towards more flexible content. Even if you don’t notice great changes, you will find it is a good investment.
I wrote “Make Your Content More Nimble With Metadata” on Paper.li’s blog, it was originally published on September 13, 2012. Reproduced here with permission.