HTML 5 and CSS 3, Illustrated Complete

panicyfewInternet and Web Development

Nov 18, 2013 (3 years and 11 months ago)

106 views

HTML
5
and CSS
3
,

Illustrated Complete


Unit N:

Optimizing Your Web Site for Search Engines


Objectives

Understand search engine
optimization (SEO)

Write indexable content

Add a description with the meta
element

Incorporate microdata

HTML 5 and CSS 3


Illustrated Complete

2

Objectives (continued)

Create a Sitemap file

Create a robots.txt file

Preview and finalize your site

Submit your site

HTML
5
and CSS
3


Illustrated Complete

3

Understanding Search Engine
Optimization (SEO)

Search engine optimization
: process
of tailoring the structure and content of
a Web page with search engines in
mind

Two main benefits:


Increasing site’s priority in search results


Giving Web applications useful semantic
information about your site


HTML
5
and CSS
3


Illustrated Complete

4

Understanding Search Engine
Optimization (SEO) (continued)

Algorithm
: factors that search engines
balance to decide the priority of search
results combined into a set of
instructions

Microdata
: used to mark up Web page
elements


Covered in a working draft created by
W3C for adding more types of semantic
data to Web page content

HTML
5
and CSS
3


Illustrated Complete

5

Understanding Search Engine
Optimization (SEO) (continued)

Sample effects of SEO techniques on
an events page


HTML
5
and CSS
3


Illustrated Complete

6

Writing Indexable Content

To make Web site search engine
friendly depends on the content


Even small adjustments can improve
accuracy of indexing


Title, heading, image, and linked text
elements play important roles

Table N
-
1 outlines guidelines for
increasing effectiveness of elements
for SEO

HTML
5
and CSS
3


Illustrated Complete

7

Writing Indexable Content
(continued)

Completed code for indexable text




HTML
5
and CSS
3


Illustrated Complete

8

Adding a Description with the

meta Element

Code added to provide information
specifically for search engines

Page summary using meta element


Easy implementation


Specified various information to indicate
character encoding of Web documents


Charset attributes

New meta data with description
attribute

HTML
5
and CSS
3


Illustrated Complete

9

Adding a Description with the

meta Element (continued)

Code for description meta element

HTML
5
and CSS
3


Illustrated Complete

10

Incorporating Microdata

HTML
5
and CSS
3


Illustrated Complete

11

Vocabularies
: define keyword values
for specific types of information


Serve as common language for
referencing data


Anyone can define and use custom
vocabulary


Reference in code using URI


Data
-
vocabulary.org contains popular,
widely used vocabularies

Incorporating Microdata

(continued)

Code for microdata in footer section


HTML
5
and CSS
3


Illustrated Complete

12

Creating a Sitemap File

HTML
5
and CSS
3


Illustrated Complete

13

Relationships between pages on site
and their understandability is important


Site needs to be usable


Links should be organized and clear


Search indexes should search all pages
on the site

Sitemap
: file in a specific format that
lists all the pages in a Web site


May include information about content

Creating a Sitemap File
(continued)

HTML
5
and CSS
3


Illustrated Complete

14

Social
bookmarking
icons added
to Web page


Creating a robots.txt File

HTML
5
and CSS
3


Illustrated Complete

15

Bots
: also known as crawlers, bots are
programs that search engines use to
index Web pages


Look for files named robots.txt


Cannot rely on this file to keep a
document hidden


May use password
-
based system


Influences which pages are indexed

Creating a robots.txt File
(continued)

HTML
5
and CSS
3


Illustrated Complete

16

Code for robots.txt file


Previewing and Finalizing

Your Site

HTML
5
and CSS
3


Illustrated Complete

17

Useful to give documents final check
from bot point of view


Helps identify missing or hidden content


Ensures that pages are ready for
indexing


Can install free programs to view only
text


Can approximate view by changing
browser settings



Previewing and Finalizing

Your Site (continued)

HTML
5
and CSS
3


Illustrated Complete

18

Part of
rooms.html
displayed
without images
or styles

Submitting Your Site

HTML
5
and CSS
3


Illustrated Complete

19

Webmasters
: people in charge of Web
sites

Web site can be simply published to
make it available to potential users
and bots

Other measures can be taken to
increase page popularity


Submit page directly to search engines

Submitting Your Site

(continued)

HTML
5
and CSS
3


Illustrated Complete

20

Site submission page at google.com

Summary

SEO tailors your Web site with search
engines in mind to increase site
popularity and give applications useful
information about your site


Algorithms and microdata are SEO tools

It does not take much to make site
more SEO friendly


Indexable content element changes are
easy

HTML
5
and CSS
3


Illustrated Complete

21

Summary (continued)

Vocabularies define keyword values
for specific information groupings

Creation of Sitemap file contains list of
information in all pages of a Web site

Bots are used by search engines to
target indexable information

View site in bot point of view to finalize

Submit site directly to search engines


HTML
5
and CSS
3


Illustrated Complete

22