Today most of the sites are based on CSS. There are many reasons why CSS have become so popular some of them are easy maintenance of website, clean html code, easy updates, increase download speed, reduce bandwidth and most important improves search ranking ;
You must be wondering how it helps in ranking? Here’s the explanation….

Generally a page of site get index when the spider/bot of search engines crawls content of that page, When a search engine, such as Google, sends a spider to crawl your website, it looks through the code of your webpage they actually read certain elements of your HTML code. Certain HTML code holds more weight than other tags. So it is necessary to have a clean and readable code which is easy to understand by spiders, if there are unnecessary text and tags in your HTML file, spiders will have to struggle to understand that page is related to a particular search keyword. Using CSS you will be able to change the code layout without destroying the actual visual layout and will get an clean html code which will result to better search engine rankings.
eg .

You can easily make the main content of your site to show up above the header or navigation menu in the code of your website; thus will help to show search engine crawlers the importance of your content.

Today major search engines such as: Google, Yahoo and MSN loves to see your content; the text, not the clumsy code. Using CSS you can have pure and clean food for spiders.

Google offers several operators which provides useful information about your site such as no of indexed pages within your site, pages that links to your site and many more. In a Google search box, just type the operator and your domain name.

Operator                 Description                             Search format

site:              Indexed pages in your site                   site:www.yoursite.com

allinurl:          Pages that refer to your site’s URL        allinurl:www.yoursite.com

link:              Pages that link to your site                    link:www.yoursite.com

cache:           The current cache of your site               cache:www.yoursite.com

info:             Information we have about your site       info:www.yoursite.com

related:        Pages that are similar to your site             related:www.yoursite.com

There are many other different operators you can use such as allinanchor, inanchor, allintext, intext, allintitle, inurl etc. Using above operators you can have the required search results. Typically these operators modify the search in some way, or even tell Google to do a totally different type of search.

Introduction : Internal Linking.

Just building links for your main web page won’t get your website to come up on top in major search engines. You need to get the search engine spiders to deep inside your website. For that you need strong website navigation. Most people ignore this part of SEO. Hope you have not :).

It also helps your visitors to navigate through your website more easily and also help the search engine locate the contents of your website. This article will help you in each element of navigation for your website.

Below are the sections this article will cover:

- Simple Hyper Text Links

- Graphical Navigation Icons or Buttons

- JavaScript or DHTML Dropdown or Pull down Menus

- Animated Gifs and Flash Navigation

- Image Map Navigation

- Framed Navigation

Let’s begin with the basics first, we need to understand what links are. There are two types of links that are into use, absolute and relative links. An Absolute link is used to define specific locations of s webpage and a relative link is used for specifying a location of a webpage within a major directory.

Example of an absolute link: < a xhref="http://www.webhosting.uk.com/support.php" mce_href="http://www.webhosting.uk.com/support.php" >Webhosting Support Information< /a>

Example of an relative link: < a xhref="../support" mce_href="../support" >Webhosting Support Information< /a>

*** Advisable to use absolute link

Now let us learn something about Simple Hyper Text Link:

According to the American Dictionary Hypertext is defined as “a computer-based text retrieval system that enables a user to access particular locations in Web pages or other electronic documents by clicking on links within specific Web pages or documents.” It is one the simplest navigational elements that you can use for building an internal linking structure. All that you need for a hyper text link is a set of words that can be used as an anchor test for the URL. For example < a xhref="page.html" mce_href="page.html" >anchor text< /a > A person will be directed to the page “page.html when he clicks on the anchor text.

People nowadays think that more flashy your website is the more good it looks, but the idea is to keep it simple as it leads to less work for the search engine spiders [though search engine spiders are not real people they are designed by humans so the basic ideas of less work is fed unintentionally into the spiders who can blame them for that ;)]. A search engine believes in a simple logic that anchor text is used for pages which are IMPORTANT to you. So make sure that you have hyper text links for your major pages with specific keywords.

However let me warn you too much of hyper text links in your website also has its disadvantages:

-They make your webpage look less attractive.

-Hypertext links create blue underlined text and if used too much will make a page illegible which is by default.

-It can also interfere with the Webpage keyword density if overused.

So have a balance and understand the benefits and disadvantages of hypertext links. Use it as a secondary navigation system. To create navigation for your website use CSS which will help you to create attractive looking hypertext links as Primary Navigation element.

