1621ICT Web Design and Development

HTML5 and CSS3 Illustrated

Unit N:

Optimising Your Web Site for Search Engines

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

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

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

Understanding Search Engine Optimisation (SEO)

• Sample effects of SEO techniques on an events page

5

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

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"

Writing Indexable Content

8

Browser preview before changes

Note generic title text

Note generic text for links

Writing Indexable Content

9

HTML document

Clearer title text

Writing Indexable Content

10

HTML document

Clearer image name

Clearer link text

Writing Indexable Content

11

Note clearer title text

Browser preview

Note clearer text for links

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

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

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" />

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

Incorporating Microdata

16

HTML document

Using Organization vocabulary

Name microdata

locality microdata

Using Address vocabulary and address microdata

region microdata postcode microdata

Telephone microdata

Incorporating Microdata

17

Browser preview

No visible change

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

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

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.

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

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" />

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

Previewing and Finalizing Your Site

24

• Part of rooms.html displayed without images or styles

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

Submitting Your Site

26

• Site submission page at google.com

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

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