Website Creation Checklist

Here is a list things that you should consider for every website you make. These are things that are very often overlooked. Pick any website you've made and I bet you skipped some of these steps. This page assumes that you are a web developer and are used to creating websites already.

I've been coding websites since 1994 when the web first came into existence. The web is the best printing press ever. :-)

A favicon

Favicon ExampleThe favicon is the little icon in the upper left corner of a website. People don't usually bother making a favicon image for their website. But it's easy to make, it's fun, and useful for helping folks who visit your site identify which tab is which. If you want to make your own favicon or pick an existing favicon image, the most popular site is favicon.cc . Just make the favicon.ico file and put it in the home directory of your website.

Add Open Graph meta data

When people link to your website on Facebook, it may not look like what you want. It tries to find an image and a description of your website, but without being told what to do it often gets it wrong. Thankfully, you can tell it exactly how to present your website best. In this era where Facebook is so vital, this is kind of a critical step.

DEFAULT = BAD! Without setting open graph data

Open Graph facebook exampleThis is an example of what posting a website into Facebook will look like without making any custom Open Graph tags. The image Facebook pics and description it picks might be good or they might not. But it's certainly better if you pick what shown.

CUSTOM = GOOD! setting Open Graph data + a custom image

Open Graph facebook exampleThis is an example where I made a custom image for the site and specified the description I wanted. The image you pick for the icon does not even need to be an image on that page. I typically make custom images to show.

Here is sample meta code for this

Note that I also included the traditional meta tags "description" and "keyword".

<title>Hire Julian Cash — Home Page</title>

<!-- Open Graph (Facebook) metadata -->
<meta property="og:image" content="http://hirethisgeek.com/os6_d4_f0489-Edit.jpg"/>
<meta property="og:title" content="Hire This Geek"/>
<meta property="og:description" content="Hire personable geek Julian Cash - Project Manager, Software Engineer, QA, System Admin, Database, Tech Writing, Tech Support, and more. Let's create amazing tech together."/>
<meta property="og:site_name" content="Hire This Geek"/>
<meta property="og:type" content="profile"/>
<meta property="og:url" content="http://hirethisgeek.com" />

<!-- Traditional metadata -->
<meta name='description' content='Hire personable geek Julian Cash - Project Manager, Software Engineer, QA, System Admin, Database, Tech Writing, Tech Support, and more. Let's create amazing tech together.' />
<meta name="keywords" content="project manager, programmer, computer programmer, php, web, QA, system administration, tech support, customer support, open source, perl, php, startup"/>

If you want to learn more about Open Graph

To learn more about Open Graph tags, go to the opg.me website. If you have a movie to go with your website, you can indicate that with Open Graph and when your website gets posted on Facebook, it shows an embedded movie rather than an image. For the right site, such as my Burning Man book, this is very useful.

Debugging and testing

Never just assume that you got the open graph data correct first time. Always tested using this debugging page. Facebook is annoying in that it caches (for several days for all of Facebook) the image and info for a site/page the first time it's posted.

Don't forget your Google listing

google listingIf you don't specify a "<meta name=description" tag, as shown above, your listing in search engines might not look like what you want it to look like. Some very cool websites still get this wrong and their listing in search engines ends up lame.

Social Networking Buttons

Consider adding a facebook "like" button and a twitter button to every page. You may want to use tools like ShareThis or AddThis. These allow a quick way to let people share each page via a social network. I recommend going for a simpler approach where only the main social networks are listed as a share option.

Add Google analytics

Go to Google Analytics, make an account, add the info for your site, and add the code Google gives you to the header or footer of your site, so that it's on every page. Looking at the refers so that you can see where your web traffic is coming from is a supreme goodness! And Google analytics, of course, shows far more than that. If Google Analytics is a bit to geeky for you, other alternatives are Clicky, Chartbeat, and others. To see a biased chart made by Clicky, look here. If the site is really important, adding more than one metric tool is probably a good idea.

SEO Basics

Floating Face of AllegraSEO (Search Engine Optimization) relates to how high your website and web pages show up in search engines. There are many people who build their entire careers over fine-tuning this, but if you follow a few simple rules, that gets you 90% of the way there.


Pick the words you want to promote. For this example, let's say you want "floating faces" to find your website and or web pages. Then systematically use those keywords in every place where a search engine will look, Such as the...

A few other basics

A few other standard things to consider

Contact Julian

Get in touch and chat about your company or project.

Julian Cash     415.738.9385     julian@HireThisGeek.com or see the contact page.

BusOps Systems
BusOps Philosophy
Project Management
System Admin
Image Fun