**One more webmaster tip for you SEO wannabeez, if you create your sitemap with hypertext links and point your “file not found” errors (or 404) to the site map. Also you can use a breadcrumb trail as an additional linking strategy to help your user to keep track of where they are in your website. This also helps to increase the keyword rich anchor text.

Graphical Navigation Icons or Buttons

Graphical navigation Hmmmm pictures have been helpful to describe everything since the stones ages even before text was originated. So our mind has evolved to understand them much better than text so this type of linking is as popular a hypertext navigation. Graphical icons or buttons is a graphic generally GIF or JPEG formatted image that links to a URL i.e absolute or relative. Example

< a xhref="page.html" mce_href="page.html" >< img xsrc="pics/button.gif" mce_src="pics/button.gif" > . where < img xsrc="pics/button.gif" mce_src="pics/button.gif" > replaces the anchor text. “img” stands for

image and “src” stands for source which says that image source is found in the directory pics and is

named button.gif.

Now the benefits of using this navigation are that where high-impact fonts and colors are not supported through regular HTML, increasing the look of the page and making it more users friendly.

There are also disadvantages of using this navigation as Spiders are not evolved the way humans have and they cannot understand images. So the solution for this is to use alternative text tags within the source codes on the image. You can embed the alternative text into the above example as:

< a xhref="page.html" mce_href="page.html" >< img xsrc=" pics/button.gif" alt="Short Text Explaining Where the Graphic Link will

Take you">< /a>

The alt tag adds the capability to help the search engine understand the meaning of the image. Its also useful for people who are visually impaired who use screen readers to understand the website. So use specific keywords in your alternative tag area.

Also there are more concerns when you are using this navigation method. When using mouseovers, “a JavaScript that automatically switches the image on the screen to a different image when the end user’s mouse’s over the graphic” this option changes the color or size of the image to show the difference. The problem is with the mouseover affect and not the image.

Let’s take a look at the following example of a JavaScript that enables the classic mouseover affect:

onmouseover=”changeImages(’nav_page’, ‘pics/nav_page_mouseover.gif’); return

true;”

onmouseout=”changeImages(’nav_ page’, ‘pics/nav_page.gif’); return true;”>

Page

A simple code has changed into a lengthy code now so let understand it better.

Start with “onmouseover” and lets begin to read: On mouse over of the image (entering the image area), initiate to change the image to nav_page_mouseover.gif from nav_page.gif. On mouse out (leaving the image area) return the image from nav_page_mouseover.gif to nav_page.gif. Most search engines have trouble reading the code within the JavaScript initiated mouseover scripts. It is thus best to try to not use mouseovers or if you use mouseovers make sure to use hypertext links as a secondary internal linking structure.

JavaScript or DHTML Dropdown or Pulldown Menus

Pulldown drop menus are a favorite of mine for just a simple reason. I like the way the fall down and go up. Sometimes I just play with these when I have nothing to do. Sorry enough about me now let get going on the details about Pulldown and Dropdown menus. There are two types of dropdown or pulldown menus. JavaScript pulldown and the second type is DHTML dropdown. They are widely used.

The JavaScript pulldown menu allows the user to quickly jump from one section to another section and make it feel like a breeze. The only back draw of this type of navigation is our ever learning spiders of search engines cannot understand these URLs within the JavaScript. It is always advisable to use and alternate navigation with this navigation. It’s wiser to use hypertext links as primary or secondary navigation when utilizing JavaScript pulldown menus for both usability and search engine visibility.

The DHTML dropdowns menus are great to look at and a great way to fit subsections into main section navigation.

** Caution please use this navigation if you wish to choke the spider.

TO help the Spiders you can use alternative hypertext link navigation throughout the homepage as well as the “noscript tag”. The noscript tag looks like . The noscript tag enables browsers with JavaScript disabled to display an alternate form of the Web site that is contained within the tags. This tag is often abused by “Spammers,” and should only be used on JavaScript intensive sites. Search engines do use the content and links within the noscript tag when indexing the contents of a site. So the noscript tag is a good method of utilizing the pulldown and dropdown menus and providing the Web visitor and search engine an alternative method of accessing your site.

Animation and Flash Navigation

Macromedia hats ofd to you guys for your flagship product which has redefined limitations for Web. Now with flash you can take your web design to levels which were earlier impossible. Web designers can create, publish and transmit high definition, motion filled, colorful animations to a broad Internet base without running into the pitfalls of bandwidth limitations and browser support. Internet will never be the same again.

