HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit O Page 1 of 9
HTML 5 and CSS 3 – Illustrated, 2nd Edition
Unit O: Optimizing Your Web Site for Search Engines
A Guide to this Instructor’s Manual:
We have designed this Instructor’s Manual to supplement and enhance your teaching experience
through classroom activities and a cohesive chapter summary.
This document is organized chronologically, using the same heading in dark blue that you see in the
textbook. Under each heading you will find (in order): Lecture Notes that summarize the section,
Figures and Boxes found in the section, if any, Teacher Tips, Classroom Activities, and Lab Activities.
Pay special attention to teaching tips, and activities geared towards quizzing your students, enhancing
their critical thinking skills, and encouraging experimentation within the software.
In addition to this Instructor’s Manual, our Instructor’s Resources CD also contains PowerPoint
Presentations, Test Banks, and other supplements to aid in your teaching experience.
For your students:
Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your
students up to date with the latest in technology news. Direct your students to
T
T
Ta
a
ab
b
bl
l
le
e
e
o
o
of
f
f
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
ts
s
s
Unit Objectives
2
406: Understand Search Engine Optimization (SEO)
2
408: Write Indexable Content
3
410: Add a Description with the meta Element
3
412: Incorporate Microdata
4
414: Create a Sitemap File
5
416: Create a robots.txt File
6
418: Preview and Finalize Your Site
7
420: Submit Your Site
7
End of Unit Material
8
Glossary of Key Terms
9
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit O Page 2 of 9
U
U
Un
n
ni
i
it
t
t
O
O
Ob
b
bj
j
je
e
ec
c
ct
t
ti
i
iv
v
ve
e
es
s
s
Students will have mastered the material in Unit O when they can:
• Understand search engine optimization
(SEO)
• Write indexable content
• Add a description with the meta
element
• Incorporate microdata
• Create a sitemap file
• Create a robots.txt file
• Preview and finalize your site
• Submit your site
4
4
40
0
06
6
6:
:
:
U
U
Un
n
nd
d
de
e
er
r
rs
s
st
t
ta
a
an
n
nd
d
d
S
S
Se
e
ea
a
ar
r
rc
c
ch
h
h
E
E
En
n
ng
g
gi
i
in
n
ne
e
e
O
O
Op
p
pt
t
ti
i
im
m
mi
i
iz
z
za
a
at
t
ti
i
io
o
on
n
n
(
(
(S
S
SE
E
EO
O
O)
)
)
LECTURE NOTES
• Introduce the concept of search engine optimization, also known as SEO, which is the process of
tailoring the structure and content of a web page with search engines in mind.
FIGUREs: O-1, O-2
BOXES:
1. Quick Tip: One popular way to increase links to your website is to encourage your customers to share
your site on social media.
CLASSROOM ACTIVITY
1. Quick Quiz:
a. T/F Search engines balance many factors, known as microdata, to decide the priority of
b. T/F Search engines can use microdata to present and format relevant web page content in
4
4
40
0
08
8
8:
:
:
W
W
Wr
r
ri
i
it
t
te
e
e
I
I
In
n
nd
d
de
e
ex
x
xa
a
ab
b
bl
l
le
e
e
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
t
LECTURE NOTES:
• Explain how to make a web site search engine friendly.
• Discuss how changing content, even slightly, can affect the accuracy of search engines when they
index pages.
• Explain what types of elements play important indexing roles.
• Review the guidelines in Table O-1 for creating indexable content in different elements.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit O Page 3 of 9
TEACHER TIP
Discuss with students the business advantage of SEO — especially when most individuals are
depending more and more on the internet to find things rather than turning to the paper version of
yellow pages or other tangible directories.
FIGURES: O-3, O-4, O-5
TABLE: O-1
CLASSROOM ACTIVITY
1. Quick Quiz:
a. T/F You should use generic or long titles in a title element to create ideal indexable content.
LAB ACTIVITY
Have students go online and search for a business industry in their home town. Have them put in
various text searches to find out which sites pop up first. Ask the students to report on what they notice
about sites that pop up depending on the text used to search, and ones that pop up no matter what text
is entered. Ask the students to visit the actual web pages of the sites that are most popular and report to
the class the indexable content they see as most prevalent.
4
4
41
1
10
0
0:
:
:
A
A
Ad
d
dd
d
d
a
a
a
D
D
De
e
es
s
sc
c
cr
r
ri
i
ip
p
pt
t
ti
i
io
o
on
n
n
w
w
wi
i
it
t
th
h
h
t
t
th
h
he
e
e
m
m
me
e
et
t
ta
a
a
E
E
El
l
le
e
em
m
me
e
en
n
nt
t
t
LECTURE NOTES
• Explain how you can add types of code to a web page to provide information specifically for search
engines.
• Discuss page summaries using a meta element.
FIGURES: O-6, O-7
BOXES
1. Quick Tip: Some browsers also use the content of a description meta element as a label when the page
is bookmarked.
2. Recognizing the limits of SEO techniques
Fundamentally, SEO is about providing search engines with as much information as possible regarding
the focus of your web pages and relying on the search engines themselves to decide how relevant each
page is to a given query. Each search engine continuously adjusts its algorithm to keep it up to date and
fine-tune its accuracy. Some people who work with web technologies approach SEO as a way to provide
search engines with a website description that’s calculated to score a higher position in search results
but which doesn’t necessarily accurately represent the site presented to human users. While this
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit O Page 4 of 9
approach may work for limited periods of time, search engine algorithms grow over time to
accommodate this approach and lessen its impact. In addition, some of the coding required for this
3. Understanding the keywords meta element
In addition to description, another value for the name attribute of the meta element is
keywords. In a keywords meta element, the value of the content attribute is a list of words or
terms that describe the page content, separated by commas. Originally, the idea was that such an
element would be used to list keywords that a developer would expect to be search terms entered in a
search query in order to help match the page with the search terms. For instance, a keywords meta
element for a bed and breakfast in Minnesota with lake access might look like
CLASSROOM ACTIVITIES
1. Classroom Discussion: Ask students to discuss their personal experiences with SEO using meta
elements. Have them elaborate on what was both successful and ineffective for them.
2. Quick Quiz:
a. T/F You can add a summary of your page content by creating a new meta element with the
b. T/F Like the meta element for indicating the character encoding of a web page, which uses
LAB ACTIVITY
Have students create a description meta tag that could be used for a website that specializes in real
estate in their home town.
4
4
41
1
12
2
2:
:
:
I
I
In
n
nc
c
co
o
or
r
rp
p
po
o
or
r
ra
a
at
t
te
e
e
M
M
Mi
i
ic
c
cr
r
ro
o
od
d
da
a
at
t
ta
a
a
LECTURE NOTES
• Define the term vocabularies, which are sets of terms and definitions that can be used to indicate
the semantic value of specific types of information.
• Explain the use of microdata to add semantic information to specific web page elements.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit O Page 5 of 9
• Define the term schemas, which are groups of terms and definitions related to different types of
information. Point out that multiple schemas make up a vocabulary.
412 as a guide.
FIGURES: O-8, O-9, O-10
TABLE: O-2
BOXES
1. Quick Tip: The string that identifies a schema is a URI, which is similar to a URL but does not
necessarily reference an actual web document.
2. Quick Tip: You can view a list of property names and descriptions for this schema at schema.org/
LocalBusiness.
3. Quick Tip: Google also offers a tool that automates generating markup for structured data at
google.com/ webmasters/ markup-helper.
CLASSROOM ACTIVITY
1. Quick Quiz:
LAB ACTIVITY
Have students use the schema at http://schema.org/Event to create microdata markup for at least 3
details about an event of their choosing. If students have trouble picking an event, use the next class
meeting (including date, start time, end time, and location).
4
4
41
1
14
4
4:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
a
S
S
Si
i
it
t
te
e
em
m
ma
a
ap
p
p
F
F
Fi
i
il
l
le
e
e
LECTURE NOTES
• Define the term sitemap file, which is a file in a specific format that lists all the pages in a website.
• Explain how ensuring that the relationships between pages on a website are easy to understand is an
important part of making your site usable for visitors.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit O Page 6 of 9
TEACHER TIP
Point out to students that the simplest version of Sitemap file contains only text.
FIGURES: O-11, O-12
BOXES
1. Quick Tip: A plain-text sitemap file must be saved with UTF-8 encoding for compatibility with major
search engines. Check your editor’s documentation for steps to set the encoding for a file.
2. Creating an XML Sitemap file
While a plain-text sitemap file can meet the needs of a small, simple website, larger sites and sites with
a lot of content can benefit from sitemap files that provide more information. You can add more data
about your web pages and their contents by creating a file using XML with the Sitemap protocol, which
CLASSROOM ACTIVITIES
1. Quick Quiz:
4
4
41
1
16
6
6:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
a
r
r
ro
o
ob
b
bo
o
ot
t
ts
s
s.
.
.t
t
tx
x
xt
t
t
F
F
Fi
i
il
l
le
e
e
LECTURE NOTES:
• Define the terms bots and crawlers: these programs look for a file named robtos.txt in the root
directory of a website for instructions on any files or folders to exclude from indexing.
• Use Figure O-13 to explain the process used by bots when crawling a website.
• Explain why a website may contain pages or folders that it may not want indexed by search engines.
• Walk students through the process of creating a robots.txt file by following the steps on Page 416 as
a guide.
FIGURE: O-13, O-14
TABLE: O-3
BOXES:
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit O Page 7 of 9
2. Quick Tip: After specifying a group of files to exclude from indexing, you can create one or more
Allow entries to specify files that should be indexed.
3. Excluding pages from indexing with the noindex meta element
CLASSROOM ACTIVITY
1. Critical Thinking: Discuss the importance of the fact that any publicly available document on the
web can be viewed by anyone with Internet access. Ask the students to elaborate on safety and privacy
concerns that may come into play.
4
4
41
1
18
8
8:
:
:
P
P
Pr
r
re
e
ev
v
vi
i
ie
e
ew
w
w
a
a
an
n
nd
d
d
F
F
Fi
i
in
n
na
a
al
l
li
i
iz
z
ze
e
e
Y
Y
Yo
o
ou
u
ur
r
r
S
S
Si
i
it
t
te
e
e
LECTURE NOTES:
• Explain the importance of giving a website a final check from the point of view of a bot.
• Explain how viewing text only versions of a web page can help identify missing or hidden content
and ensure that pages are ready for search engine indexing.
• Discuss products available like the open-source Lynx browser and what they can do for a user.
• Walk the students through the process of viewing a text-only site by using the steps on Page 418 as
a guide.
FIGURES: O-15, O-16
BOXES:
1. Trouble: At the time this book was written, disabling images did not work for local files. If images are
still displayed, open rooms.html from a web server, then repeat Step 3.
2. Quick Tip: The Disable All Styles option is automatically turned off when a page is reloaded or when
a new page is opened. The Disable All Images option remains selected until you turn it off.
CLASSROOM ACTIVITIES
1. Quick Quiz:
b. T/F Viewing text-only versions of your web pages can help you identify missing or hidden
4
4
42
2
20
0
0:
:
:
S
S
Su
u
ub
b
bm
m
mi
i
it
t
t
Y
Y
Yo
o
ou
u
ur
r
r
S
S
Si
i
it
t
te
e
e
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit O Page 8 of 9
LECTURE NOTES:
• Define the term webmaster, which is the person in charge of a website.
FIGURES: O-17, O-18
BOXES:
1. Quick Tip: Because web page designs and content change regularly, your screen may not match
exactly the pages shown in these steps.
2. Trouble: If you do not have a Google account, you can create one at accounts.google. com/SignUp.
3. Quick Tip: You do not need to sign in to continue with the steps.
4. Using search engine webmaster tools
In addition to enabling you to submit your site for indexing, the webmaster tools provided by search
engines can help you accomplish many other tasks as well. One of the main benefits to using these tools
includes the ability to submit additional information to complement microdata from your website that
appears in search results. For instance, you can submit a photo of your business to be displayed, along
with other specific information, such as your business hours. Major search engines also allow you to
purchase targeted advertising for your business, which is displayed on the websites of other businesses
that are paid by the search engine to run ads on their sites. For a bed and breakfast, for example, this
might result in an ad linking to your business being shown to users of a travel website when they search
for travel information about your geographical region, or to users of a website whose audience matches
your target demographic. Finally, webmaster tools also include easy–to-follow guidelines for further
optimizing your website for indexability and guides for accomplishing basic tasks in administering a
website.
CLASSROOM ACTIVITY
1. Quick Quiz:
2. Major search engines provide web ________ where you can submit the address of a website for
LAB ACTIVITY
Ask students to create a chart of three major search engines and then have them find out if they have a
form where an address can be submitted for indexing. They should indicate on the chart the search
engine and the URL of the submission form.
E
E
En
n
nd
d
d
o
o
of
f
f
U
U
Un
n
ni
i
it
t
t
M
M
Ma
a
at
t
te
e
er
r
ri
i
ia
a
al
l
l
•
•
•
Concepts Review – Includes screen identification, multiple choice, and matching questions.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit O Page 9 of 9
•
•
•
Independent Challenges 1, 2 and 3 – Case projects that require critical thinking and application of
the unit skills. The Independent Challenges increase in difficulty, with the first being the easiest
(with the most step-by-step detailed instructions). Independent Challenges 2 and 3 become
increasingly more open-ended.
G
G
Gl
l
lo
o
os
s
ss
s
sa
a
ar
r
ry
y
y
o
o
of
f
f
K
K
Ke
e
ey
y
y
T
T
Te
e
er
r
rm
m
ms
s
s
• algorithm (406)
• bot (416)
• crawler (416)
• microdata (406)
• schema (412)
• search engine optimization (SEO) (406)
• search rank (406)
• SEO (406)
• sitemap (414)
• vocabulary (412)
• webmaster (420)
Top of Document