Web Page Metadata
Metadata is the information your web pages provide to search engines, like Google, who then use it to provide accurate search results to users.
The information is wrapped in HTML elements called meta tags usually in the <head> portion of the page, and look like this:
<head>
<title>Academics and Admissions | University of Minnesota</title>
<meta name="description" content="The University of Minnesota is ranked as a “best value” with competitive tuition rates, outstanding academic programs, and a focus on student success.">
</head>
Why is it important?
Having well-implemented metatags make it easier for people to find and use your content. It also helps to make it look good when it’s reused or shared.
Best practices
Your site should have a unique title and description for each page in order to provide the basic metadata. In search results, Google uses the title of the page and the description, unless it finds text on the page that it feels is a better reflection of the content. The example above looks like this in practice:
New Drupal sites have the title and description set up out of the box, using the page title and first 155 characters of text on the page. You can customize and control your title links and description snippets if the text on the page isn’t as descriptive or concise as you want it to be for search.
Metadata for social media
By providing additional metadata, your pages can be reused as rich objects when sharing on social media:
Facebook introduced the Open Graphs protocol in 2010 for sharing rich data from Web pages. Most social sharing sites will use Open Graphs data, including Twitter which will use it when its own specific metadata isn’t available.
The example page’s data look like this, with Open Graphs protocol starting with “og:[property]”:
<meta property="og:url" content="https://twin-cities.umn.edu/academics-admissions">
<meta property="og:title" content="Academics and Admissions | University of Minnesota">
<meta property="og:description" content="The University of Minnesota is ranked as a “best value”with competitive tuition rates, outstanding academic programs, and a focus on student success.">
<meta property="og:image" content="https://twin-cities.umn.edu/sites/twin-cities.umn.edu/files/A%26A1440x50...">
How to check your pages
For individual pages, use a tool like metatags.io. It will show you what your page looks like in search results, and when shared across Facebook, Twitter, Pinterest, LinkedIn, and Slack. It’s a simple way to see everything at once.
For site-wide auditing, a tool like Google Search Console will provide warnings and guidance when your pages don’t meet Google’s best practices, including meta tags and data.
Drupal metadata configuration
Attend the upcoming Web People presentation via Zoom on Friday, March 18 at 11:30 a.m. to learn more about how to use Drupal to set up metadata configuration.