Flash though very useful in terms of giving your website a nice look is a nightmare for search engine spiders, so its better to also create a simple but text rich HTML Web site for spiders and for Web users that prefer the less eye-candy media. You can create a splash page

which gives the user the option to choose between HTML version or a Flash version. The Spiders will be saved from choking as they will run for the HTML version to save there lives and the users will go for the Flash version. One more way to minimize the negative effects of Flash are to use partial flash site and partial HTML site. You get the best of both worlds. The Spiders will be saved from choking as they will run for the HTML version to save there lives and the users will go for the Flash version. The third method to combat the illegibility of the Flash files is to use the noscript tag or noframe tag when using a flash only site. This is however not the best method and one should only use these tags when there is no other option.

Image Map Navigation

Image maps are assigned to single graphics that enable Web users to access pages of your Web site by clicking on a portion (X and Y coordinate) of the graphic. Images maps are used for two primary reasons,

(1) To reduce file download size and

(2) To simplify the coding of the links within complex graphics.

Let me first explain the first reason given, to reduce file download size. One image takes less time to download then five images. For example you can have one single image with five links within them. That one image might be 10 kb. In contrast five images of the same “on” image might take up a total of 14 kb. For example, each smaller image will have to be published at 3kb each, adding up to a total of 14kb as compared to the same one image totaling 10 kb. The second reason given, to simplify the coding of the links within complex graphics, means that if one has a graphic with links embedded throughout a none uniform design, it is extremely hard to program the links without using an image map. To embed a link in one of the five single graphics, the programmer would have to cut out each one and reprogram the site to lay out the graphics in a uniform manner. This can be very challenging for non-uniform graphics. With image maps you can specify the X and Y coordinates and determine on a click of a particular X and Y coordinate where the user shall be taken.

Now that we understand why image maps are used, let’s discuss them in search engine optimization terms. Images maps are complex and look something like this:

alt=”page one”>

alt=”page two”>

You can see that there are complex numbers and variables that drive where the user shall be taken. For this reason image maps are not search engine friendly; and if used, one should always use a search engine friendly secondary form of navigation - like hypertext links.

Framed Navigation

There are many sites on the Web that are built with frames. Frames tend not to be search engine friendly for many reasons. One of the most obvious reasons is that it gives search engine spiders a challenge determining which file is the primary site content.

***Wisecrack [Finally somewhere the spiders start thinking and doing some work on there own rather than depending on us to make there life easier think it should be the other way round they should make our life easier].

Think of a framed site as a site that has many sites within it. So one might build a site in frames to leave the side bar navigation in a static position on the left, while giving the Web user the ability to scroll up and down on the right for the page with the content. Normally, when one clicks on a hyperlink within the left side frame box it will generate an action to replace the contents of the frame to its right. However, search engines do not know to look in that right frame and it stays within the navigation frame missing out on all your content. As you can see, the more frames utilized within a site the less search engine friendly the site is.

There is an acceptable standard available that can achieve the look of frames while making your site much more search engine friendly. This standard has been released by the World Wide Web Consortium (also known as the W3) and is known as CSS or Cascading Style Sheets. I will not be getting into the specifics of CSS in this article.

If you insist on using frames, there are some guidelines you should follow to help increase the search engine spiders’ ability to index your pages.

- Make sure that you include links from frameset to your internal pages

- Try to submit each internal page to search engines

- Try to obtain links from external sites to your internal pages

- Include text links at the bottom of each page

- Include breadcrumb trail at the top of the page

- Include text links within body text

- Build a site map that links to each internal page

- Utilize the noframe tag

Conclusion

Finally we are done I don’t need to do anything now, it’s now you who has to start working on the navigation of your website, its rest time for me now.

As you can see, there are many methods of performing an internal linking strategy, each with its pros and cons. While each method has its advantages, I always recommend using secondary hypertext links at the bottom of each page and also recommend building a simple site map that contains a link to each internal page of your site.

As a professional webdesigner you should always make your visitor to move smoothly through your site. They should be aware of where they are and where they can go.Your website should be flexible. You can achieve this by implementing proper navigation scheme for yor site.
Your navigation can be considered as a road map for your site. If your site is poorly built for navigation then there are much chances of loosing visitor, if they get lost in your site.
Tips for Web site navigation :
Title: All navigation links should have a short and descriptive title making it easy for the user to understand where it links.

