If you are using Firefox or Opera, look at my icon! Animated goodness - shiney!
In this quickie tutorial, I will show you how to add both types of Favourite Icon to your Movable Type blog engine templates, and also how to incorporate extra meta-tag information, which will aide in Search Engine placement slightly.
Disclaimer. This method works for me but it may not work for you depending on your server or the settings of your Movable Type installation. You will need to know how to use Movable Type, its plug-ins, templating system, and a little CSS. Secondly, I am not a professional programmer, only a professional designer (who has to make far too many compromises for his clients - hence this slightly experimental site) so everything written here should be taken with a pinch of salt, so if it does not work - don't panic! Backstep and try again - which leads on to my last point: back up everything prior to beginning any modifications to your site regardless of complexity.
Like I've mentioned in most of my MT tutorials, I like includes - you only have to write them out once and so long as you put a bit of thought into how they are used, you can reuse them in most of your templates. So with no further ado:
My current Meta Data:
<link rel="stylesheet" href="<$MTBlogURL$>styles-cloudnine.css" type="text/css" />
<meta name="author" content="Tim Knight" />
<meta name="robots" content="index,follow" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="keywords" content="Movable Type, CSS, Cascading Style Sheets, Design, Information, Blog design, blogging, photoshop, adobe, wordpress, html, xhtml, web design, photoblog" />
<meta name="description" content="Salt Pepper Vinegar, the personal design musings of Tim Knight using Movable Type." />
<link rel="shortcut icon" href="<$MTBlogURL$>favicon.ico" />
<link rel="icon" href="<$MTBlogURL$>favicon-anim.gif" type="image/gif" />
So, in your MovableType's blog Templates / Modules section, add a new template called Meta. Copy whatever is relevant to your blog, bearing in mind that the infamous Keywords meta tag is pretty much defunct in search engine algorithms due to the high abuse it received - but it's still worth having just to set the tone of the site, as a few search engines do factor it in.
After that, include the Meta template in your main and archive templates:
<$MTInclude module="Meta"$>
The include wants to be inthe header area, usually just under the stylesheet call:
<link
rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
Animated Icons
Of course, it helps to have an icon or two to represent your site in a graphical manner. All favicons have to be 16 x 16 pixels, from 2 to 256 colours (you can have True Colour icons, but then you're wasting file space and it won't be noticeable) - going back to my Amiga days when I used to make graphics for my friends games, a palette of 16 to 32 colours is usually adequate for such small images.
The hardest part of the exercise is finding that representative graphic - usually people have a neat picture that once it's been shrunk down always comes out as a brown blob. Which is why it's worth keeping the palette small and focus in on a simple shape - in my case a white tick against the primary colour I chose for the site. Which I then made appear as if it was being drawn by a pen.
OK, you have an idea for a graphic, how do I build it - simple use a graphics package that can save out animated gif's. The Gimp is an excellent choice, since it can do just that and it's free! Another choice is of course Photoshop - not free, but a serious art package for those that take the time to learn its usage.
Once you have your favicon.ico and favicon-animated.gif - save them to the root of your site (you can use the uploader in MovableType to do this if you don't have an FTP program), rebuild your blog templates, refresh the browser window and you're done.
So why do I have what I have in my Meta section?
Firstly a link to my CloudNine style sheet, see my tutorial.
Next, since I'm the only writer on this blog, I put in an Author meta name - but for multiple author sites, I'd go with the site/group name or drop it altogether.
The infamous Robots call - you can put in nofollow, noindex as well - but in general we all want to encourage robots to index out sites. You should also have a decent robots.txt file in the root of your site, which will let them know what they can index.
The imagetoolbar is an IE specific meta tag, since it turns off that annoying toolbar that pops up over images - it doesn't disable any functionality, users can still right click and save images.
Keywords - the general trend nowadays is to ignore the keywords meta tag due to the depreciated nature of it, but I still feel it's worth typing out twenty or so to describe your site. On the whole, content will outweigh keywords anyway so work on that more than straining your brain on variations on the word "blog".
It's worth adding a Description, since some search engines will display that next to their results - others will grab the first x number of words at the top of the page, which depending on your design may include menus or possibly an inappropriate entry to reflect your site's overall dynamic until the next update.
And finally, the Favicons. The first is the standard favicon call, followed by the new shiney one. The latest browsers will read both and use the latter, so enabling you to have a shiney animated icon.
Additional resources:
http://www.html-kit.com/favicon/
http://www.submitcorner.com/Guide/Meta/
http://www.robotstxt.org/wc/meta-user.html
http://www.widexl.com/remote/search-engines/metatag-analyzer.html
Leave a comment