Using Meta Tags

Available Files

The following files are available for download:

Download Exercise Files

Learn more about using exercise files.

When working with data or information, metadata is additional information that helps describe the primary content of an asset. In the context of Web pages, the meta information embedded in the head element describes the page and its contents. As we will see, this could be considered cataloging data, like what appears behind the title page of books. This information helps define and describe the document which allows software to more easily categorize, read, and render the content.

Before we can begin, we need to open index.html in a text editor.

Step1. Launch the text editor of your choice.

Step2. To begin opening a file, type:

Control key+O

You see the Open dialog box.

We need to specify the name and location of the file to open.

Setting the Location for Opening Your File

When the dialog box opens, it lists a default location from where the file will be opened. All of our exercise files are contained in the epclass folder, located on the desktop. We'll want to change our location to this folder.

We will start at the desktop, since our exercise file folder, epclass, is located there.

Step1. To move to the desktop,

Click

The current location is now set to the desktop. All of our exercise files are contained in the epclass folder, located on the desktop.

Step2. To open the epclass folder,

Double-Click the epclass folder icon

The epclass folder contents are now visible.

Note for Macintosh Users - On a Macintosh, the "From:" field is above the list of visible folders and files. To move to the desktop, press the key combination Command key+D. From there, you can move into the epclass folder.

We will need to open the GOAR FAQ subfolder of the epclass folder that contains all of the necessary documents.

Step3. To open the correct folder,

Double-Click the GOAR FAQ folder

Step4. To open index.html,

Double-Click index.html

You see the source code of index.html in your editor.

Setting the Character Set

The first bit of metadata we will look at today is the character set. A character set is the group of symbols available to a web browser to display content. As far as the web goes, this refers to the characters that are used to display text. In HTML, the character set meta element looks like this:


<meta charset="set-name"/>

This will be added right below our <title> element inside our <head> element. Today, we will be using the UTF-8 character set. This set contains all the characters that humans use to write in one set. By defining it explicitly, we are telling the browser what characters to expect in the document and how to render them on the screen, preventing any misrendering.

Step1. To add the character set meta element to our page, type:


<!doctype html>
<html>
    <head>
        <title>Get Out &amp; Ride!</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="css/normalize.css"/>
    </head>
<body>

There are many types of character sets available for every language. To read more about character sets, visit the Wikipedia page about character encoding.

You can also visit the Wikipedia page about character sets to see the wide array of available character sets in use today.

Using Keywords, Description, & Author Meta Tags

We can also use metadata to describe more complex information. For example, we can define keywords, a page description, and the page's author as meta information. To do this, we must understand two other metadata tag attributes, name and content.

The name attribute is used to identify what kind of data the metadata element includes. Acceptable values are included in the following table:

Value	Use
name="description"	Provides a brief phrase describing the content or intent of the web page. Some search engines may return this short phrase along with the page title to describe the page.
name="keywords"	Provides short subject identifiers—similar to the keywords the user of a search engine might use—describing the page. The content can include multiple keywords separated by commas.
name="author"	Provides the name of the person responsible for the creation of the page.

The content attribute is used to hold the data related to the name attribute's value. For example, the metadata element named author can hold an author's name:


<meta name="author" content="Tyler Ruiz"/>

The description metadata element is used to display extra information in search engine results:

Search Results from Google with the description of the page highlighted.

The keywords metadata element is used to classify a particular page.

We will be creating three more metadata elements today: description, keywords, and author. Each will be its own meta element.

Step1. To add the author metadata element, type:


<head>
    <title>Get Out &amp; Ride!</title>
        <meta charset="UTF-8"/>
        <meta name="author" content="Your Name Here"/>
        <link rel="stylesheet" href="css/normalize.css"/>
</head>

Now that we've created two metadata elements, let's add description and keywords.

Step2. To create the description and keywords metadata elements, use the table below:

name	content
description	Get out & ride classic touring routes throughout the mid-western United States with our guided tours!
keywords	bicycle, tour, bike, touring, cycling, guided tours, fully-supported

NOTE: To save typing, this text is in Region 1 of the file swipe.txt. You can copy and paste these elements instead of typing them.

Our <head> element should look like the following code:


<head>
        <title>Get Out &amp; Ride!</title>
        <meta charset="UTF-8"/>
        <meta name="author" content="Your Name Here"/>
        <meta name="description" content="Get out &amp; ride classic touring routes throughout the mid-western United States with our guided tours!"/>
        <meta name="keywords" content="bicycle, tour, bike, touring, cycling, guided tours, fully-supported"/>
        <link rel="stylesheet" href="css/normalize.css"/>
</head>

Using Meta Tags to Format Social Media Links

Social media is increasing in popularity and sharing content on those sites is an important part of any group's marketing and communication strategy. There are several ways to represent metadata content to encourage the proper display of your article on social media. This Moz Blog post about social media tags will help you with the metadata requirements for Facebook and Twitter.

Now that we have our metadata in place, let's begin working on the visible content of the page.

UITS IT Training Content Library