Sunday, November 06, 2005

The 30 minute guide to search engine optimization.

What is search engine optimization?
Search engine optimization, generally called SEO, is the process by which you tweak your website to get high rankings in results of search engines like yahoo, google etc.

Why SEO?
The internet is a blind alley. The people surfing the internet do not know where the document they are looking for exists. So they turn to search engine for help.
Most of these people, will visit a site which comes up on the first page. If you are on the first page, its like the search engine saying, yeah this site is good.
So whether you are trying to sell something or just want your blog to be read by many more people, if you need more visitors to your site, you need to do SEO.

How SEO?
How to get a good ranking in search engines? Hmm. There is no clear answer to it. The SE(search engines) have very complex and intelligent algorithms to rank websites. And no one knows what these algorithms are. But some data about the algorithms is known. And we have to base our SEO on that.

Your first steps: Meta tags.
HTML pages have a meta tag describing the page. The content within the meta tag is not visible to the visitors of your pages. But the SE use them to find out about your pages. However these days most of the SE give very little weight to meta tags. This is due the fact that in past web masters used meta tags to fill the page with keywords. So even if the page was about buying used cars, the webmasters used “get rich quick” in meta tag, if they came to know that many people were searching for this. But still some SE use meta tags, you must use your meta tag to tell the SE about your site.

Designing your website.
The SE are bad at indexing pages containing frames, excessive javascript and based on flash. So it might be a good idea to use them sparingly. If you use them, be aware that you are taking a SE hit.

Getting linked.
The technique most of the SE use these days to find out how good your site is to find the number of pages which link to your pages. Think about it, if someone is putting a link to your site, it is as if they are saying, hey man visit this site, its cool. Also SE see, how popular a site which links to you is. If a page which is very popular links to you, you will get more benefit.
So if you want to rank higher, you will have to get links to your site. The easiest and also the hardest is to write good and unique content for your website. If your website is good other people will automatically link to it. So in essence they are helping you for free. Your various pages too should be linked together; this too increases your link popularity.
You must submit your website to the web directories like DMOZ and Yahoo Directories, for them to be indexed. SE give a lot of value for being linked in these directories.
Another method is reciprocal link exchange. In this you look for a website similar to yours, and about as popular. Then you ask the webmaster of that site if they would put up a link to yours site, if you linked to them. Many would agree as it helps them too.

Choosing the right keywords.
You must have an idea of what your potential visitors will search for when they visit your site. No matter how highly your page is ranked, if it does not have the correct keywords, no search engine is going to show it. So, if your web site is about buying used cars, make sure that this key phrase is used many times in your page. Some places which are given special importance by SE are the URL of the page, the heading of the page, bold text. But do not fill your pages with keywords excessively as some SE consider this as spam.

Submitting to SE, link farms etc.
SE have page where you can submit your site to them. However this is seldom necessary. If you have links coming to your site, it will soon be picked up by the SE. So your time is better spent creating content for your website.
Link farms are pages which let you add links to your pages free of cost. It is best to avoid them as the SE know the link farms and don’t even visit them. Even if SE visit them, they are so full with links that your site does not get any value out of being linked there. So at best you do not get any advantage, at worst you are penalized.

Breaking the rules.
There are many underhand techniques used to gain SE popularity. One method used in the past was to make key word text and background as same color. Then the visitors saw something else from the SE. However today’s SE can detect such underhand techniques and penalize it. So it is best to stay away from such techniques.

SEO dos and do nots.
Dos
  1. Create content rich, unique websites.

  2. Get links from similar websites.

  3. Submit to directories like DMOZ.
Do nots
  1. Avoid frames, flash etc if at all possible.

  2. Avoid underhand tactics, like text and background as same color.

  3. Avoid link farms, FFA etc

  4. Don’t waste your time submitting to search engines. Let them find you.

The next steps.
SE use complex algorithm to rate webpages which is constantly changing. The ideas above are just indicators. Visit various websites to find out what the current techniques are.

Some parting tips.
1. Use link:yoururl in google/msn/yahoo search to find number of pages linking to you. Dont worry if you find only some pages linking to you, as SE these days only show a fraction of links they know.
2. Use site:yourdomain in google search to find the number of your pages indexed by Google.

Saturday, November 05, 2005

The 30 Min HTML tutorial.

What is HTML?
HTML is the languague the web is written in. If you want to develop webpages,
this is the first thing you need to learn. Though there are enough Visual editors
a familiarity with HTMl helps as the Visual editors too use HTML behind your
back.


HTML: the tags.
A HTML document consists of two parts: the user data and information on how
to display them. The tags are what tell the computer how to display the user
data. The tags are easy to distinguish from normal data as they are present
inside a pair of < and > signs. For example this is a tag <title>.
Tags are like parenthesis as most of the tags which are opened must also be
closed. So <title> is opening tag and </title> is closing tag.


Your first HTML document.
Let us try to write the simplest HTML document possible. Ok here you go. Type
this in your favorite text edtor and save as 1.html

<html>

<head>

<title>Hello World!</title>

</head>


<body>

Hello World. Again.


</body>

</html>


This would get you a screen like this.



Wow looks nothing like our file at all. That is because the tags have been
used up to display our data. If you noticed the tags we used are <html>,
<head>, <title> and <body>. Also all our tags were closed
using </html>, </head>, </title> and </body>.

Before we move further, lets see the tags a little more.

Any thing between opening <html> and closing </html> tag is the
part of displayable document. The <head>..</head> section contains
the <title> and other tags which we will see soon. The text between the
<title>…</title> tag is displayed in the title bar. The <body>..</body>
will contain most of your content.