Importance : The primary navigation should not have more than 6-7 links. Keep only the most important links in the primary navigation and leave the rest for the secondary navigation.

Uniqueness : Always try to make your primary navigation links more unique by using some graphics or different links style.

Alternative link : If using graphics or javascript links, a text alternative should be available. Some people might have the graphics turned off or javascript disabled when browsing the Internet. In such cases an alternate option should be available.You can have a text menu and the bottom of the page could be included.

Keep it minimum: On every page there should be a reasonable number of links. Pages with 20-30 links are harder to use than pages with 10 links. Visitors don’t have the time to click on all of them to see if they are interested in the information secluded behind them. The best approach is group similar links in categories and let people discover them click upon click.

A Gravatar stands for globally recognized avatar.
Gravatar are simply small (static or animated) image of aroung 80*80 pixel generally found at weblogs.
These small graphic are used for identification purpose, so visitors can make you out easily just by looking at the gravatar.
These graphics are placed beside your name in weblogs. Not all weblogs provides facility for uploading of these gravatars.
These are similar to Avatar which is part of todays forums.

Near future would be of talking avatars which can boost your online presence and would increase your traffic. Now-a-days these are becoming more popular.

CSS is an acronym for Cascading Style Sheets, invented in 1997, CSS are just now starting to be widely used among browsers and Web developers are learning to be more
comfortable with them. It used to describe how an HTML document should be formatted. The primary purpose of Cascading Style Sheets is to separate the content of a webpage from it’s layout, therefore facilitating an easy method of adapting the pages’ content to the device on which it is displayed. Styles define how to display HTML elements. Styles are normally stored in style sheets while external style sheets are stored in CSS files. Style sheets are a very powerful tool for the Web site developer. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These Style Sheets can then be applied to any Web page. CSS is also used in applications built using XPFE. CSS is typically used to provide a single “library” of styles that are used over and over throughout a large number of related documents, as in a web site. CSS is considered a web standard as it is developed and maintained by the W3C. Like HTML, CSS has different version numbers, called levels.

When creating a web site in HTML it is important to remember that popular browsers such as Microsoft Internet Explorer, Mozilla Firefox, Opera and others are capable of displaying web pages even if their code is not 100% compliant with the accepted standards for HTML as set down by the World Wide Web Consortium (W3C).

So, while a page may look fine onscreen, it could be riddled with HTML errors causing serious obstacles for the search engine spiders who visit your site to index it.

HTML coding errors are especially common with WYSIWYG (What You See Is What You Get) design programs such as Microsoft FrontPage or NetObjects Fusion and, since this type of software is often used by web designers with little or no experience of HTML, most of the time they can go unnoticed and thus cause long-term damage to a site’s search engine performance.

For those designers with only a minimal knowledge of HTML this can present an almost invincible problem since they cannot tell compliant code from its non-compliant counterpart.

But there’s nothing to worry, the W3C site includes a number of valuable tools designed to help web designers check their sites for any flaws and make the necessary corrections.

The most important among these are the HTML Validator and the Link Checker.

The HTML Validator detects and lists any coding errors present within a page and lists them in detail, thus enabling even designers with minimal HTML experience to make the necessary adjustments.

The Link Checker examines all links within the page both to other pages in the site and to images which are to be displayed onscreen.
Once again this enables the designer to pinpoint bad links or broken resources and take the required steps.

It should be noted that most quality web design programs have inbuilt link checking utilities which perform the same function, so a little reading up on your software can be of great help.

What is the Google Sandbox?

Google Sandbox refers to a hypothetical mechanism that factors a website’s age (or lack thereof) into its ranking on popular keywords. It is an alleged filter placed on new websites. The Sandbox acts as a de facto probation for sites, possibly to discourage spam sites from rising quickly, getting banned, and repeating the process.

How to find out if your website is sandboxed?

Finding out if your website is ‘Sandboxed’ is quite simple. If your website does not appear in any SERPs for your target list of keywords or if your results are highly depressing even if you have lots of inbound links and almost perfect on-page optimization, then your website has been Sandboxed.

Why do you get sandboxed?

