| ||||
|---|---|---|---|---|
|
|
|
| ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
Websites 'R' Easy Part Two, Lecture NotesThis lecture continues the handwritten code theme by analysing the code used by Dave Cushman on the beekeeping section of his website. |
|
| |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
The lecture starts with an overhead gel welcoming attendees, then a reminder that there is no need to take notes as this page exists along with one that deals with part one. Creating a website that ranks well with the search engines and attracts lots of traffic, takes as much time and effort as creating an unsuccessful or poor quality one. It is also possible to waste time, money and effort, producing a website that may well look good, but is not well formed enough to be indexed by the search engines, with a good enough rating to be seen amongst the vast sea of other poorly coded sites. This is a simple statement, but it applies to as many as 80% of existing websites. At this point an overhead gel is shown, that has the text of the website template that was current at the time of the lecture. As this is hard to see, printed paper copies were passed around.
We start our coding by identifying our pages correctly to the published website standards, that then allows the robots to do all of the hard work for us. The DOCTYPE definition does half of that job by telling the robots what standard of coding has been used... In my case this is XHTML 1.0 strict and it a good idea to aim at that standard. The <html> tag is expanded to include XML if required and the English language is used, the DOCTYPE declaration goes before the <html> and <head> tags, but some meta data that is within the head portion of the document is also required to show the structure of the page, in my case this is two lines (6 and 7)...
These identify that HTML is the coding language, utf-8 is the character set (utf-8 is the recommended one, watch out that Microsoft applications will set this to their own standard) and cascading style information is used. Another, third line (16) discloses that the style information is in a separate document called bees.css. A printed copy of this file was available for passing around... At 14 pages it is far too complex for putting up on a screen. It is also misleadingly large, due to the huge size of my website and the fact that there are still some elements that are left over from the early stages of the website development that are yet to be tidied up and removed. A typical CSS file will be one or two sheets of A4 text, so do not be put off by this example. A CSS file that contains only the elements that are required to service the template file was passed out in printed form. I have and placed the CSS elements in the same order as they occur in the template. This file is called template.css, is two pages long and is available on this link. Some of the elements of this file will be discussed later in this lecture.
utf-8 is the most favoured character set, there are others that are mainly promoted by Microsoft or other software companies, because they themselves use them, but you will gain less recognition from the search engines by using them and in some cases your pages may not look too good in some of the more compliant browsers. <Title> tag... This is the first and most important tag in search engine placement algorithms. Ideally, the Title tag should contain five to ten good, descriptive words and not exceed 70-80 characters. The main keyword should be used, if possible as the first word of the title. Remember, that the title appears as the active link in search engine listings, so you need to make it attractive to humans as well as robots. Line five... <link rel="shortcut icon" href="http://www.dave-cushman.net/ico/??/favicon.ico" /> is a link that will display a favicon in the address window of any good quality browsers. The 'http://www.dave-cushman.net' portion is usually cut down to '..' to indicate root directory. At this point I should say something about browsers... People like Microsoft do not follow the rules, but they do make their browsers tolerant of bad code, simply because there are so many non-experts creating web pages, although such code that has faults may look OK in Internet Explorer, all the robots see is the mistakes and they mark down your ranking accordingly, so it is far better to get your coding 'right' in the first place. There are some other meta codes used on my site...
Meta Tags and high search engine placement... Though Meta tags alone will not give you to a high search engine placement, it's still absolutely necessary to create effective title, description, keywords, and other tags. The "abstract", "description" and "keywords" (lines 14, 15 and 16) are derived from the page content and are usually the last things that are done to complete the page. As they are used or checked by search engines when serving information to a searcher, they are very important and it is worth spending the time to get them accurate, because the search engines make value judgments about their relevance to page content and any 'off page' links. Abstract... I usually use the words of the title and rearrange them into a different phrase that means the same thing. Description... This is one or two longish sentences that form a précis of the whole page. Keywords should be repeated several times in the text. Write your text using the relevant keywords often, even to the circumstance of bad English... We humans are taught to vary our descriptions, robots want to see the same word used many times. Relevant to text... Do not use off-target keywords, every keyword must be relevant to the page concerned. I have seen many beekeeping websites that list all sorts of beekeeping terms, in the hope of attracting business. It does not work this way, only write keywords that are relevant to the page that they are actually included on. Well designed and well formed... Do not waste your time on creating multiple versions of code, one for each major engine. Instead, focus on building one "well designed and well formed" site, that scores well with most of the engines for most of your words. Word combinations or phrases... Do not use keywords that are too general, the word 'bees' is many times less effective than the term 'honey bee'. If you are describing a royal jelly pump, make the keyword 'royal jelly pump' if you used the word 'pump' you may get hits from people looking for a water pump for their car or a pump to run the fountain in their pond, being directed to your site will be an annoyance to them and it is surprising how well people remember such things. Word combinations or phrases, work very well on sites that are technical in nature... Beekeeping is specialised enough to be considered technical. Remember that the delimiter between keywords is the comma, leading spaces reduce the effectiveness. Honesty... Be completely honest, there is no point in trying to fool people into thinking they are getting more that you are actually providing, remember the search engines are becoming 'very smart robots', even though they are just robots. This completes the head portion and we can now go on to discuss the <body> section. At this point a slide is shown of the screen output that is generated by the template code.
Line 18 is an anchor for the top of page button, the code for which occurs on line 43. Lines 19 to 35... Form a table that lays out the header and page title, this automatically adjusts to suit the width of screen that is being used by the surfer. The 'page' CSS element makes it 100% wide. It contains a home button, (line 20), a button that links to the previous menu, (line 21), this is only required because my site has thousands of pages. There is a 'back' button, (line 26), that allows the surfer to return to wherever they came from and the yellow faced button, ('linkbutt' on the CSS file) at right, links to the main A to Z index. (lines 30 to 33). Line 22 is a submenu of links to related pages or other websites and they are reflected early on in the list of keywords at line 15. Line 28 is the image of my name that indicates it is one of my pages. Web Page ContentIs represented in the template by a single paragraph (line 36), but in reality it is all of the text and images that make up the information that you are trying to convey to the reader.
Your aims should be...
If you have developed the structure of your site properly, your search engine optimization work will be much easier and you'll never have to worry about asking the search engines to look at your site, because the search engines themselves stand or fall on the quality of their results, and if your pages help them make their product look better, their robots will soon learn to re-visit your site regularly. <h1> and other header tags... The headlines are more important than the regular body text for both your human readers and for the search engines. Always include your main keywords in the heading tags, preferably as the first words of the heading. Always use <h1> as your heading, if you think the text is too large for the page concerned, modify the point size in the CSS file, but if you use h1 you will get a higher ranking with search engines, than if you used a smaller heading size like <h2>. Image ALT attributes and file name of image... The Alt attributes are used as a convenience for those who surf the Web with graphics turned off, but they are more widely used by robots and are a useful place to get more keyword repeats. The Alt tag text should contain the specific keyword or phrase. Use complete sentences and a different sentence for each tag. The filename of an image should also relate to its graphical content, this also allows for additional keyword repeats as well as making the image easier to find on your computer. Linking to other pages... The page should contain not less than two or three links to other places. A page with only one link will trigger the 'spam' penalty in some search engines. File name... Include your main keyword in the file name of your html page. Separate the individual words of the keyword by hyphens or underscores. This will get you a higher relevancy in some search engines and will make life easy for you when to can't find a particular file. Comment tags... While most major search engines will ignore the text within the Comment Tags, some will index the text present within them. This is an opportunity to use your keywords or phrases thereby increasing the repeats and relevance. As with the alt tags, use complete sentences and a different sentence in each comment. Here are some general tips for writing the body of the page...
The bottom strapThe rest of the lines of code deal with navigation, page revision and some funny little graphics that occur at page bottom, these indicate the standards to which the page is coded as well as how up to date the coding is. We will come back to that later, but first I want to give you some insight into the graphic buttons that light up and give the impression of being pressed. These buttons are important, partly because the website has several thousand pages and is unwieldy to navigate by simple menus or even a site map, but the biggest advantage of them is that they were developed using CSS which is embodied in the bees.css file and so does not distract the search engines. They may be small, but they give a consistent look to all my pages, they work in a consistent fashion that becomes easy to understand as you use them. They may be small and the code that runs them is fairly insignificant, but they represent a great deal of my effort as well as trial, error and re-trial. The effect of lighting up is achieved very simply by viewing different portions of an image according to whether the mouse pointer is over the button or the pointer is over it and the button depressed.
This image shows the complete extent of small 'back' button that is used at page bottom as well as the 'home' button and 'back' button that are used near the top of a page. The left facing arrows of the two back buttons are also progressively moved to the left at each stage and in all three buttons the third image has its borders reversed to make it look as if a normally raised button has been depressed.
This slide shows how the large button image is masked off, effectively looking through a button sized rectangular window to see just the portion that is related to the action of the mouse. The positioning of the image mask is controlled by the lines of code starting with...
The principle shown for the 'Home' button applies to all of the buttons that are of a graphical nature. The A to Z index button works very differently, there is no image involved, but it works by displaying a piece of text against different coloured backgrounds, the angled bezel effect is simply the way browsers render table borders of large width (6 pixels). (Lines 30 to 32 on the template.)
File revisions... (Lines 46 and 47) I record when the page is first written and all subsequent revisions, updates and upgrades, this is a courtesy to readers that might have looked at the page before and shows how diligent you are in keeping pages up to date (some of mine are way overdue for an overhaul). Secondary Text... (Line 48) Extra information that is not an update or upgrade can be added here, but in most cases it is just left blank. XHTML 1.0 Logo... (Lines 50 and 51) This gives the reader an idea of the page code writing standards. JS crossed out... (lines 52 and 53) This is to help me keep track of the removal of JavaScript navigational elements, or in the case of a freshly written page it indicates that JavaScript has not been used for navigation purposes. Coding Standards... (Lines 55 to 58) This little graphic tells me how up to date the template was that was used to create the page. It is a small .gif that keeps track of the progress of modifications in style and layout to old pages, this consists of the legend G8MZY in the colour of the year, as far as the resistor colour code is concerned, along with an issue number again coloured in conformance with resistor codes. (resistor codes are like queen colours, but apply to the numbers 0 through to 9 and are used to identify electronic components. The favicon repeater... This is a small gif that is exactly the same as the favicon, this helps me to keep track of the subject matter of the page. The lecture finishes at this point with a slide soliciting questions and thanking the audience for listening. |
Written... 15 & 16 July 2006, Printing Glitch Addressed... 21 July 2006, |
|
|
|
|
|---|
