Metadata Guidelines

From Education & Outreach

The Metadata for every page consists of several attributes – some that are common to all pages and some that are different for different pages.

Common attributes

<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/">
<meta name="DCTERMS.language" content="eng" />
<meta name="DCTERMS.source" property="og:site_name" content="W3C Web Accessibility Initiative (WAI)" />
<meta name="DCTERMS.contributor" content=" W3C Web Accessibility Initiative (WAI)" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@w3c_wai">
<meta property="og:type" content="article" />

These attributes are common to all pages and don’t need any additional information. It is already included in most resources.

Page specific attributes

title

<meta name="title" content="Easy Checks - A First Review of Web Accessibility | Web Accessibility Initiative (WAI) | W3C">

This is the same as the HTML <title> and is provided by the group consensus, suffixed with " | Web Accessibility Initiative (WAI) | W3C". There is no need to provide that. Some guidelines for titles can be found here: Moz.com – Title Tag (!sic)

It is already included in most resources.

Description

<meta name="description" content="This page helps you assess the accessibility of a web page. With these simple steps, you can get an idea if accessibility is addressed in even the most basic way.">

The description, between 150 and 160 characters. Some guidelines for titles can be found here: Moz.com – Meta Description

Tip: For WAI resource pages, look at the annotated navigation page for starter text for the description.

Canonical URL

<link rel="canonical" href="https://www.w3.org/WAI/eval/preliminary">
<meta name="twitter:url" property="og:url" content="https://www.w3.org/WAI/eval/preliminary">

This is the canonical URL of the document. This is supplied by WAI staff. It is especially important for documents with different URLs (almost any resource on w3.org has multiple valid, non-redirecting URLs).

Twitter Summary Card Tags

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@w3c_wai" />
<meta name="twitter:title" content="A concise title for the related content" />
<meta name="twitter:description" content="A concise summary of the content as appropriate for presentation within a Tweet. Don't re-use the title as the description." />
<meta name="twitter:image" content="https://image-that-represents-page.jpg" />

Find a details about the Twitter Summary Card specification at https://dev.twitter.com/cards/types/summary

You can validate the Twitter Summary Card meta data using the Twitter Card Validator at https://cards-dev.twitter.com/validator

Facebook Sharing Tags

<meta property="go:url" content="https://page-url" />
<meta property="go:type" content="article" />
<meta property="og:title" content="The title of your article without any branding such as your site name" />
<meta property="go:description" content="A brief description of the content, usually between 2 and 4 sentences. This will displayed below the title of the post on Facebook." />
<meta property="og:image" content="https://image-that-represents-page.jpg" />

Find a details about the Facebook Sharing Tags specification at https://developers.facebook.com/docs/sharing/webmasters

You can validate the Facebook Sharing meta data using the Facebook Sharing Debugger at https://developers.facebook.com/tools/debug

Tags

<meta name="DCTERMS.subject" content="Page Title" />
<meta name="DCTERMS.subject" content="Alt Attributes" />
<meta name="DCTERMS.subject" content="Headings" />
<meta name="DCTERMS.subject" content="Contrast ratio" />
<meta name="DCTERMS.subject" content="Resize text" />
<meta name="DCTERMS.subject" content="Keyboard Access" />
<meta name="DCTERMS.subject" content="Visual Focus" />
<meta name="DCTERMS.subject" content="Web Forms" />
<meta name="DCTERMS.subject" content="Moving web content" />
<meta name="DCTERMS.subject" content="Flashing Web Content" />
<meta name="DCTERMS.subject" content="Blinking Web Content" />
<meta name="DCTERMS.subject" content="Multimedia alternatives" />
<meta name="DCTERMS.subject" content="Audio alternatives" />
<meta name="DCTERMS.subject" content="HTML structure" />
<meta name="DCTERMS.subject" content="Web Accessibility" />
<meta name="DCTERMS.subject" content="W3C WAI" />
<meta name="DCTERMS.subject" content="Web Accessibility Initiative" />

Those tags can be used to index our own content. My (Eric’s) understanding is that search engines are not using it, but it might be good to have them for our own indexing.

How to provide Metadata

For resources on Github, open an issue with the following template (without the <> characters). Some Github repositories might have multiple pages. If there is no Github Repository, send the information to Shawn and Eric and cc wai-eo-editors@w3.org.

<page or URL>
- Description: <text of the description>
- Tags: <tag1>, <tag2>, <tag3>, <tag4>, <tag5>, <tag6>, <tag7>, <tag8>, <tag…>

Resource manager should then put this data into a .eometa file. That way changes can be submitted there using, for example, pull requests. And we know where to find it when we transfer resources to the w3.org server.