Webpage Coding
Example #3 Adding Metadata
The »previous example collated the CSS instructions into a single
block within the <head> and separated the style from the
content.
This CSS needs to be externalised so that it can be shared to the other other pages.
The main change in this third example is the removal of the CSS to an external file and the addition of the required page metadata which will be explained below...
The previous <style> has been removed and replaced with
a stylesheet <link> element. The CSS details have been
written to an external file as : /css/simpleskel.css This has
the exact same syntax as the previous <style> block but
without the <style> tags!
The full source code is shown below, »the page itself is here, and will open in another window.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Example Webpage #3</title>
<meta name="description" content="A good description of the page here..." />
<meta name="keywords" content="search,engine,keywords,in,here" />
<meta name="charset" content="ISO-8859-1" />
<meta name="author" content="Andy Belcher" />
<meta name="generator" content="Notetab" />
<meta name="copyright" content="Andy Belcher 2006 DandyWebDesign" />
<link rel="stylesheet" href="/css/simpleskel.css" type="text/css" />
</head>
<body>
<div id="frame">
<div id="header">
<h1>Example Webpage</h1>
</div><!--header-->
<div id="content">
<div id="rightbar">
Site Links
<div class="navbar">
<a href="./simpleskel3.shtml#link" title="Return to the example notes page..."
>Link to Notes</a>
<a href="./example1.shtml#link" title="View the first example page - raw..."
>Example #1</a>
<a href="./example2.shtml#link" title="View the second example page - CSS tidied away - content separated from style..."
>Example #2</a>
<a href="./example3.shtml#link" title="View the third example page - External CSS and page metadata added..."
>Example #3</a>
<a href="./example4.shtml#link" title="View the fourth example page - Email addresses masked using JavaScript..."
>Example #4</a>
<a href="./example5.shtml#link" title="View the fifth example page - Code sharing using server-side includes..."
>Example #5</a>
<a href="./example6.shtml#link" title="View the sixth example page - Testing for DHTML and 'advanced' support..."
>Example #6</a>
</div><!--navbar-->
More text here in the sidebar
</div><!--rightbar-->
<h2>Example #3</h2>
<p class="loud">Welcome line - hello visitor etc etc</p>
<p>Mary had a little lamb, its fleece was white as snow, and everywhere that Mary went that lamb was sure to go... Mary had a little lamb, its fleece was white as snow, and everywhere that Mary went that lamb was sure to go...</p>
<p>Some more website content here</p>
</div><!--content-->
<div id="footer">Footer section code and credits here... Email: <a
href="mailto:fred@nowhere.com"
title="Contact us by email...">fred@nowhere.com</a>
</div><!--footer-->
</div><!--frame-->
</body>
</html>
Page Metadata Notes
The page metadata is critically important if you wish your pages to be locatable on the Internet via search engines.
The principle metatags have been added into the example page. By far the most critical are the 'description' and 'keywords' tags, these are what search engines will look for primarily. A brief description of each tag follows, this list is by no means exhaustive, there are plenty more metatags for a variety of purposes but these are beyond the scope of this page...
description This should be a sentence length description of your site and why it would be useful to a visitor. It should also try to involve as many primary keywords as possible. This is the text that many search engines will display in their results so it is in your interest to make it 'attractive'.
keywords A comma-separated list of all the major keywords for your site. These should match the most likely words that would be typed into a search engine, think what you would search for to find similar websites. You are also advised to restrict yourself to text that appears within your page, if the keywords correspond to words in the main titles etc then so much the better. A fuller discussion of keywords is well beyond the scope of this page, there are plenty of websites out there which will give more details, but without question the best way to get your page listed is on merit!
charset This defines the character set that your webcode
uses and ensures that certain characters decode correctly. This is especially
important if you expect an interest from outside of your own country.
(As an aside, avoid using 'odd' characters in your web-text and instead use
the entity character, this will ensure that you get the correct character. The
most obvious example is the English Pound Sterling symbol £
- on US systems this can appear as a # symbol, use
£ instead!)
author Not strictly necessary, this defines the person or organisation who wrote the page.
generator Again not strictly necessary, the software or system used to create the page.
copyright The copyright holder and owner of the page.
We now have a basically 'correct' page that will work properly on the Internet, but we still need to look at the remaining issues:
- Email address is 'en clar'...
- Code is not easily shared or maintained between pages
- Support for DHTML and 'advanced' features?
The next issue is the email address, it is there for any spider to pick up and add to spam lists, a solution to this problem is discussed elsewhere in this site and will be implemented in the next example...