HTML5 – HTML5 Search Engine Optimization: Title and Meta

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.

Comments are closed.