If you want to see the document you created, right click inside the web page
and choose “view source”.


Spicing up our pages.

What good is a webpage without any color. So next try to add some formatting
to the page.

Tags have attributes. For example say you want to make the background of your
page red. Now the content between the <body>..</body> tags is the
body. To make the background red, we need to change the “bgcolor”
attribute of body. So our body tag will become <body bgcolor="red">.
Lets modify the page to make it look slightly snazzier.

<html>

<head>

<title>Hello World!</title>

</head>

<body bgcolor="green">

<p ><font color="red"> Hello World. Again.</font></p>


<p><strong>This is some strong text.</strong></p>

<p><em>This is some italisized text.</em></p>

<p><h1>This is some huge heading.</h1></p>

<br />

<br />

<br />

<p><h3>This is a normal heading.</h3></p>

<p><h3><em>This is a italicised heading.</em></h3></p>

</body>

</html>

This is what your page now looks like.






(Only the body is shown, not the title bar.)

We changed the bgcolor attribute of body tag to make our page green. And we
changed the color attribute of font tag to make some text red. The new tags
we added are <p>, <strong>,<em>,<h1>. They modify the
text within as you can see from the screenshot.

Now the <br /> tag is a bit special. Note that we do not close it. That
is because <br /> tag is used to create line breaks. So the idea of between
doesnot apply to it and it is not closed.




Images, Hyperlinks and other tags.

Now lets try to put images in the HTML document. This is accomplished by the
<img> tag. But we will also need to tell the computer where our image
is located. This is done by the src attribute of the <img> tag. So to
put images we need to put a tag similar to this

<img src=”http://i25.photobucket.com/albums/c62/shabda8/fresh_produce.gif”></img>.

And you want to link your pages together? Right? This is achieved by the <a>
tag. To tell about the web page you are linking to use the attribute href. So
our tag looks like

<a href=”http://www.yahoo.com”>. Please note that we had used
the direct links in src and href tag, but you could use paths relative to current
document.

The <ul>..</ul> and <ol>..</ol> tags are used to create
a list. For example you might like to create a list of your favorite singers.
The items of the list are named using <li></li> tags. Lets put our
ideas to good use.

<html>

<head>

<title>Hello World!</title>

</head>


<body >

<img src="http://i25.photobucket.com/albums/c62/shabda8/fresh_produce.gif"></img>

<a href="http://www.yahoo.com">Visit yahoo</a>

<ul>My favorite singers.

<li>Metallica</li>

<li>Bon Jovi</li>

<li>Udit Narayan</li>

</ul>

<ol>My favorite movies.

<li>The Matrix</li>

<li>DDLJ</li>

<li>ET</li>

</ol>


</body>

</html>

After this your page should look something like this.




Formatting your pages.

After all this work, our pages are still pretty badly laid. To lay them like
you want to, you have two options: tables and css.

Suppose we want our page to look like this.


So our table needs to have two rows and two columns. The left column must occupy
only 25% of the screen. So we use the <table>..</table> tag. The
<tr> tag creates a new row. And the <td> creates a new column in
the present row. So to get a layout with two rows and two columns, the table
will look like this.

<table>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

Along with content this is what our whole document is.

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>


<body>

<table width="100%" border="0">

<tr>

<td width="25%"> </td>

<td><img src="http://i25.photobucket.com/albums/c62/shabda8/fresh_produce.gif"></img></td>

</tr>

<tr>

<td>

<strong>

<ul>Sites I visit.

<li><a href="http://yahoo.com">yahoo</a></li>

<li><a href="http://www.google.com">google</a></li>

</ul>

</strong>

</td>

<td>To err is human to forgive divine.</td>

</tr>

</table>


</body>

</html>

And we will get a page like this.






Since we wanted the table to be invisisble and to be the size of the page we
set the attributes width=”100%” and border=”0”.

The other method to layout a webpage is to use CSS. But since this is a 30 min
tutorial, we will skip it.




The final pot pourri.

Let us put all we have learnt to use, to create a really snazzy site.

<html>

<head>

<title>A really cool page</title>

</head>

<body>

<table width="100%" border="0">

<tr bgcolor="#0099FF">

<td width="25%"> </td>

<td>You could put anything here</td>

</tr>

<tr>

<td bgcolor="#0099FF">

<ul>Sites owned by aliens.

<br />

Don't visit them.

<li><a href="http://www.yahoo.com">yahoo</a></li>

<li><a href="http://www.google.com">google</a></li>

<li><a href="http://www.blogger.com">blogger</a></li>

</ul>

</td>

<td>

<table width="100%" border="0">

<tr>

<td bgcolor="#00CCFF"><h1>Can you see the image to the
left?</h1>

<p><strong>This was originally a cat. But aliens got her. And see


her state now.</strong></p>

<p><font color="red">Warning: Aliens may be trailing you
now. Get

out of their way.

<h3>NOW!</h3>

</font>

<p>How to hide from aliens?<br>

Visit Nasa's site. They have information about them.<br>

<br>

</p></td>

<td width="30%"><img src="http://i25.photobucket.com/albums/c62/shabda8/ca3a.gif"></img></td>

</tr>

</table></td>

</tr>

<tr bgcolor="#0099FF">

<td>I am not an alien! I hate them!</td>

<td>

<table width="100%" border="0">

<tr>

<td width="50%">Copyright you. </td>

<td><a href="mailto:you@example.com">Contact me</a></td>

</tr>

</table></td>

</tr>

</table>




</body>

</html>

This is our final page.




Thank for for visiting. I hope I have been able to be of some help.