Metadata and local government websites

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.

Importance of metadata

Complete metadata can have a significant impact on how citizens experience government digital services. It can be the difference between a user quickly assessing search or social sharing information and acting on it or just simply overlooking it.

Metadata plays an important role in the web experience, including how page information displays in:

• Search engine results
• Social media posts
• Accessibility-oriented readers
• Browser tabs/bookmarks

Metadata tags

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.

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): Tags specific to Twitter (X) posts.
• Language meta tag (og:locale): Sets language of the page content.

How ProudCity supports metadata

ProudCity automates metadata for our local government partners, making it easier and, in most cases, seamless.

Page metadata is managed in the ProudCity CMS via:

• Page title
• Publish/modified dates
• Excerpt
• Featured image
• Keyphrases
• Meta description
• Site identity

Here’s an example of the metadata tags that are included in a ProudCity-powered website:

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
<meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
<title>Welcome - City of Santa Ana</title><meta name="description" content="Welcome to the city of Santa Ana, CA" />
<link rel="canonical" href="https://www.santa-ana.org/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Welcome - City of Santa Ana" />
<meta property="og:description" content="Welcome to the city of Santa Ana, CA" />
<meta property="og:url" content="https://www.santa-ana.org/" />
<meta property="og:site_name" content="City of Santa Ana" />
<meta property="article:modified_time" content="2024-01-05T00:29:12+00:00" />
<meta property="og:image" content="https://storage.googleapis.com/proudcity/santaanaca/uploads/2020/07/Water-Tower-150th-Logo-scaled.jpg" />
<meta property="og:image:width" content="2560" />
<meta property="og:image:height" content="1658" />

<meta property="og:image:type" content="image/jpeg" />

<meta name="twitter:card" content="summary_large_image" />

Links

• Meta description (ProudCity)
• Metadata, Open Graph and government websites (GovFresh)