Metadata, Open Graph and government websites
Complete metadata can have a significant impact on how citizens experience government digital services.
I’ve engaged with a significant number of federal, state and local government websites in various ways and am still surprised that many fail to meet basic web metadata best practices.
Some of these shortcomings are made by government vendors responsible for managing “no-code” web platforms, but I’ve also found that many digital government leaders don’t thoroughly understand the concept, which causes them to be overlooked.
In one case, USAJOBS postings weren’t showing associated images and, when shared on social media sites, were just uninteresting lines of text. In another case, because its meta robots indexing tag wasn’t properly configured, an internet search for a large U.S. city returned no results for the official government website.
In both cases, one simple line of code on a web page made a huge impact on how the public experienced or accessed these government digital services.
Website metadata and Open Graph
Metadata is the information about a web page that is not visible on the page but is embedded in the <header>
tag of the HTML code.
Metadata includes, but not limited to:
Title tag (
<title>
): Defines a page title.Meta description (
description
): Describes the page content.Meta keywords (
keywords
): A list of keywords related to the page content.Meta robots (
robots
): Instructs search engines to crawl the page content.Viewport meta tag (
viewport
): Tells how to display the page on different devices.Canonical tag (
canonical
): Unique URL of the page to avoid duplicates in search results.Open Graph Protocol: Metadata for sharing to social networks.
Twitter card tags (
twitter:card
): Image specific to Twitter posts.Language meta tag (
og:locale
): Sets language of the page content.
The Open Graph protocol is a standard used by social media companies to display page metadata when users share links. While some social media companies use proprietary tags (such as Twitter), most adhere to Open Graph to make it easier for web developers and content managers to universally serve up this information.
Digital.gov offers a simple metadata resource with code examples and purpose for each tag. Mozilla has more technical and comprehensive documentation for web page header elements.