Mvied Designs

There are many techniques that web developers use to better their SEO. If you follow these simple steps, you will be ranked very high on every search engine except Google. Google is the ONLY search engine that is difficult to rank high on unless you have a very unique name to your website that people will search for directly.

1. Place keywords everywhere except the keywords meta tag. Say what? Yeah, that’s right. Only Yahoo! uses the keyword meta tag now. Not a single other search engine does. Honestly, Yahoo! is so easy to rank high on, there’s no reason to even use keywords anymore. Instead, place your keywords in places that truly matter. The URL is quite possible the best place to put your keywords. For instance I did a website for work and its purpose is to sell heavy duty truck parts. Guess what we called the site: heavydutytruckparts.com. Guess where it ranks on every search engine except Google when you search heavy duty truck parts’: Page numero uno. If you can’t manage to get keywords in your URL, place them in your title tag, description meta tag, and/or your header tags (preferably your h1.)

2. Organize your Title tag. Search engines look at titles in order from specific to general. Most people type out their title tag like this: ‘Site name > Page title’ or something similar. This will in fact drive less traffic to your website in the case of an informative website. If you have pages with tutorials or blog posts, you will want the more specific title of the page to be first so that it will rank higher when people search for those keywords.

3. Use a different description for every page. The worst thing you could do is use a static description for all of your website’s pages. With each page of your site, describe exactly what that page is about. If you’re like me and run a blog, writing a description for a specific blog will bring search enginge users when they are searching for content that relates to what you’re writing about. If I described my site as “Mike Ems’ blog,” nobody would ever find it because nobody cares about what I have to say.

4. Use valid X/HTML and CSS. Just do it. Search enginges like it. When crawlers inspect your site, they pay special attention to your header tags and classify parts of your page based on what heading they fall under. Therefore, your primary content should be under an h2 (as the title of your website should be the h1) and then have sub-menus and side navigation (if you have it) should be in h3′s or lower. This will help the search engine clarify what is more important on your website.

5. Ensure that your website is accessible. Ensure that your website is safe for screen readers and uses shortcut keys. This does help your SEO, but more importantly it helps your users. There are many other techniques to increase the accessibilty and usability of your website. Another example would be to use buttons that can increase and decrease the font sizes on your site. Just because you can read the font at 0.8em doesn’t mean the next guy can. Alternate stylsheets are also a very big priority. If you have a website with a dark background and light text, this can hurt the eyes of some users. You should always have an alternate stylesheet for these users even if it just a minimalistic black and white stylesheet. If you don’t offer this option, it could easily drive users away from your website.

6. Use SEO friendly URLs. This is most important when you begin using aserver-side programming language such as PHP to create web pages. If you use techniques like me and your URL’s end up looking like this: ‘http://www.example.com/index.php?p=about’, then there needs to be some changes. Search engines really don’t like URL’s like this and sometimes won’t even follow them. Using apache mod rewrites, you can easily rewrite your URL’s to be more SEO friendly. The link above could be changed to look like ‘http://www.example.com/about.html’ or ‘http://www.example.com/about/’. Either one of these URL’s would make the search engine much happier and they don’t even require any changes to your current pages (other than changing your links to match the new URL format.)

7. Check cross-browser compatibility! This doesn’t really help SEO, but you just need to do it. Yes, that means checking in IE6 for the time being. It’s nothing short of a pain in the ass, but there are still a few people out there using it. The best thing to do is use something like Google Analytics to track visitors to your website and make an assessment after a few months of the site being public. From there you will be able to tell if a considerable portion of your users are IE6-tards. Don’t forget about checking your stie on a Macintosh. The resolutions and fonts of a Macintosh are very different from a PC. If you want to see how your site looks in Safari on a Macintosh, you can use the free sample service of Browsr Camp. They offer many more browsers, but you have to pay to use the rest.

There are also a few other things that help SEO, but they are out of your control such as the seniority of your website. More times than not, a site that has been around at least a year will rank much higher than a new website. There have been cases where a new website will have many links to it from very popular websites that drive the ranking of the website much higher than a new website usually is.

As many of you know by now, the attribute ‘target’ will not validate in an XHTML document. This creates quite a few problems for us because we don’t always want people leaving our site entirely. With a simple JavaScript code you can easily open external links in new windows unobtrusively!

First, make a link with the class ‘external’.

<a class="external" href="http://www.mvied.com/">MVied Designs</a>

Now apply this to an external JavaScript file named external.js and upload somewhere on your site.

function init() {
 var links = document.getElementsByTagName('a');
 for (var i=0;i < links.length;i++) {
  if (links[i].className == 'external') {
   links[i].onclick = function() {
    window.open(this.href);
    return false;
   };
  }
 }
}
 
if(document.childNodes) {
 window.onload = init;
}

And link to this javascript in your header with a script tag. Don’t forget to change the location of the javascript file to where you uploaded external.js.

<script type="text/javascript" src="http://example.com/js/external.js"></script>

I’ve seen a lot of functions out there that handle the much adored input clear on focus. This is a nice feature to have on your site especially on search boxes. Also, according to usability standards, you are not supposed to leave any input field blank. The value of your input fields and textareas should describe in detail what it is the user should be putting into the form field.

There are many ways to go about accomplishing this feature. The best way to accomplish this is with this code that I found at Perishable Press. Many others have chosen to do this by adding inline JavaScript to their HTML markup, and we all know that that is a big no-no in today’s world. Today, with the use of the powerful Document Object Model, or DOM, we are able to manipulate our markup without actually changing anything.

Let’s get down to business. Now if you’re like me, you’ve found this article from Google and you’re working on a project and you’re in a rush, so here’s the code so you can continue your project. Put this into an external file named inputclear.js and upload it to your server.

function init() {
 var inputs = document.getElementsByTagName('input');
 for(var i=0; i < inputs.length; i++) {
  inputs[i].setAttribute('rel',inputs[i].defaultValue);
  inputs[i].onfocus = function() {
   if (this.value == this.getAttribute('rel') && this.getAttribute('type') != 'submit' && this.getAttribute('type') != 'reset') {
    this.value = '';
   } else {
    return false;
   }
  }
  inputs[i].onblur = function() {
   if(this.value=='' && this.getAttribute('type') != 'submit' && this.getAttribute('type') != 'reset') {
    this.value = this.getAttribute('rel');
   } else {
    return false;
   }
  }
  inputs[i].ondblclick = function() {
   this.value = this.getAttribute('rel')
  }
 }
}
 
if(document.childNodes) {
 window.onload = init;
}

Afterwards, add link to this javascript in your header with a script tag. Don’t forget to change the location of the javascript file to where you uploaded inputclear.js.

<script src="http://example.com/js/inputclear.js" type="text/javascript"><!--mce:0--></script>

This code can also be used to clear textareas by changing this line:

var inputs = document.getElementsByTagName('input');

To this:

var inputs = document.getElementsByTagName('textarea');