Tutorials

After primarily working with Drupal 5, I wanted to update my SEO skills for Drupal 6 and went through a bunch of tutorials to sum up all the steps and modules required to make a Drupal 6 site ready to be found by all major search engines.

1. The one main requirement is to enable clean URLs. That option can be found at admin/settings/clean-urls
2. Secondly, install and configure Pathauto and Token. Pathauto automatically creates nice-looking paths when creating nodes. Token isn't necessarily required, but a nice addition to use variables in your paths.
   Once you've configured Pathauto and are satisfied with how your URLs end up looking, configure Pathauto so URLs don't change if you decide to change the title of a node in the future. You can find that settings under /admin/build/path/pathauto under General Settings / Update Action.
3. Next, download and configure the Meta Tag module. This module allows you to configure global and node-specific description and tags. The Meta Tag module is actually called nodewords.
   Note: I'm using FCKEditor 6.x-1.3-rc3 and nodewords 6.x-1.0-rc1, which don't play well together when creating a new node. My fix / workaround was to disable FCKEditor on the "New Story" page completely and open it in a popup.
4. Then, install the Global Redirect Module. This module makes sure that trailing slashed at the end of URLs are removed. More importantly, it fixes the problem that your URLs are accessible via your URL alias and the node/xxxnumber structure. In general, having duplicate content can decrease your search engine ranking.
5. Install the Page Title module. This module allows you to manually set the page titles of nodes. In the eyes of a search engine, page titles represent one of the more relevant characteristics and will increase your search engine ranking.
6. Modify your .htaccess file to always redirect to www.yourdomain.com, even if visitors come to yourdomain.com. You can find the rewrite-rules in the .htaccess file, you just need to modify them with your domain name and uncomment them.
7. Optimize Drupal's robots.txt file. This file defines the rules about what folders of your site can be accessed by search engines. Here's a great tutorial with several modification suggestions: http://tips.webdesign10.com/robots-txt-and-drupal. Once you're done, upload your robots.txt file and verify that it's structured correctly with this Robots.txt Validator.
8. Finally, make sure your theme is XHTML compatible. Make sure your DOCTYPE declaration is suitable for your needs. I decided to make my danielhanold.com compatible with XHTML 1.0 Transitional, as the Strict declaration doesn't allow to set the "_target" attribute. You can test the validity of your document at the W3 Validation Tool.

There are quite some steps involved to get your content indexed well by search engines. However, if you spend all this time creating great content, I think it's worth the time optimizing your site to be "indexed" the best it can.

If you're into transparent images and don't want to battle the 256 colors limitations of GIF files, then transparent PNG images are perfect for you. I usually develop on Firefox, where thinks seem to be a lot more stress-free than Internet Explorer, but know that I need to worry about compatibility.

Unfortunately, Internet Explorer 6 doesn't support transparent PNG images out of the box. Gladly, that's easy to patch: TwinHelix provides an HTC file that enables transparent PNG images for Internet Explorer 5.5 and higher. For anyone who's curious: HTC stands for HTML Component and provides a mechanism to implement components in script as Dynamic HTML behaviors.

Here's the tutorial to install this patch. I'm using Drupal 6.6, my theme is called EasyBreeze.

1. Download the latest version of the HTC file here: http://www.twinhelix.com/css/iepngfix/
2. From this package, copy iepngfix.htc into your theme directory (in my case sites/all/themes/easybreeze/)
3. From the same package, copy blank.gif into the images directory of your theme (in my case sites/all/themes/easybreeze/images/)
4. Open iepngfix.htc with a text editor and look for this line:
   if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';
   
   Add the correct path to blank.gif. In my case, this would be:
   sites/all/themes/easybreeze/images/blank.gif
   
   The complete line should read like this:
   if (typeof blankImg == 'undefined') var blankImg = '/sites/all/themes/easybreeze/images/blank.gif';
5. For the final step, we need to make sure this script is called whenever a transparent PNG file is loaded. Luckily, this can be done via CSS. To enable the patch, add the following line to your CSS file (style.css):
   img {behavior: url(/sites/all/themes/easybreeze/iepngfix.htc);}
   
   Modify this line of code to match your theme location. If your theme uses an IE-specific CSS file (e.g. fix-ie.css) in addition to your usual style.css file, you should modify that file.

That's all you need to do to enjoy beautiful PNG images using Drupal.