What Google Looks For

January 29, 2010

SEO has been a hot topic especially in the last few years as the number of websites on the Internet has increased and being easily found on most search engines has been increasingly difficult. Everyone who has a website is looking for ways to make their site more accessible to Google and other modern search tools, so what are the basics? How can you take your website and bump it up in search engine rankings? Here are some clues.

URL

This is the first thing that Google looks at. If your URL is the same thing as what you are searching for, chances are, it will be the first result in Google. If you don’t believe me, try Googling “Tyson Lloyd Cadenhead.”

Keywords

The keywords found in your meta tags have become an increasingly smaller factor when it comes to optimizing your site, but they still weigh in. If you’re writing your website content with a dynamic language such as PHP, Coldfusion or C#, it’s fairly easy to dynamically populate the meta tags for each page based on the content in the page. For an example of how to implement meta tags into your site, check out this article on How To Use HTML Meta Tags. Something to remember is that only the first 200 characters of the <description> tag and typically less than 10 words in the <keyword> tag will be indexed by Google

Another thing to consider is the actual words in your content as well as what HTML tags they are encapsulated in. For example, an <h1> tag will be given higher priority than a standard <p> tag. Always put your page titles inside a <title> tag in your <head> section as well as inside an <h1> tag near the top of the page. Page titles are given high priority when Google is indexing your site.

On a similar note, navigation and listed items should always be contained in <li> tags like this:

   
<ul>
   <li>item 1</li>
   <li>item 2</li>
<ul>

When Google can tell that something is a list, it reads it like a list instead of giving a messy summary / description on the search page which will confuse and drive away potential visitors.

Images

Images should always contain an alt tag with a description of the image. Never use images to render text (except for the case of an advertisement or logo.) Search engines like real text. If you need to use fonts that aren’t supported on most operating systems as “web fonts,” try a font rendering script like typeface.js, sIFR3, or my favorite, cufon. These lightweight scripts allow the text to be rendered traditionally and then create dynamic images and add them through the DOM, which insures that search engines only see the web text. Another positive point about these scripts is that they allow you to use dynamic text as opposed to creating individual PNG files that may need to be painstakingly changed later on.

Announce your presence

Google actually wants your page to be indexed. Why wouldn’t they? Having the best search results is what has made them internationally known as the preferred search engine. Because of this, Google offers Google Webmaster Central which makes it easy to let them know that you’re out there. If you have a site that is opened to the public, they will inevitably find you no matter what, but Google Webmaster Central allows you to get indexed faster and to have more control over how Google sees you and what they do with your site.

One thing you’ll definitely want to provide is an XML sitemap on your website. This tells search engines various things about your site such as where to find your subpages, when the content was released (breaking news gets a better ranking than old news from within your site) and the frequency that your site is updated. If your page is static, there are tons of resources such as xml-sitemaps.com which dynamically generate sitemaps for you. If your site is dynamic, look up a tutorial on how to make a sitemap that is generated dynamically in the language you use.

You’ll also need a robots.txt file in your website root directory. This file tells Search Engine Spiders which sites to index and which ones to ignore. For example, if you have an embarrassing baby picture in your website directory, you can explicitly tell search engines to ignore it here. This isn’t good security because it’s still opened to the public and not all search engine crawlers use robots.txt, but it’s a start. You can also reference your sitemap in the

   
UserAgent: *
Disallow: /
SITEMAP: http://www.yoursite.com/sitemap_name.extension

For more information about the robots.txt file, check out robotstxt.org

Allow Interaction

Your viewers and users are an invaluable resource. They have skills, opinions and questions that could benefit your website. Let them comment, add opinions and ask questions on your site wherever you can. It’s a little more risky than generating all of the content yourself because the control is not completely in your hands, but the benefits are great. If your visitors are commenting on your blog, for example, Google will look for keywords within their comments. Tap into APIs from social media and social networking sites such as Facebook, YouTube, Twitter and Flicker. If Google sees the same content on multiple sites, it will assume that your content is relevant.

Obviously this is just the tip of the iceberg when it comes to SEO. I will try to write more on this topic in the near future because I feel like I’ve barely skimmed the surface. Remember that your best tool is your content. Make it relevant and people will be looking for it.

Code Seperation

January 28, 2010

A couple of years ago, if you had asked me what my take on design patterns for internet applications was, I would have probably given you a blank, questioning stare. You see, as sad as it is, proper design and architectural patterns aren’t exactly the norm in the web development world. Today, I’m going to give you a quick overview on what architectural design patterns are and why they’re important and then focus in on MVC.

I like to have all of my code in one file. Isn’t that the best way?

