Open book of colour charts

Website Source Code

In case you came to this page first, notes below relate to this HTML example page. The two combine to offer details on using website source code to help visitors and search engines. As an incidental point, the message in the image above is also a great way to think about code, tidiness makes life easier.

  • Doctype Declaration - The first two lines in the example are the Doctype declaration. A missing, or incorrect Doctype puts browser software in quirks mode and can cause interpretation problems. There are various Doctypes, the point is to work accurately to the one you choose.
  • The Head Section - between <head> and </head>. contains information for browsers or search engines but is not visible to website visitors. You may see more lines similar to those between the <meta> and </meta> tags, there are many variations but often not needed. A number of meta tags have not been officially adopted, or restate the default.
  • Keywords Tag - beginning <meta name="keywords"http://www.websitereport.org.uk. was intended to provide search engines with an indication of page content. Unfortunately, this was abused by people using repetitious, or long entries. The tag is not now used by major search engines. Web developers often include a few keywords, for minority engines, or a reference when they come back to the page.
  • The Title Tag - between <title> and </title> forms the phrase seen on screen in browser tabs and in most cases, the top line displayed in individual search results. Useful in catching the eye of searchers and a good title tag is helpful for search engine indexing:
  1. Each tag should accurately describe each page. Using the same one from page to page, or throughout a website is little use to visitors and poor practice for search engines.
  2. Entries such as "<title>Page 5</title> are unhelpful, <title>About Us</title> little more so. Choose a page specific title, which helps search engines offer the page to visitors you want to see.
  3. <title>CSS Navigation</title> is at least descriptive but <title>CSS Navigation - Drop Down Menus</title> could help indexing and those searching choose the page.
  4. Whether to use a shorter or extended title depends on each situation but going over the top is not a good idea. Avoid repetitive wording, or too many "useful" words in title tags, as likely to hinder search progress as help.
  • Description Tag - starting <meta name="description"http://www.websitereport.org.uk. is a source for the wording under the title line in each search result, page relevance and an accurate description are again essential. Otherwise the search snippet may be drawn from other on page sources, or as with the title, from the Open Directory Project (DMOZ). Whilst the description tag has no direct effect on rankings, this can make potential visitors take far more interest.
  • Structural Header Tags - Within <body> and </body> You see text between <h1> and </h1> or <h2> and </h2>. This is a website's headline text, normally displayed by browsers in larger fonts but you can use your own styling. The example is a short page, in normal circumstances they might run down to <h3> or further and having more than one of each tag is fine. Ideally but not essentially in proportion to the tags numerical name i.e. two h2, three h3. Going beyond this is rarely needed, visitors want to pick prime areas, not choose from dozens. So don't worry about having them all, concentrate on descriptive, relevant and helpful entries.
  • Images Alt Tags & File Names- <img src="images/code_editor.jpg" alt="Screenshot of HTML editor" title="" is used to insert an image in the page, which a search robot can not see. They use words within alt="" (the alternative text) to help them understand the image, along with visitors who have images disabled, or are visually impaired and use a screen reader to listen to text. For their sake and search engines keep tags short and descriptive, if this description includes words relevant to search, can only help. The same applies to the page, surrounding text and image file names, code_editor.jpg better than img_045.jpg. Alt tags, context and image names help search engines correctly index images and these can draw traffic.
  • Using Title Tags - You will also see a title="" tag in the image line, which shows a description on screen when a visitor hovers their mouse over the image. Whether this is desirable is a design decision and having content in title="" is not relevant to search indexing. The reason the empty tag exists is to stop Internet Explorer displaying alt text in place of a title, as the example stands, nothing is displayed. Alt and title tags can also be used on links, the title tag often on a menu item to explain the purpose. Again, more a design issue than one of search optimisation. The best contribution in that area is applying an alt tag when an image is used as a link.
  • Links & Anchor Text - The matter of links is an important aspect of search engine optimisation and will be dealt with separately. Just be aware that whilst freely given external links from other relevant websites are of value, internal links are also critical. The visible part of a link is known as the anchor text, using this well helps visitors and search engines understand a website. As an example, if you were linking to the Home page, you might choose "read our introduction to Website Dispute Mediation" rather than "read our Home Page"

The same thought on relevance applies to link text as to other sections. The temptation to try too hard is understandable when success in search is important but search engine development, abuse and the developing web have seen search engines become more subtle in the way they analyse websites.

They are essentially on your side, good search returns help their business. Work with them fairly and optimise a website to reflect the content. Then you can focus on content, please visitors and turn them into customers. If you wish to read more on this theme, try our list of current website help articles.