---
title: Metadata
tags: Site Settings
---

# Metadata

Drupal inherently allows a variety of metadata to be added to the site on the site and page level.

## Site-wide meta tags:

| Element | Property | Description |
| ------- | -------------- | ----------- |
| title | | Title of the site and page. |
| meta | title | Title of the site and page. |
| meta | description | Description of the site and page. |
| meta | og:title | Title of the site and page. |
| meta | og:description | Description of the site and page. |
| meta | og:type | The type of the thing being shared, for example "website." |
| meta | og:url | The current URL (or dedicated URL of the item being shared). |
| meta | og:image | Image that appears when the shared URL is seen on social feeds. |
| meta | twitter:description | Description of the site and page. |
| meta | twitter:card | Style of the "card" that appears in social feeds for the shared item. |
| meta | twitter:url | The current URL (or dedicated URL of the item being shared). |
| meta | twitter:image | Image that appears when the shared URL is seen on social feeds. |
| meta | twitter: title | Title of the site and page. |

Descriptive tags for the site and the current page are recommended.
* Tags to support social media sharing and indexing are also recommended.
* It is recommended to include appropriate tags based on https://schema.org/ best practices.
* It is recommended to create appropriate images that describes the site/page at a glance for sharing over social media.
* Site-wide tags should be defined by SEO best practices along with the needs of the site, however an outline of common tags and their purpose are listed in the table below.

## Meta tags for individual elements:

* Images
* Image names should be short but appropriately descriptive, using dashes (-) or underscores (_) in place of spaces.
* Alt text is required for all content editor uploaded images.
* Alt text should be required for all other images included on the site, unless specifically noted.
* This includes icons and background images unless their alt text would distract from, rather than support, the content.
* Videos
* Where available, text transcripts, closed captioning, and subtitles should be included.
* Forms
* Form labels and fields should have appropriately descriptive names and labels.
* If forms are created by content editors, labels, names, and metadata should be editable to ensure appropriate descriptions, but an editor should not be able to break a form or render it unusable through their choices.
* Links
* Text links should be descriptive about what they are linking to.
* Button and image links should have appropriately descriptive metadata or accompanying text to identify the link.

## Resources

### CMS Instructions

#### Configuring Meta Tags

Refer to the [flexible template CMS instructions](/k-R9oJNzSJG_F4x3P7gIug#CMS-Instructions) for details about creating content.

Meta tags are HTML elements on any given page of the website that provide information to search engines and web browsers about that web page. Meta tags configurations are used to configure how the page interacts with search engines and social networks. Drupal Pathauto module is configured for Flexible Templates so that user-friendly URL page paths can be automatically generated. To view a summary of the individual meta tags and pattern for a specific configuration, click on its name below.


Drupal supports meta tag settings for Basic tags, Advanced tags, Open Graph and Twitter cards.

**Basic Tags**

View the default Page title template. Make changes to Page title and description either via direct entry or selecting from available tokens.


- **Page Title** - character size 55. Useful to search engines. Appears in the title bar of the web page.
- **Page Description** - character size 150. Page content description.
- **Abstract** and **Keywords** options can be ignored as they are no longer supported.

Accept the default settings within Basic Tags.

**Open Graph Tags**

Open graph protocol metatags are used to control how Facebook, Pinterest, LinkedIn and other Social and other social media networking sites interpret your site’s content, when a preview snippet of your site’s page is displayed.


**Open Graph** – subset of the Open Graph settings:

- **Content Type** - the content type relative to the social media site.
- **Page URL** - use browse available tokens located above Basic Tags. Can optionally choose {node:URL} token.
- **Title** - use browse available tokens located above Basic Tags. Can optionally choose {node:Title} token.
- **Description** - shows a truncated version of the Body field. Can optionally choose {node:summary} token.
- **Image** - shows image. Can optionally choose {node.field_image}.

Social Networking sites interpret the site’s content. Leverage available tokens as best practice.