Category Archives: Web Development
Friday, February 13th, 2009
Get in line, privates! Over the next few months, I am going to run you through the paces and get you soldiers in shape. When we are done you’ll be ready for the front lines of the Internet — the search engines.
There are methods to help you improve your ranking on the search engines. There’s no quick fix, and there’s no magic bullet. If anyone claims a “guaranteed” top result on Google, I would be skeptical. It takes a lot of hard work to master the art of search engine optimization. You can do everything right and still not make it in the first 3 pages of Google — at least right away.
…Now on our first day of training – meta tags. Definition of meta – referring to itself; self-referential. So, meta tags refer to the document they are in, more specifically, the content of the page they are in.
We are going to focus on the two most important meta tags for SEO (though there are more) – keywords and description. They go in the section of your HTML document like so…
1
2
3
4
5
6
7
| <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Your keywords go here..." />
<meta name="description" content="Your description goes here..." />
<title>Cakey Cakes</title> |
The Keywords Meta Tag
1
| <meta name="keywords" content="Your keywords go here..." /> |
What are keywords? They are important words or phrases used on your page. Basically, it is a list of search terms that you think search engine users might use to find your page.
Let’s say your site is for your cake decorating business (Cakey Cakes), specializing in customized birthday cakes, based out of Pittsburgh, PA. Your keyword list (the content property of the tag – where it says “Your keywords go here…”) for the home page, might be “pittsburgh cake decorating, custom birthday cakes, bakery, cakey cakes.”
In general, keep this to at most 8-10 words. These words and phrases should appear in your content (and if possible in your description). Also, your content is (or at least it should be) different on every page – your keywords should be too.
Just a warning – DO NOT TRY TO TRICK THE SEARCH ENGINES! Don’t try to use keywords that don’t really correspond to the content of your site. The search engines are smart enough to figure this out and actually penalize your for trying to cheat (possibly by even removing your site entirely). For shame!
Sometimes it is best to try for some non-obvious (but still relevant) search terms. It is really a cat-and-mouse game. Search engines are always changing the algorithms that determine their rankings. Patience and persistence pay off.
The Description Meta Tag
1
| <meta name="description" content="Your description goes here..." /> |
The description meta tag is exactly what is sounds like – it is a short description (just a short sentence or two – try to keep it under XYZ characters) of the content on the page. Just like the keyword tag, this goes in the content property of tag.
Be sure to include a liberal dose of your keywords, but don’t do too much to crowbar them in. The sentence should make sense as some search engines will choose to use this in their search results.
For our Cakey Cake example, the home page description could go something like “Cakey Cakes is a Pittsburgh, PA based, full-service bakery specializing in custom birthday cake decoration.” See how it contains a lot of the keywords, but sounds natural. That is what you are going for.
Just like the with the keywords – DON’T TRY TO CHEAT! It will not pay. Because people have tried to cheat the search engines before, these tags are now not extremely important for search engines, in fact, some just discard them. It is however good practice to include them on your site, it can only help and it can help you to fine tune the content on your website.
That’s it for now, soldiers! Fall out!
Category: Web Development | Tags: search engine optimization, sem, seo, web development
Thursday, October 30th, 2008
This is a great little article about what should be included in all websites. I couldn’t have written it any better myself, so I won’t try to reinvent the wheel (notice just the navigation needs to be “above the fold”).
Link: 15 Key Elements All Top Web Sites Should Have
Category: Web Development | Tags: css, html, web design, web development
Thursday, October 23rd, 2008
I am working on my first site without Dreamweaver in about eight years. It is a little scary, but I think Coda is more than up to the task. I am going to write my impressions of the program as I work on building a Photoshop mockup into HTML. Gotta start out slow… breaking up is hard to do.
10:12 am
I just finished setting up a site in Coda. It was really simple. I love the built in Terminal functionality – it allowed me to setup the site on my testing server without opening up a separate window. Real slick. Only issue… I normally start a site with a standard set of files (a basic header/footer and reset CSS) and I’m used to copy/pasting that from site to site – Coda can’t do that.
10:15 am
*SOLUTION* Didn’t take long to find a solution for the problem up above – CLIPS! This is way better even. You can save snippets of code (on a site or global basis) and easily insert them into your documents with just a few clicks (and even keywords). Very handy!
For example, now if I type “baseCSS” + TAB into any document, my standard base CSS is automatically displayed. Awesome, yes?
10:18am
More awesomeness, if you cursor over (or type) an ending curly brace } or parenthesis ), Coda automatically shows you the corresponding brace or parenthesis it is closing with a neat little bubble animation.
10:31am
Coda even has a built-in Lorem Ipsum (http://www.lipsum.com) generator. How about tossing this into Photoshop, Adobe?
10:36am
Coda seems so snappy, so I checked out the good old Activity Monitor to see how it compares to Dreamweaver. Truthfully, they use about the same about of memory. Here’s the weird thing though. Dreamweaver is constantly using about 16-17% of my processor – even when I’M NOT DOING ANYTHING WITH IT! What are you doing with my processor, Dreamweaver? Coda uses 0%. Good deal! Also, I’ve noticed far fewer spinning beach balls (waiting icon) in Coda. I really don’t remember one. This round goes to Coda!
11:10am
I just discovered the Code Navigator. It allows you to easily navigate through whatever document you have open by clicking on automatically generated “bookmarks”. For example, in an HTML document, you can move quickly to an named HTML element (where you’ve set the id). You can also add specially formatted comments that will show up in the Code Navigator. I was a little bummed that Coda didn’t have “code collapse” feature that Dreamweaver has, but this is a more than adequate alternative.
11:18am
Coda’s file navigator is way more robust that Dreamweaver’s. Whenever I created new images in Dreamweaver, I would always have to hit the “Refresh” button to see the new files, but Coda automatically refreshes. I’ve haven’t had any problem not seeing a file that I knew was there.
11:22am
Coda also makes it easy to switch between code and preview modes (or any other mode – terminal, CSS, etc). Just CMD+2 for code view and CMD+3 for preview mode. It is quick and intuitive. I just need to install VMWare Fusion so I can integrate Internet Explorer into the preview modes. Then I won’t have to start up a virtual machine. No more Windows!
11:25am
Live validation mode rocks the socks, BUT it doesn’t work in HTML/PHP mode. Grrr… argh! There should be some way to do this. Could there just be a way to submit the resulting code from a live server to a validation server?
11:47am
Block-edit mode is a really cool feature in Coda. CMD+SHIFT+B puts you into block-edit mode. Any text that was selected when you went into block-edit mode, will then be appended with whatever you type until you exit block-edit mode (with ESC). This works good to comment out many lines of code, or indent sections of code. However it was easier to indent/de-indent in Dreamweaver, just select and hit TAB or SHIFT+TAB. I do miss that.
11:53am
Nevermind, you can easily shift large blocks of text left or right with SHIFT+[ and SHIFT+] respectively. Sweet!
12:12pm
Hmm… no popup hint menu for HTML entities (such as ® and »). I’ve come to depend on that. Should be easy to do right? I just added some common ones as Clips, but it should be easier.
1:00pm
Kind of a big problem… no way to do image maps? That’s a bummer. I had to open up Dreamweaver (it has a great image map interface where you can draw your clickable areas right on the image).
3:21pm
Love the “Publish All” button. It knows what has changed and just publishes those changes.
3:50pm
Finally done (I was working on some other stuff intermittently… I’m not that slow. Conclusion? I’m sticking with it. Dreamweaver won’t be uninstalled from my machine just yet, but I’m sure not upgrading to CS4. If you want to try out Coda go to the Panic Software site at http://www.panic.com. If you are an advanced developer, I think you are going to like it a lot!
Category: Web Development | Tags: coda, dreamweaver, web design, web development