When I first started making websites, I was 13 years old. This was just when the internet was becoming something more than a place for email and messaging groups. I set up my first website, which was a Star Wars fan page on Geocities and I was very satisfied with it. The problem was that within about a week, I wanted to change my neon-green typefaces to red. The problem was that I had hard-coded each of my headers to be shown in that brilliant neon-green. I couldn’t just flip a switch or re-write a single line of code and change my beautiful comic-sans typography, I had to go through every single page and change every single hexadecimal value. This took hours. It took so long, in fact, that by the time that I was done, I had changed my mind and decided that I would prefer a blue typeface instead. This was before I knew anything about external style sheets, and in all actuality, I’m not entirely certain that my early version of Internet Explorer would have even supported them.

Fast forward ten years. By this point I’ve learned the importance of having separation in my client-side code. I have all of my Javascript, CSS, flash, images and media sitting in their own tidy folders and I’ve even gotten a master page and includes. Let’s even say for the sake of argument that I’ve been able to stay away from writing inline queries to my database and I even have a code-behind file doing the actual work for each of my pages. I’m doing pretty good, right? Wrong. The code still isn’t all that separated. My code-behind file is a jumble of actions that the page is supposed to perform, queries to the database, whether inline or through a function, and display logic. When you have an entire development team working to decipher and update code under these circumstances, you end up with confusion that hasn’t been rivaled since the tower of Babel. There has to be a better and cleaner way to create code, right? I’m glad you asked. Enter architectural patterns.

What are architectural patterns? Why do I care?

There are a large number of architectural patterns out there for development. Some of the big important ones are:

The basic idea behind all of these is to separate the coding logic into bite size pieces that can be easily found and manipulated and that link to the other related pieces correctly. If you’re a developer, these patterns will help you easily manipulate your own code and it will help anyone who comes after you as well. If you are hiring a developer, it will save you money because instead of wrestling to get a project working, your developers will be dancing with the project.

What is MVC?

MVC is an acronym for Model-View-Controller. In this design pattern, every page is associated with a model, a view and a controller, which can all be found in appropriately labeled folders.

Controller
When someone goes to a page, the controller is accessed. It essentially acts as a traffic director, telling the browser what to do. The controller will look to the model and to the view.
Model
The model handles all of domain-specific data. If your application uses a database, the model interacts with the database and builds objects that can be accessed in the view and in the controller. It passes the objects back to them.
View
The view is the display. The view accesses any objects that are built in the model or in the controller. Think of this as the display.

This is just the very basic beginning point to understanding code separation and MVC. For further reading on this and many other exciting subjects, subscribe to our RSS feeds and stay tuned.

Killing IE6

January 27, 2010

Microsoft released Internet Explorer 6 nearly eight years ago in August of 2001. Since then, they have released two new versions of their web browser, IE7 and IE8 and have officially stopped supporting the outdated cousin, IE6. So why is it that most web developers are still supporting a browser that even Microsoft itself has turned its back on?

Here are some interesting statistics on the use of Internet Explorer 6 according to w3schools.com:

In May of 2008, 27.3% of Internet users were using the IE6 browser
By May of 2009, the number had dropped to 14.5%

The number is still significantly higher than those using Google Chrome, Safari, Opera or even IE8 at this time, but it is rapidly decreasing and it is my suggestion that we as web developers continue to aid in its decline. What’s wrong with IE6? You might ask. Here are a few things I’ve noticed in developing web pages:

There is no support for PNG images built in to the browser. For those of you who don’t know, PNG images allow web designers to have clean transparencies and shadows in their designs in a way that a GIF image never could. Each pixel in a GIF image is either completely transparent or it is completely a color – there is no way to have an image gradually become transparent semi-transparent. This often results in transparencies that appear grainy and are unusable for good web design. There are Javascript and CSS workarounds that “fix” PNG files, but every one that I’ve had experience with takes a little longer to load and looks bad during the process of loading.
Bad rendering of style sheets. IE6 renders several tags such as float, padding and margin completely differently than any other browser. Many of these issues were resolved in Internet Explorer 7. This is one of the reasons why most websites either use IE6 hacks or IE6 conditional stylesheets to correct the little abnormalities that plague the IE6 styling.
Flickering rollover images. When you use background images as rollovers with the :hover property in CSS, the image will flicker. This can be solved using Javascript, but who wants that?
Min-Height. The Min-Height CSS property doesn’t work at all.
Crashing. The IE6 browser is extremely buggy and there have been many instances of simple code crashing it.
Fixing time. Most developers use 1/4 to 1/3 of their time fixing stylesheets and Javascript for Internet Explorer 6. Isn’t there a better way to spend our time?

So what should be done about the IE6 browser? How can we bring down the number of users from 14.5% to 0%? My solution is to use a simple Javascript script targeting the IE6 browser and calling the users to upgrade their browser to IE8 or Firefox. If the IE6 users begin to find that they are unable to navigate the web effectively because every other site is calling them to upgrade, they just might decide that they can spare 30 minutes and install a browser that wasn’t produced eight years ago.