Further web design: using meta tags

Size: px

Start display at page:

Download "Further web design: using meta tags"

Barry Baker
8 years ago
Views:

1 Further web design: using meta tags Practical workbook Aims and Learning Objectives This document introduces meta tags. When you have completed these exercises you should be able to: include additional information to help identify your site to search engines. University of Bristol Information Services document web-t16

When you have completed these exercises you should be able to: include

2 Document information Related documentation Other related documents are available on the web at: Further web design: using meta tags (August 06) If you have any comments or queries about this document mail This document may be used wholly or in part by the academic community, providing suitable acknowledgment is made. It may not be used for any commercial or profit-making purpose without permission University of Bristol. All rights reserved.

uk/is/learning/documentation/web-t16/web-t16.doc If you have any comments or queries about this document mail iser-docs@bristol.ac.uk. This document may be used wholly or in part by the academic community, providing suitable acknowledgment is made.

3 Introduction Meta tags provide additional in the head of web pages. Uses include increasing visibility to some search engines, hiding pages from search engine results, adding a description and providing author information Prerequisites This document assumes that you are familiar with the use of a computer keyboard and mouse, Microsoft Windows software including file management, and a web browser. You should also be able to create simple web pages using a text editor and be able to transfer files to a web server, having attended a relevant course, eg, Introduction to Web page creation in XHTML (code CC1WPC).

Prerequisites This document assumes that you are familiar with the use of a computer keyboard and mouse, Microsoft Windows software including file

4 Contents Document information Task 1 Using meta tags...1

5 Task 1 Using meta tags Objectives Comments To include various meta tags within a web page. These tasks involve adding information to an existing webpage. 1.1 Open pad (Start / Programs / Accessories / pad) and set word wrapping, by choosing Word Wrap from the Format Menu. 1.2 Browse to folder C:\User\WWW\Web Design 2, and open a page you have created. 1.3 Add a keywords meta tag: Add the following code, show in bold italic to the head of your document: <head> <meta name="keywords" content="" /> Add a comma-separated list of keywords to the content attribute. This should comprise words you would expect users to employ during a keyword search, including a few spelling mistakes, if appropriate. For example: <meta name="keywords" content="joe Bloggs, Jo Bloggs, web design, University of Bristol" /> Meta keywords are not used by Google or AltaVista. Page titles, headers, image alt attributes and page content should also include key words in order to help optimise visibility and ranking. It is important not to over use keywords, or hide them within inappropriate alt attributes or invisible text, as this could be perceived as spamming, resulting in exclusion by search engines. Save the file. You will not notice any difference to your page. Even when uploaded to the Web, it may well take some time for your page to appear in search engine results. 1.4 Add a description meta tag, along with appropriate content: Add the following code beneath your keywords tag: <meta name="keywords" content="joe Bloggs, Jo Bloggs, web design, University of Bristol " /> <meta name="description" content="joe Bloggs is employed as a web designer at the University of Bristol" /> Save your page. Meta description tags are used by some search engines to provide descriptive content in search results. AltaVista limits descriptions to 1024 characters, so it is important to be succinct. For specific search engines use of meta tags, see: 1

3 Add a keywords meta tag: Add the following code, show in bold italic to the head of your document: <head> <meta name="keywords" content="" /> Add a comma-separated list of keywords to the content

6 1.5 Add a robots meta tag to control search engine indexing of the page: Add the following code shown in bold italic beneath your keywords tag and save your page: <meta name="keywords" content="joe Bloggs, Jo Bloggs, web design, University of Bristol " /> <meta name="description" content="joe Bloggs is employed as a web designer at the University of Bristol" /> <meta name="robots" content="noindex,nofollow" /> The noindex element of the robots meta tag is used by all search engines to stop pages being indexed (recorded) by search engines and appearing in search results. The inclusion of nofollow stops search engines following links and indexing more pages. 1.6 Add an author meta tag to identify the author of the page: Add the following code, shown in bold italic, beneath your keywords tag and save your page: <meta name="keywords" content="joe Bloggs, Jo Bloggs, web design, University of Bristol " /> <meta name="description" content="joe Bloggs is employed as a web designer at the University of Bristol" /> <meta name="robots" content="noindex,nofollow" /> <meta name="author" content="joe Bloggs" /> The author meta tag is not currently used by search engines or displayed in browsers. 2

content="noindex,nofollow" /> The noindex element of the robots meta tag is used by all search engines to stop pages being indexed (recorded) by search engines and appearing in search results.

Further web design: HTML forms

Further web design: HTML forms Practical workbook Aims and Learning Objectives The aim of this document is to introduce HTML forms. By the end of this course you will be able to: use existing forms on