1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web...
Transcript of 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web...
![Page 1: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/1.jpg)
1621ICT Web Design and Development
HTML5 and CSS3 Illustrated
Unit N:
Optimising Your Web Site for Search Engines
![Page 2: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/2.jpg)
Objectives • Understand search engine optimisation
(SEO)
• Write indexable content
• Add a description with the meta element
• Incorporate microdata
• Create a Sitemap file
• Create a robots.txt file
• Preview and finalise your site
• Submit your site 2
![Page 3: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/3.jpg)
Understanding Search Engine Optimisation (SEO)
• Search engine optimisation is a process of tailoring the structure and content of a Web page with search engines in mind
• Two main benefits of SEO: • Increasing a site’s priority in search results • Giving Web applications useful semantic
information about your site • How such an application could use your Web
site information when displaying search results Eg. A small paragraph of useful information right
below the search result link) 3
![Page 4: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/4.jpg)
Understanding Search Engine Optimisation (SEO)
• A search engine algorithm is a procedure that examines a number of factors to decide the priority of search results
• Microdata is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft created by
W3C for adding more types of semantic data to Web page content
• Can be used by search engines to present and format the most relevant data for a particular page
4
![Page 5: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/5.jpg)
Understanding Search Engine Optimisation (SEO)
• Sample effects of SEO techniques on an events page
5
![Page 6: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/6.jpg)
Writing Indexable Content
• To make a Web site search engine friendly depends on the content • Even small adjustments to your content can
improve the accuracy of indexing • The title, heading, image, and linked text
elements play important roles • In particular, the content of the title element
may be what the user sees in a set of search results and should clearly identify the content
6
![Page 7: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/7.jpg)
Writing Indexable Content
7
Element(s) Do Don't
title •Create short, descriptive titles •Customise the text to accurately describe the current page
•Use generic long titles •Copy the same title text for every page in a Web site
h1-h6 •Add headings to major subdivisions of the page
•Mark text with a heading element only for visual formatting
img •Give image files short descriptive names •Supply alternative text using the alt attribute
•Give image files long or non-descriptive names •Rely primarily on images for site navigation links
a •Make links concise •Use text that describes the link target
•Add links to long sections of text •Link generic text such as "CLICK HERE"
![Page 8: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/8.jpg)
Writing Indexable Content
8
Browser preview before changes
Note generic title text
Note generic text for links
![Page 9: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/9.jpg)
Writing Indexable Content
9
HTML document
Clearer title text
![Page 10: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/10.jpg)
Writing Indexable Content
10
HTML document
Clearer image name
Clearer link text
![Page 11: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/11.jpg)
Writing Indexable Content
11
Note clearer title text
Browser preview
Note clearer text for links
![Page 12: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/12.jpg)
Adding a Description with the meta Element • You can add several types of code to your Web
pages to provide information specifically for search engines
• You can add a page summary using the HTML meta element • Easy implementation • You've already used meta to indicate the character
encoding of your Web documents Eg. <meta charset="utf-8" />
• Page summary text may be used by search engines to display some information related to the search result
12
![Page 13: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/13.jpg)
Adding a Description with the meta Element • To add a summary of the page content using the
HTML meta tag you use the name attribute with value description and specify a content attribute with descriptive text. Example:
Search results example:
13
<meta name="description" content="Lakeland Bed and Breakfast offer 4 comfortable rooms that accommodate from 2 to 5 people. All have private baths and views of Twin lakes" />
Rooms at Lakeland Reeds Bed & Breakfast Lakeland Bed and Breakfast offer 4 comfortable rooms that accommodate from 2 to 5 people. All have private baths and views of Twin lakes Other search result Other meta description text
![Page 14: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/14.jpg)
Adding a Description with the meta Element • Another of the accepted values for the name
attribute is keywords
• You can specify a set of keywords that describe the the page content using the content attribute
Eg.
• Note: Implement keywords with care as search engines may not rank your page as highly if the keywords don't match the content of the page
14
<meta name="keywords" content="bed and breakfast, lake, boating, fishing, minnesota" />
![Page 15: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/15.jpg)
Incorporating Microdata
15
• While meta elements allow you to describe the overall content of the page, microdata enables you define keyword values for specific types of information on the page
• Vocabularies define keyword values for specific types of information • They serve as a common language for referencing
particular types of data • Anyone can define and use a custom vocabulary • You reference a vocabulary in your code using a URI • The Web site: www.data-vocabulary.org contains
popular, widely used vocabularies
![Page 16: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/16.jpg)
Incorporating Microdata
16
HTML document
Using Organization vocabulary
Name microdata
locality microdata
Using Address vocabulary and address microdata
region microdata postcode microdata
Telephone microdata
![Page 17: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/17.jpg)
Incorporating Microdata
17
Browser preview
No visible change
![Page 18: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/18.jpg)
Incorporating Microdata • Based on the microdata from the previous
example, a search engine could show some of the microdata as part of the summary text below the search result
Eg.
18
Rooms at Lakeland Reeds Bed & Breakfast Marble, MN – (218) 555-5253 Lakeland Bed and Breakfast offer 4 comfortable rooms that accommodate from 2 to 5 people. All have private baths and views of Twin lakes Other search result Other microdata information Other meta description text
![Page 19: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/19.jpg)
Creating a Sitemap File
19
• The relationships between pages on your site and their understandability to users is important • The site needs to be usable • All links should be well organised and clear
• It is also important that a search engine is able to find all of your Web site pages in order to index them • Search indexes should search all pages on the
site
![Page 20: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/20.jpg)
Creating a Sitemap File
20
• A sitemap is a file in a specific format that lists all the pages in a Web site • This file may include information about content • This file must be called: sitemap.txt • This file must be encoded using utf-8 Eg.
![Page 21: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/21.jpg)
Creating a robots.txt File
21
• Bots, also known as crawlers, are programs that search engines use to index Web pages automatically • Bots look for files named robots.txt to
indicate which files should not be indexed (added to the search engine)
• Note that you cannot rely on a robots.txt file to keep a document hidden • If you want a page to be hidden from the outside
world, you might instead use a password-based system
![Page 22: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/22.jpg)
Creating a robots.txt File
22
• Example code for a robots.txt file
• Note: to be sure that a page is not indexed, you can also use the meta tag in your HTML page:
<meta name="robots" content="noindex" />
![Page 23: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/23.jpg)
Previewing and Finalizing Your Site
23
• It may be useful to give your Web documents a final check from the point of view of a search engine bot • This could help to identify missing or hidden
content • It can help to ensure that pages are ready
for indexing • You can install free programs to view only
text versions of a Web page (eg. the open-source Lynx browser)
• Note that you can approximate a text only view by changing some of your browser settings
![Page 24: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/24.jpg)
Previewing and Finalizing Your Site
24
• Part of rooms.html displayed without images or styles
![Page 25: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/25.jpg)
Submitting Your Site
25
• A Webmaster is someone who is in charge of a Web site
• A Web site can be simply published to make it available to potential users and bots
• Users and bots will have to find their own way there
• Other measures can be taken to increase page popularity • You can also submit your page directly to search
engines (Google, Bing, etc.)
![Page 26: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/26.jpg)
Submitting Your Site
26
• Site submission page at google.com
![Page 27: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/27.jpg)
Summary • Search Engine Optimisation tailors your
Web site with search engines in mind
• This is done in order 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
easily achieved by adding appropriate text for each HTML element that may be indexed 27
![Page 28: 1621ICT Web Design and Development HTML5 and CSS3 Illustrated · Microdata. is used to mark up Web page elements (eg. name, address, etc.) • Microdata is covered in a working draft](https://reader035.fdocuments.us/reader035/viewer/2022071102/5fdba2f7ee5f235bee2f3c25/html5/thumbnails/28.jpg)
Summary • Vocabularies define keyword values for
specific information groupings
• Creation of a Sitemap file contains list of information in all pages of a Web site
• Bots are used by search engines to target indexable information
• View your site from the point of view of a bot to finalise
• Submit your site directly to search engines
28