HTML 5 and CSS 3, Illustrated Complete Unit N: Optimizing Your Web Site for Search Engines

1. HTML 5 and CSS 3, Illustrated CompleteUnit N: Optimizing Your Web Site for Search Engines

2. 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

3. 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

4. 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

5. 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

6. Understanding Search Engine Optimization (SEO) (continued) • Sample effects of SEO techniques on an events page HTML 5 and CSS 3 – Illustrated Complete

7. 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

8. Writing Indexable Content (continued) • Completed code for indexable text HTML 5 and CSS 3 – Illustrated Complete

9. 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

10. Adding a Description with the meta Element (continued) • Code for description meta element HTML 5 and CSS 3 – Illustrated Complete

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

12. Incorporating Microdata(continued) • Code for microdata in footer section HTML 5 and CSS 3 – Illustrated Complete

13. 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

14. Creating a Sitemap File (continued) • Social bookmarking icons added to Web page HTML 5 and CSS 3 – Illustrated Complete

15. 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

16. Creating a robots.txt File (continued) • Code for robots.txt file HTML 5 and CSS 3 – Illustrated Complete

17. 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

18. Previewing and Finalizing Your Site (continued) • Part of rooms.html displayed without images or styles HTML 5 and CSS 3 – Illustrated Complete

19. 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

20. Submitting Your Site (continued) • Site submission page at google.com HTML 5 and CSS 3 – Illustrated Complete

21. 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

22. 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