The correct approach to markup "keywords" of a blog post by using HTML5 and Microdata?

Question

The keywords property from Schema.org, as it being in plural form suggests, seems to imply its value should be a line of comma-separated text. Like the following example:

<p itemprop="keywords">lorem, ipsum, dolor, sit, amet</p>

That reminds me of the <meta name="keywords" content="lorem, ipsum, dolor, sit, amet"> tag we used to put within <head></head> for SEO reason.

However, from semantics' perspective, I think the above example is incorrect because keywords should be a list of words. Thus it should be markuped by using the <ul> element.

Is there a common consensus on how the keywords of a blog post should be markuped by using HTML5 and Microdata?

score 12 · Accepted Answer · edited May 23 '17 at 12:02

Update: The definition of Schema.org’s keywords property changed. Now it makes clear that it expects multiple tags, and that they should typically be comma-separated.

tl;dr: If you want to use a ul element for your tags, using Schema.org’s keywords property could look like this in Microdata:

<article itemscope itemtype="http://schema.org/BlogPosting">

  <footer>
    <ul itemprop="keywords">
      <li><a href="/tags/foo" rel="tag">foo</a>,</li>
      <li><a href="/tags/bar" rel="tag">bar</a></li>
    </ul>
  </footer>

</article>

If using it like that, you have to make sure that the ul contains no other non-tag text.

HTML

The meta element with the name value keywords offers a way to specify keywords that apply to the whole page. These keywords consist of text only, so you can’t use URIs.

So for the typical blog tags, you’d go the following way (possibly in addition to meta-keywords).

Link type

HTML5 defines the link type tag:

The tag keyword indicates that the tag that the referenced document represents applies to the current document.

Note that this link type can only be used on single post pages as the tag always applies to the whole page.

(Attention: tag is a Microformat, too, but it has a different definition: You may only use specially crafted URLs for the Microformat tag.)

If your tags are more like categories (controlled vocabulary instead of free tagging), you could use the link type category (possibly in combination with tag).

Markup for the tags

You might use a ul or a dl:

<ul>
  <li><a href="/tags/foo" rel="tag">foo</a></li>
  <li><a href="/tags/bar" rel="tag">bar</a></li>
</ul>

<dl>
  <dt>Tags</dt>
  <dd><a href="/tags/foo" rel="tag">foo</a></dd>
  <dd><a href="/tags/bar" rel="tag">bar</a></dd>
</dl>

I’d go with the dl when you also have other metadata to list, e.g. the author, publication date, etc.

A div with comma-separated a elements would work also, of course:

<div>Tags: <a href="/tags/foo" rel="tag">foo</a>, <a href="/tags/bar" rel="tag">bar</a></div>

Container for the list

The list should be part of a footer element (inside the article if you use one for your blog post):

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Vocabularies

Schema.org

CreativeWork defines the property keywords (BlogPosting inherits it):

Keywords or tags used to describe this content. Multiple entries in a keywords list are typically delimited by commas.

It expects plain text, so there’s no way to provide the tag URLs in Schema.org.

As keywords expects a comma-separated list of tags, dl can’t be used (unless the dl contains nothing else than tags).

With an ul, it could look like this in Microdata:

<ul itemprop="keywords">
  <li><a href="/tags/foo" rel="tag">foo</a>,</li>
  <li><a href="/tags/bar" rel="tag">bar</a></li>
</ul>

If using a div, you’d need to add another div/child so that the label "Tags:" gets not interpreted as tag itself:

<div>Tags: <span itemprop="keywords"><a href="/tags/foo" rel="tag">foo</a>, <a href="/tags/bar" rel="tag">bar</a></span></div>

Common Tag

Common Tag is a (RDF) vocabulary for tagging. In contrast to Schema.org’s keywords property it uses URIs for tags, not text only.

Example from their Quick Start Guide in RDFa:

<div xmlns:ctag="http://commontag.org/ns#" rel="ctag:tagged">
   NASA's <a typeof="ctag:Tag" 
             rel="ctag:means"
             href="http://rdf.freebase.com/ns/en.phoenix_mars_mission"
             property="ctag:label">Phoenix Mars Lander</a> has deployed its robotic arm. 
</div>

Explanation: The content is tagged (ctag:tagged) with a tag (ctag:Tag). This tag is defined (ctag:means) by the URI "http://rdf.freebase.com/ns/en.phoenix_mars_mission" and it’s called (ctag:label) "Phoenix Mars Lander"

Instead of ctag:Tag you could use the class ctag:AuthorTag (which means that it’s tagged by the content author).

MOAT

There is also the MOAT vocabulary, which stands for "Meaning Of A Tag". Unfortunately, their website seems to be gone (?).

An ontology that let users define relationships between Tag objects and URIs of Semantic Web resources

Thanks for the long article, while honestly it doesn't really provide much help. What I want to know is a semantically correct way to markup keywords, by using HTML5 and Microdata. I know the Microformats `rel="tag"` thing, yet both of it and RDF are not the main point at here. As mentioned in the question, the `keywords` property of Microdata is in plural form, so wouldn't it be weird to use it on a single word? — Ian Y., Apr 27 '13 at 03:47
And if a Microdata property is used on an `` or an `` tag, then its values is sourced by the `href` or the `src` attribute. So your second example (the one using ``) is the correct way to source text values. — Ian Y., Apr 27 '13 at 03:48
@IanY.: I was under the impression that your last sentence ("Is there a common consensus on how the keywords of a blog post should be markuped by using HTML5 and Microdata?") refers to "keywords" in general. You are not restricted to use the schema.org vocabulary in Microdata, so I mentionend Common Tag and MOAT as you could use them instead of or in combination with the schema.org vocabulary. — unor, Apr 27 '13 at 08:16
@IanY: I updated the schema.org section regarding multiple `keywords` properties. I think you *have* to use multiple ones. — unor, Apr 27 '13 at 08:43
Thanks. But isn't using the property "keywords" on a single word weird? — Ian Y., Apr 27 '13 at 09:38
@IanY.: Well, yes, but the property name doesn’t have any "meaning", so you should simply ignore that. There is a [proposal](http://www.w3.org/wiki/WebSchemas/Singularity) to change some schema.org properties from plural to singular. However, for `keywords` it says that it’s "not grammatically plural". — unor, Apr 27 '13 at 09:52
Thank you! I guess the link you provided has answered my question. So the property "keywords" in Microdata is not grammatically plural. Thus we could safely use `
` or `
` to markup keywords of a blog post. — Ian Y., Apr 27 '13 at 10:24
You may add that info to your answer so I could choose it as the best answer. — Ian Y., Apr 27 '13 at 10:25
@IanY.: I did. But note, even if it *would* be grammatically plural, that wouldn’t change a thing. It’s just a name (a confusing one in that case). **Only** the definition matters. It’s similar to HTML’s `article`, which isn’t for articles (in the common sense) only. — unor, Apr 27 '13 at 10:59

score 1 · Answer 2 · answered Mar 17 '22 at 17:59

As of schema.org 14.0 the description has been updated to clarify that schema:keywords can be repeated or contain comma-separated keywords.

Multiple textual entries in a keywords list are typically delimited by commas, or by repeating the property.

Therefore, you can use it in for example a list without adding commas to each element:

<article itemscope itemtype="http://schema.org/BlogPosting">
    <ul>
      <li><a href="/tags/foo" itemprop="keywords">foo</a></li>
      <li><a href="/tags/bar" itemprop="keywords">bar</a></li>
    </ul>
</article>