Thursday, February 18, 2010
How To Validate Inline Javascript in XHTML
Inline JavaScript Validation in XHTML
When a validator or modern browser finds inline JavaScript code in your XHTML code it will try to validate it as ‘parsed character data’ (PCDATA) causing undesired results. To prevent this, the JavaScript code needs to be declared as ‘character data’ (CDATA) as follows:
Note that the declarations are within comments to allow the CDATA to work with older browsers.
Saturday, February 6, 2010
Browser Safe Fonts in CSS
When we design our web sites one thing that we make sure of is that it will look correct in everyone’s browsers on both PC’s and Mac’s. It is crucial that a font is chosen for the webpage that is present on everybody’s computer otherwise the browser will automatically substitute it for one of its own and the whole look of the site could be lost.
Using CSS style sheets, we specify the font-family to use for the web page (or portion of) with a list of (similar) fonts to use:
font-family: font1, font2, font3, generic;
If ‘font1’ is not present then ‘font2’ is used. If ‘font2’ is not present then ‘font3’ is used. If ‘font3’ is not present then a browser generic font is used.
There are four generic styles of font: sans-serif, serif, cursive and monospace. This gives the browser safe fonts as follows:
Sans-Serif:
font-family: “Arial”, “Helvetica”, sans-serif;
font-family: “Arial Black”, “Gadget”, sans-serif;
font-family: “Impact”, “Charcoal”, sans-serif;
font-family: “Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
font-family: “Tahoma”, “Geneva”, sans-serif;
font-family: “Trebuchet MS”, “Helvetica”, sans-serif;
font-family: “Verdana”, “Geneva”, sans-serif;
font-family: “MS Sans Serif”, “Geneva”, sans-serif;
Serif:
font-family: “Georgia”, serif;
font-family: “Palatino Linotype”, “Book Antiqua”, “Palatino”, serif;
font-family: “Times New Roman”, “Times”, serif;
font-family: “MS Serif”, “New York”, serif;
Cursive:
font-family: “Comic Sans MS”, cursive;
Monospace:
font-family: “Courier New”, “Courier”, monospace;
font-family: “Lucida Console”, “Monaco”, monospace;
You can simply copy a line above and paste into your own style sheet.
Web Development and Code Resources and Reference
Here are the main resources that we use in our web development:
Web Development Resources
HTML 4.01 Specification
Title: HTML 4.01 - HyperText Markup Language Specification
URL: http://www.w3.org/TR/html401/
XTML 1.0 Specification
Title: XHTM 1.0 - The Extensible HyperText Markup Language Specification
URL: http://www.w3.org/TR/xhtml1/
CSS 2.1 Specification
Title: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
URL: http://www.w3.org/TR/CSS21/
PHP Function Reference
URL: http://uk3.php.net/manual/en/funcref.php
Zeus Web Server 4.3 User Guide
URL: http://support.zeus.com/zws/media/docs/4.3/ZWSUserGuide.pdf
Writing Robots.txt Files
Restricting Search Engine Indexing using ‘robots.txt’ File
Search engines determine which pages of your website to index by looking in the ‘robots.txt’ file residing in the root folder on your website.
To make changes to this file, firstly get the file either via FTP or a File Manager type program provided by your domain host. Then, after making a backup of the file, edit it in a text editor such as Notepad. If the file doesn’t exist yet in your root web folder, then you can just create a new file in your text editor and then save it as ‘robots.txt’.
There are a number of options (called directives) to allow and disallow certain robots from crawling your site but in most cases you just want to allow all the robots to have a look at your site. So the first line of your ‘robots.txt’ file should be the directive:
User-agent: *
The * says that the rules that follow apply to all robots.
Then, in your file, you list the folders and files (one per line) that you don’t want the robots to crawl (don’t leave any blank lines in the file), giving:
User-agent: * Disallow: /keep-out/ Disallow: /no-entry/ Disallow: /come-in-here/but-not-in-here/ Disallow: /a-folder/private.htm
The robots will not crawl the contents of ‘/keep-out/’, ‘/no-entry/’, ‘/come-in-here/but-not-in-here/’ (or any files or folders within these), and will not look at the file ‘/a-folder/private.htm’. The robots will, however, crawl the root directory, ‘/come-in-here/’, and ‘/a-folder/’ plus any other folders that exist.
This above example is generally all you need. There is another directive called ‘Allow’ that you can use to allow the robots to crawl certain folders and files that are contained within ‘Disallowed’ folders. This directive is not supported by all search engines and so is best avoided if possible. But if you had the following file ‘/no-entry/look-at-me.pdf’ that you did want indexed then the above example can be changed to:
User-agent: * Disallow: /keep-out/ Allow: /no-entry/look-at-me.pdf Disallow: /no-entry/ Disallow: /come-in-here/but-not-in-here/ Disallow: /a-folder/private.htm
Note that it is very important that the Allow directive occurs before the Disallow directive for the folder in question (‘/no-entry/’ in this case) as most search engines go through the ‘robots.txt’ file from top to bottom until a match is found.
Finally, if you didn’t want your site to be indexed at all then your ‘robots.txt’ file would be:
User-agent: * Disallow: /
Once you are happy with the changes, save the file and upload it to the root of your web site.
Redirecting On a Zeus Server
Zeus Page Redirects
When you move a page on your website you will want both the users and the search engines to know where it has moved to and be redirected there automatically. This is vital if you, firstly, don’t want users to get the annoying ‘Page Not Found’ error message from a page they’d previously bookmarked or clicked on in Google and, secondly, for keeping hold of the search engine page rank for the page that you’d spent ages building up.
There are a number of methods available for doing a redirect (such as using META redirects) but the only truly search engine friendly way is to add some lines to your .htaccess file in the root of your web folder.
Firstly get the .htaccess file either via FTP or a File Manager type program provided by your domain host. Then, after making a backup of the file, edit it in a text editor such as notepad. If the file doesn’t exist yet in your root web folder, then you can just create a new file in your text editor and then save it as .htaccess.
At the end of the .htaccess file you will need to add a line for each file/folder you want to redirect in the form:
redirect permanent old-url-path[*] new-url
Each parameter is separated by a space (spacebar) character, where:
‘redirect’ is an instruction that a page has moved.
‘permanent’ implies that the page has been permanently moved. There are other options but this is the only one that keeps hold of your page rank.
‘old-url-path[*]’ is the old path to where the page used to be (The * is an optional wildcard).
‘new-url’ is the absolute url to the new page.
Note the ‘new-url’ can be the path from the root of your web site (eg /folder/file.txt) but to be completely reliable you should include the domain also (eg http://www.yourdomain.co.uk/folder/file.txt) – this can be just copied from your browser address bar.
Here are some examples:
Page Moved
You’ve renamed your page in the root folder from ‘old_file.htm’ to ‘new_file.htm’:
redirect permanent /old_file.htm http://www.yourdomain.co.uk/new_file.htm
You’ve moved your page ‘file.php’ from the ‘subpages’ directory to the root directory:
redirect permanent /subpages/file.php http://www.yourdomain.co.uk/file.php
You’ve spaces in the original page name ‘old file with spaces.txt’, so you need to put it in double quotes:
redirect permanent "/folder/old file with spaces.txt" http://www.yourdomain.co.uk/folder/new_file.txt
Folder Moved
You’ve renamed a folder from ‘old_folder’ to ‘new_folder’ and the files are the same within:
redirect permanent /old_folder http://www.yourdomain.co.uk/new_folder
Domain Moved
You’ve moved all your pages, files and folders from www.old_domain.co.uk to www.new_domain.co.uk , in the .htaccess file on the old domain:
redirect permanent / http://www.new_domain.co.uk
Multiple Pages to Single Page
You want all pages on your domain to redirect to the home page:
redirect permanent /* http://www.yourdomain.co.uk
You want all pages in ‘folder1’ to go to a single page ‘page.htm’:
redirect permanent /folder1/* http://www.yourdomain.co.uk/page.htm
You want all folders starting with ‘folder’ (eg ‘folder’, ‘folder1’, ‘folder2’, ‘folder345’) to redirect to ‘new_folder’:
redirect permanent /folder* http://yourdomain.co.uk/new_folder
Once you are happy with the changes, save the file and upload it to the root of your web site. Test thoroughly the changes by typing the old web address into your browser and making sure it redirects to your new page.
NB. Zeus servers are different to Apache however in that they cannot deal with redirects where the path name, that you are wanting to direct, contains file.php or file.html etc. ie if you try and set up the folder to page redirect as shown above but with a file name in it it will not work.
redirect permanent /index.php/folder1/* http://www.yourdomain.co.uk/page.htmwill not work.
We have searched the internet but cannot find the answer to this. If you know how to achieve this on a Zeus server please let us know.
Monday, January 25, 2010
Website Design Checklist V - Using Keywords
Once you have worked out your keywords or phrases for each page ensure you have done the following.
Have I used my keywords properly?
Yes if you have;
1. Put your Keywords for that page at the BEGINNING the title of the page and have removed the word HOME from the title of the home page. Unless say you are an interior designer that word does not help your SEO one bit!
2. Put your Keywords for that page in the main heading (h1) for that page.
3. Used your Keywords for that page in Alt attributes for any images on the page.
4. Used your Keywords for that page in anchor text of internal links pointing to that page.
5. Made your page’s Keywords bold and italic within the page content a few times. Don’t overdo it.
6. Used your page Keywords the the beginning and end of the body text.
7. Used Keywords in the folder names leading to your page instead of generics like subpages etc.
8. Used Keywords in the URL for your page.
Website Design Checklist IV - Structure
1. Does your website have a robots.txt file that correctly limits the access of search engine robots to say login, search results pages etc. Have you checked the robots.txt file using Google Webmaster Tools. Ensure that any pages you do not want index have the meta tag noindex.
2. How often do you update the website content? Try to update at least a part of the website on a weekly basis, diary this to ensure weeks do not pass without the website’s content being updated.
3. How many pages are there on your website, the more pages of useful updated content the better. Visitors and search engines robots will keep coming back for more.
4. Have you constructed a sitemap and submitted it to Google via Webmaster Tools. Check with Webmaster Tools that there are no problems with the sitemap and remedy any errors.
5. Does your website have either a search facility or, a user as opposed to search engine, sitemap?
6. Is it easy for visitors to contact you, do you have full contact details on your website offering a number of options eg online form, direct email, telephone number, address etc. Remember that all businesses in the UK are obliged to provide full contact details on their website. Providing contact details will help you appear in local searches.
7. If necessary does your website have details of your privacy policy, terms and conditions of business etc.
8. Does your website have testimonials from clients, examples of your work etc to increease visitor trust.
9. Check that you are not duplicating the same content over several pages of your website, if so remove it, and check that you do not have multiple urls pointing to the same page.
10. Check your website’s page loading time under labs in Webmaster Tools, if it is too slow take measures to decrease the load speed by compressing images, CSS etc and using gzip compression if allowed by your server.
11. Look at the popularity of your website pages, not just the home page. If there are few links to inner pages try and build links to those pages.
12. Ensure that your website has links to any social media websites you participate in for example, Twitter, Facebook, LinkedIn and have icons that allow individual pages to be notified to Digg or saved as bookmarks etc.
There are other posts on this blog and our main SEO4all website dealing with many of these issues.
Sunday, January 24, 2010
Web Design Checklist III - Content
Content
- Content should be UNIQUE, useful and grammatically correct.
- Amount of content - at the barest minumum you need to have at least 300 words per page.
- If you have a lot of textual messages in graphics do you have a textual equivalent? Search engines and screen readers for people with sight problems cannot read the words within graphics.
- Do all graphics have alt and title attributes completed with useful descriptions but with no keyword stuffing.
- Ensure content is updated to take into account any seasonality in searches.
- Avoid using stop words where more useful words (possibly keywords) can be used instead.
- Ensure your content contains the types of phrases that people searching for your type of product might put into a search engine.
- As Google has now introduced its Answer Highlighting ensure that your website's content includes the types of questions searchers may put into search engines AND the answer.
- Check your website's content regularly to ensure a hacker has not inserted text or links.
- Do not have hidden content.
- Do not overuse keywords, no one keyword should have a density of more than 8% of the page. Use Webmaster Tools to see which words occur most frequently on your website and if these are not the words you wish then rewrite your copy.
Web Design Checklist II - Website Architecture
Website Architecture
When constructing your website bear in mind the following points and check your website out to ensure it complies with all disability requirements and that it is constructed well so that it renders well in different browsers and is easily indexed by search engines.- URL structure - do the urls use sessionids etc or are they search engine friendly, see Search Engine Friendly URLs;
- HTML structure - make sure pages are constructed using divs not tables. Tables are only used now for tabulated data. Do not use frames, avoid using Flash etc, see Search Engine Friendly Websites;
- Use external CSS and JS files;
- Navigation - is it the same on every page and is it clear. Every page on your website should be no more than 2 clicks from the home page.
- Website accessibility - test your website so that it complies with all disability and accessibilty requirements, see SEO Tools;
- Use of rel=canonical, see Using rel=canonical;
- Coding, check your HTML and CSS is compliant, see Website Tools;
Web Design Checklist I - Domains
Choosing Your Domain
1. Domain age - older domains have more credence as spamming websites are normally short-lived so older more longstanding domains are indexed better. Likewise if there is less than a year left until you need to re-register the domain consider renewing it immediately;
2. Domain registration information hidden/anonymous - serious businesses would not leave their information hidden to the public;
3. Type of domain - in this country you will find that .co.uk domains are indexed faster than .com so unless you have an international business buy a .co.uk domain.;
4. Domain past owners - if you are buying a “second hand” domain check very carefully as to how many previous owners there have been, how often did the owner change, where was the domain hosted, what business was carried out on the domain. You do not want your website to gain the poor reputation of a business previously hosted on the domain.
5. Keywords in the domain - try and have at least one keyword in the domain, separate any words using hyphens as search engines will see the domain as being made up of separate words as opposed to one long meaningless string. If you do use hyphens avoid having more than 1 or 2 in the domain name.