Some sites have gotten out of the sandbox in a week, while others can take up to a year or more. No one knows if any one contributing factor gets you out sooner rather than later. Some point to the age of inbound links, or the frequency with which your site acquires them. Some say that getting too many inbound links too quickly appears artificial, and is flagged as spam. But others argue that Google can’t know how fast a site should acquire links. A website that received national news coverage, for example, could acquire hundreds or thousands of links in a day. It’s likely that no one outside of Google fully understands how the sandbox works. The problem has been noticed and discussed for nearly 2 years, and no one has given a satisfactory answer. What’s crystal clear is that Google has made it so complex that it cannot be reverse engineered.

When the Internet first began gaining popularity, W3-Compliance wasn’t as necessary because there were fewer browsers, fewer users, and overall fewer technologies in use. With the growing popularity of the internet, new developmental tools are created daily. With these tools come new challenges - marketing, design, cross-browser compatibilty, etc. All of these can be a daunting task for those who aren’t well-versed in the W3C Standards.

There are numerous technologies used by programmers like ASP, PHP, and Javascript to name a few. W3 has a set of standards for both XHTML and CSS, and making a website W3-compliant ensures that all viewers will see the site exactly the same way no matter what browser they’re using. Validation also helps with Search Engine Optimization (SEO) because clean code means easier search-engine spidering.

Cascading Style Sheets, or CSS, is a technology often used in sites with many pages to make aesthetic changes easier. The style sheet is an exterior file that runs interdependently with the HTML of a site. The style sheet serves as a template for the entire site’s color and font schemes, while also controlling borders, sizes, and more. Being able to edit a single file, instead of 100s of changes in many files saves a lot of time. Validation is essential to get the most out of a website. A user can upload or copy/paste their CSS file to the W3C site, and they’ll be given a list of any errors it contains.

Another of the technologies becoming more popular is Extensible Hypertext Markup Language, or XHTML. XHTML is an extension of HTML 4.0. XHTML conforms to standards moreso than HTML. As such, it is more search-engine and user-friendly:

- XHTML documents conform to XML. XML Tools can double as XHTML tools.
- XHTML is an extension of HTML 4.0. It is more user-friendly and streamlined than HTML.
- XHTML is a combination of HTML and XML in that it can run scripts and applets that use both the HTML and XML DOM (Document Object Model)
- As XHTML grows, XHTML 1.0 documents will be able to interoperate among other XHTML documents making it a more browser transitional language.
(Source: www.w3.org)

Using the standards of web development lined out by the W3C is imperative for users to get the most out of a site. Often, making a webpage W3-compliant is the first step of SEO, a marketing tool to get the most out of your advertising money. Validation is easy, and can be completed if a user has a basic knowledge of HTML-editing and FTP. Using these tools, coupled with the set of W3 standards can save a lot of money and help the site’s overall functionality.

The page Title

The title of your page can be seen in the top left hand side of your browser. The title of each page should be relevant to the information on the page and be unique for each page. The title is a very important part of the web page and must be treated accordingly.

Meta Descriptive Tags

The Description meta tag is normally used to describe your listing in the search engines. It is important that this description entices people to click on your link. Have the same listing description for each page is not gonna help so make sure each page has a unique description.

Content

Unique content is king. The more relevant content you have on your website the better it is. Make sure that the topic of that page, the page title, paragraph headings and text relate to each other. The content should be well written and semantically correct. Headings actually have an order within the code, so ensure that this rule is used. It is the content that will be catalogued by the search engines and this is how they will understand what each individual page is about.

Sitemap

It is important that the search engines can see all your pages. A good way of doing this is to add a sitemap which is accessible from the homepage. This sitemap will list all your pages by the topic of that page allowing a search engine to find every single page on your website.

Navigation links

Ensure that your menu links contain the text of the topic or page they are linking to. Do not forget the links that are within your content. Try and use relevant text with your content to link to other pages within your website.

Dynamic page names

Search engines have difficulty reading sessions (sessions are codes appended to the web address to identify users on the website). If you have session variables on your site, search engines may not index your pages.

Fast loading pages

Are your pages quick to load. If they are not the search engine may not hang around to index them. The average age size should be less than 110Kb. If it is not then it is important to identify what is increasing the size of the page and correct it.

Web Standards

Have you updated your website to the latest web standards. The Internet is a forever changing media and standards have been suggested by the World wide web consortium (www.w3c.org) . By rebuilding a website using the latest standards you have the ability to separate the content of the website from the design. Benefits of this include being able to supply search engines with clean text, not blurred by coding. Also the ability to change design more regularly becomes affordable.

Summary

These are on site areas to look at and will allow the search engines to determine what your site is all about. Never forget the need to look at off site promotion!