Let’s continue here in Chapter 3 by looking at the tags that are the most important for search engine optimization, also referred to as SEO. SEO is the practice of optimizing your website ranking in search engines. SEO tags are found at the document definition and configuration level. These tags are contained in the document HEAD, and were covered briefly in Chapter 2. The SEO-centric tags include your <title> tag, which defines and contains your document title and keywords, as well as the <meta> tags, which define how the HTML5 document is listed in the various search engines. These two tags, along with the <base> tag, are the most important tags to use for SEO in the HTML5 markup schema, besides the paragraph and heading tags that contain the actual text content and keywords that the search engines use to index and rank your HTML5 documents. We cover these tags later on in the book, along with the <body> tag.
In this chapter, I also go over the markup (coding) format and syntax for HTML5 document-level SEO tags, with their various parameters. We look at how to define your document title using the <title> tag and at the different types of metadata that you can advise the search engines with regarding a <meta> tag or a collection of <meta> tags, as is more commonly used. We’ll also look at the <base> tag because it also relates to SEO.
The HTML5 HEAD Tags Important for SEO
This chapter covers three high-level <head> tags used to define how you want the search engines to index your HTML document title, description, and content. We’ll start with the <title> tag, which defines your document title, and then progress downward to tags that are inside the <head> tag, including the <meta> and <base> tag.
The TITLE Tag: Defining the HTML5 Document Title
The first tag in the <head> section
of your document definition is usually the <title> tag, which contains your HTML5 document title between the opening tag and the closing tag. The <title>tag is one of the key tags that a search engine algorithm looks at to determine what the content is within your document. These SEO algorithms are referred to as bots because the code that they use simulates AI, or artificial intelligence, and so they seem to be functioning like search engine robots.
The following HTML5 markup structure is an example of a document <title> declaration for the HTML5 document and the top-level tags it is nested:
<!DOCTYPE html>
<html>
<head>
<title>Title, Using Important Search Term Keywords</title>
</head>
<body>
<!-- HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>Document titles should be descriptive and contain keywords that describe the content and help the search engine bots define how to index the website or HTML5 app. For instance, my iTVclock.com website title has keywords for iTV Sets and watch faces (smartwatch designs in Android) using the following HTML5 markup and syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>As you can see, the domain name (iTV Clock) and important keywords (iTV Sets and Watch Faces) are in the descriptive title, so that the search engine bots know iTV clock is for iTV Sets and that they relate to the (Android) watch faces API because these iTV clocks will also be for sale as Android watch faces for your smartwatch. Also, notice that I used the lang=”en” parameter in the HTML tag. This tells the HTML5 rendering engine that the page uses the English language.
Next, let’s look at the <meta> tag, which is used to define content type, author, keywords, and description.
The META Tag: Defining Document Characteristics
The <meta> tag
allows you to provide metadata, or data about your document that is not visible to the document viewer (reviewer), but which tells the search engine, browsers, and HTML5 operating systems about descriptive, SEO, robot, author, and copyright characteristics in your HTML5 document.
Metadata contained in the <meta> tags takes the form of name-value data pairs, much like JSON data definitions. If you want to learn more about JSON, reference my book, JSON Quick Syntax Reference (Apress, 2016).
There can be more than one <meta> tag. They go in the <head> section of the HTML5 document. There must be both a name and a content parameter—one cannot exist without the other, so if you have a name=“name”, you must have a content=“data value.”
The <meta> tag format
for the iTV Clock website has the following HTML5 markup syntax, with the six primary <meta> tags most often
utilized within the document’s <head> section:
<!DOCTYPE html>
<html lang="en">
<head>
<title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
<meta name="description" content="Use your iTV Set as a Clock!">
<meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
<meta name="robots" content="index, follow">
<meta name="copyright" content="Copyright 2014 through 2016">
<meta name="author" content="Wallace Jackson">
<meta charset="UTF-8">
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>The description metatag contains the description used in the search engine listing result. The keywords metatag offers a keyword list to the search engine robot. The robots metatag suggests how your site should be indexed. The copyright and author metatags secure your HTML5 document’s copyrights.
There is also a <meta> tag parameter called charset that is used to define the character set for your document, which for most HTML5 documents and applications is either UTF-8 or UTF-16. Universal Text Format 8-bit uses 256 character representations and Universal Text Format 16-bit uses 65,536 character representations. UTF-16 clearly represents a wider range of languages than UTF-8, although UTF-8 represents languages that use an alphabet character set, such as English, French, Spanish, Italian, Portugese, and German.
Before the simplified HTML5 charset=“utf-8” parameter, a <meta> tag to define the character set (for HTML 4.0 and prior) looked as follows:
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"> (HTML4)Table 3-1 lists 17 name:content data value pairs used in the <meta> tag format for HTML5 documents
and applications.
Table 3-1. Meta Tag name:content Data Value Pairs and Their Uses
|
Name Value |
Content Value |
Purpose or Usage |
|---|---|---|
|
description |
A description for the HTML document |
Your search engine listing description content control |
|
keywords |
Your keyword list |
SEO keyword suggestions |
|
robots |
index and follow |
SEO robot instructions |
|
copyright |
Copyright dates |
Document copyright dates |
|
author |
Author name |
Document author(s) names |
|
webauthor |
Author name |
Document author(s) names |
|
charset |
Character set used |
Generally UTF-8 or UTF-16 |
|
abstract |
Document summary |
Abstract of content summary |
|
revisit-after |
Period (i.e., 9 days) |
Robot revisit instructions |
|
language |
Name of language |
Language used for document |
|
distribution |
global, local, IU |
Global, local or internal distribution for document |
|
expires |
Date (1 Jan 2017) |
Document content expiration |
|
generator |
Name of software |
Document content generator |
|
reply-to |
E-mail address |
Document contact information |
|
no-email-collection |
An anti-spam link |
metatags.info/nospamharvest |
|
rating |
Intended audience |
general, mature, restricted |
|
googlebot |
noodp |
Use page description in ODP |
You can use the
http-equiv parameter
to define your HTTP header for the information (values) of your content parameter. This metatag is used to add certain non-standard values to your HTML5 website header, so let’s cover some of those standard http-equiv values used in website.
Table 3-2 lists 13 of the http-equiv:content data value pairs used inside the <meta> tag format for HTML5 documents and applications.
Table 3-2. Meta Tag name:content Data Value Pairs and Their Uses
|
http-equiv |
Content Value |
Purpose or Usage |
|---|---|---|
|
content-type |
Media Type, CharSet |
Define MIME type and charset |
|
cache-control |
Set cache settings |
Defines caching parameters |
|
cookie |
Defines cookie file |
Define cookie name and dates |
|
content-disposition |
Define applications |
Defines file name extension |
|
imagetoolbar |
Shows image toolbar |
Control display (IE) toolbar |
|
MSThemeCompatible |
Use WinXP UI theme |
Sets WinXP UI theme for site |
|
picslabel |
Label image content |
Allows imagery to be labeled |
|
pragma |
Sets HTTPS caching |
Ensure HTTPS page not cached |
|
Resource-Type |
Defines resources |
Define a page resource type |
|
refresh |
Time before refresh |
Redirect after a time period |
|
Content-Script-Type |
Scripting language |
Define a scripting language |
|
Content-Style-Type |
Style Sheet language |
Define a style sheet language |
|
window-target |
Specify window name as a window target for HTML5 document rendering / parsing |
Sets the window name for the webpage to be rendered in; generally used to break out of a frameset |
Next, let’s look at the <base> tag and how it allows you to define a base target URL for your HTML5 document.
The BASE Tag
: Configuring a URL for a Document
The HTML5 <base> tag is has no ending tag. It uses the HREF parameter to define the default URL and therefore the default “target” parameter for all links in the document. If I were to add the <base> tag to the iTV Clock HTML5 website, the resulting markup structure would look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
<meta name="description" content="Use your iTV Set as a Clock!">
<meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
<meta name="robots" content="index, follow">
<meta name="copyright" content="Copyright 2014 through 2016">
<meta name="author" content="Wallace Jackson">
<meta charset="UTF-8">
<base href="http://www.iTVclock.com">
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>There can only be a single <base> tag defined in the HTML5 document; it needs to be defined within the HEAD section of the document. The order of the child tags within the <head> tag does not matter, in case you are wondering.
More of the <head> child tags are covered in the next two chapters. Let’s move on to the other HTML5 tags that are child tags of the <body> tag.
Summary
In this chapter, you learned about the HTML5 document tags for search engine optimization (SEO) contained in the <HEAD> tag, including the <TITLE>, <META>, and <BASE> tags. Again, notice that your tag names can be either lowercase or uppercase letters, so use whichever tag style you prefer in your HTML5 markup syntax.
The next chapter discusses the LINK document tags inside the <HEAD> parent tag that influences linking to external assets, including favicons and cascading style sheets.