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

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

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 sites priority in search results Giving Web applications useful semantic information about your site

HTML 5 and CSS 3 Illustrated Complete

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

Understanding Search Engine Optimization (SEO) (continued)

Sample effects of SEO techniques on an events page

HTML 5 and CSS 3 Illustrated Complete

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

Writing Indexable Content (continued)

Completed code for indexable text

HTML 5 and CSS 3 Illustrated Complete

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

Adding a Description with the meta Element (continued)

Code for description meta element

HTML 5 and CSS 3 Illustrated Complete

10

Incorporating Microdata
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
HTML 5 and CSS 3 Illustrated Complete

11

Incorporating Microdata (continued)

Code for microdata in footer section

HTML 5 and CSS 3 Illustrated Complete

12

Creating a Sitemap File

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
HTML 5 and CSS 3 Illustrated Complete

13

Creating a Sitemap File (continued)

Social bookmarking icons added to Web page

HTML 5 and CSS 3 Illustrated Complete

14

Creating a robots.txt File

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

HTML 5 and CSS 3 Illustrated Complete

15

Creating a robots.txt File (continued)

Code for robots.txt file

HTML 5 and CSS 3 Illustrated Complete

16

Previewing and Finalizing Your Site

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
HTML 5 and CSS 3 Illustrated Complete

17

Previewing and Finalizing Your Site (continued)

Part of rooms.html displayed without images or styles

HTML 5 and CSS 3 Illustrated Complete

18

Submitting Your Site

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
HTML 5 and CSS 3 Illustrated Complete

19

Submitting Your Site (continued)

Site submission page at google.com

HTML 5 and CSS 3 Illustrated Complete

20

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