HTML 5 and CSS 3, HTML 5 and CSS 3, Illustrated CompleteIllustrated Complete

Unit N: Unit N: Optimizing Your Web Site for Search EnginesOptimizing Your Web Site for Search Engines

ObjectivesObjectives

Understand search engine Understand search engine optimization (SEO)optimization (SEO)

Write indexable contentWrite indexable content

Add a description with the meta Add a description with the meta elementelement

Incorporate microdataIncorporate microdata

HTML 5 and CSS 3 – Illustrated Complete 2

Objectives (continued)Objectives (continued)

Create a Sitemap fileCreate a Sitemap file

Create a robots.txt fileCreate a robots.txt file

Preview and finalize your sitePreview and finalize your site

Submit your siteSubmit your site

HTML 5 and CSS 3 – Illustrated Complete 3

Understanding Search Engine Understanding Search Engine Optimization (SEO)Optimization (SEO)

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

Two main benefits:Two main benefits: Increasing site’s priority in search resultsIncreasing site’s priority in search results Giving Web applications useful semantic Giving Web applications useful semantic

information about your siteinformation about your site

HTML 5 and CSS 3 – Illustrated Complete 4

Understanding Search Engine Understanding Search Engine Optimization (SEO) (continued)Optimization (SEO) (continued)

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

MicrodataMicrodata: used to mark up Web page : used to mark up Web page elements elements Covered in a working draft created by Covered in a working draft created by

W3C for adding more types of semantic W3C for adding more types of semantic data to Web page contentdata to Web page content

HTML 5 and CSS 3 – Illustrated Complete 5

Understanding Search Engine Understanding Search Engine Optimization (SEO) (continued)Optimization (SEO) (continued)

Sample effects of SEO techniques on Sample effects of SEO techniques on an events pagean events page

HTML 5 and CSS 3 – Illustrated Complete 6

Writing Indexable ContentWriting Indexable Content

To make Web site search engine To make Web site search engine friendly depends on the contentfriendly depends on the content Even small adjustments can improve Even small adjustments can improve

accuracy of indexingaccuracy of indexing Title, heading, image, and linked text Title, heading, image, and linked text

elements play important roleselements play important roles

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

HTML 5 and CSS 3 – Illustrated Complete 7

Writing Indexable Content Writing Indexable Content (continued)(continued)

Completed code for indexable textCompleted code for indexable text

HTML 5 and CSS 3 – Illustrated Complete 8

Adding a Description with the Adding a Description with the meta Element meta Element

Code added to provide information Code added to provide information specifically for search enginesspecifically for search engines

Page summary using meta elementPage summary using meta element Easy implementationEasy implementation Specified various information to indicate Specified various information to indicate

character encoding of Web documentscharacter encoding of Web documents Charset attributesCharset attributes

New meta data with description New meta data with description attributeattribute

HTML 5 and CSS 3 – Illustrated Complete 9

Adding a Description with the Adding a Description with the meta Element (continued)meta Element (continued)

Code for description meta elementCode for description meta element

HTML 5 and CSS 3 – Illustrated Complete 10

Incorporating MicrodataIncorporating Microdata

HTML 5 and CSS 3 – Illustrated Complete 11

VocabulariesVocabularies: define keyword values : define keyword values for specific types of informationfor specific types of information Serve as common language for Serve as common language for

referencing datareferencing data Anyone can define and use custom Anyone can define and use custom

vocabularyvocabulary Reference in code using URIReference in code using URI Data-vocabulary.org contains popular, Data-vocabulary.org contains popular,

widely used vocabularieswidely used vocabularies

Incorporating MicrodataIncorporating Microdata(continued)(continued)

Code for microdata in footer sectionCode for microdata in footer section

HTML 5 and CSS 3 – Illustrated Complete 12

Creating a Sitemap FileCreating a Sitemap File

HTML 5 and CSS 3 – Illustrated Complete 13

Relationships between pages on site Relationships between pages on site and their understandability is importantand their understandability is important Site needs to be usableSite needs to be usable Links should be organized and clearLinks should be organized and clear Search indexes should search all pages Search indexes should search all pages

on the siteon the site

SitemapSitemap: file in a specific format that : file in a specific format that lists all the pages in a Web sitelists all the pages in a Web site May include information about contentMay include information about content

Creating a Sitemap File Creating a Sitemap File (continued)(continued)

HTML 5 and CSS 3 – Illustrated Complete 14

Social Social bookmarking bookmarking icons added icons added to Web pageto Web page

Creating a robots.txt FileCreating a robots.txt File

HTML 5 and CSS 3 – Illustrated Complete 15

BotsBots: also known as crawlers, bots are : also known as crawlers, bots are programs that search engines use to programs that search engines use to index Web pagesindex Web pages Look for files named robots.txtLook for files named robots.txt Cannot rely on this file to keep a Cannot rely on this file to keep a

document hiddendocument hidden• May use password-based systemMay use password-based system

Influences which pages are indexedInfluences which pages are indexed

Creating a robots.txt File Creating a robots.txt File (continued)(continued)

HTML 5 and CSS 3 – Illustrated Complete 16

Code for robots.txt fileCode for robots.txt file

Previewing and Finalizing Previewing and Finalizing Your SiteYour Site

HTML 5 and CSS 3 – Illustrated Complete 17

Useful to give documents final check Useful to give documents final check from bot point of viewfrom bot point of view Helps identify missing or hidden contentHelps identify missing or hidden content Ensures that pages are ready for Ensures that pages are ready for

indexingindexing Can install free programs to view only Can install free programs to view only

texttext Can approximate view by changing Can approximate view by changing

browser settingsbrowser settings

Previewing and Finalizing Previewing and Finalizing Your Site (continued)Your Site (continued)

HTML 5 and CSS 3 – Illustrated Complete 18

Part of Part of rooms.html rooms.html displayed displayed without images without images or stylesor styles

Submitting Your SiteSubmitting Your Site

HTML 5 and CSS 3 – Illustrated Complete 19

WebmastersWebmasters: people in charge of Web : people in charge of Web sitessites

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

Other measures can be taken to Other measures can be taken to increase page popularityincrease page popularity Submit page directly to search enginesSubmit page directly to search engines

Submitting Your Site Submitting Your Site (continued)(continued)

HTML 5 and CSS 3 – Illustrated Complete 20

Site submission page at google.comSite submission page at google.com

SummarySummary

SEO tailors your Web site with search SEO tailors your Web site with search engines in mind to increase site engines in mind to increase site popularity and give applications useful popularity and give applications useful information about your siteinformation about your site Algorithms and microdata are SEO toolsAlgorithms and microdata are SEO tools

It does not take much to make site It does not take much to make site more SEO friendlymore SEO friendly Indexable content element changes are Indexable content element changes are

easyeasy

HTML 5 and CSS 3 – Illustrated Complete 21

Summary (continued)Summary (continued)

Vocabularies define keyword values Vocabularies define keyword values for specific information groupingsfor specific information groupings

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

Bots are used by search engines to Bots are used by search engines to target indexable informationtarget indexable information

View site in bot point of view to finalizeView site in bot point of view to finalize

Submit site directly to search enginesSubmit site directly to search enginesHTML 5 and CSS 3 – Illustrated Complete 22