the 200ok weblogblogger tips for web developers
I've been using Blogger since 2001, so I'm pretty familiar with how it works (or doesn't, in some cases). I thought I'd share a few tips for anyone who might be using Blogger for the first time.
initial configuration
There are couple of key things to be aware of when you start:
- You definitely need to go through [Settings → Formatting] thoroughly.
- It sets the timezone and timestamp format, for a start.
- It also lets you set up a "post template", some preset markup to appear when you start a new post.
- Blogger has two templating systems: the newer "layouts" and the older "classic templates". Layouts are only available if you host on blog*spot, either with a blogspot.com URL or by using a custom domain name. If you host your site on your own server, you cannot use layouts - you can only use templates. Since I host my own sites, all the following instructions relate to templates.
- The blog design is controlled by one single template (HTML with some "blogger tags"), with conditional code for different page types.
- Get to know the conditional Blogger tags.
- They let you change display for the homepage, post pages and archive pages.
- Note that label index pages (tag pages) get the homepage template.
- Change or disable the Blogger NavBar in the Template tab.
- You can choose a suitable colour or turn it off.
- You can only turn it off if you are hosting on your own site.
- Some tags only work inside the
<blogger></blogger>tags, others work anywhere.
better titles
Blogger's default <title> choices aren't to everyone's taste:
- Main/index page
- Name of blog
- Post/item page
- Name of blog: title of post
- Archive page
- Name of blog: Month YYYY
The homepage isn't really an issue, but for post pages I prefer the post title first and then the blog name. That is, put the most specific information first - it's more readable and better for SEO. I'd prefer to follow that scheme for archive pages too, but the date is only available in the preset format. The best you can do is add the word "archive" to clarify things a bit. This solution is adapted from Blogger Meta Tags:
<mainpage><title><$BlogTitle$></title></mainpage>
<ArchivePage><title><$BlogPageTitle$> Archive</title></ArchivePage>
<itempage><title><blogger><$BlogItemTitle$></blogger> | <$BlogTitle$></title></itempage>
This will produce:
- Main/index page
- Name of blog
- Post/item page
- Title of post | Name of blog
- Archive page
- Name of blog: Month YYYY Archive
You can use the same solution to control the contents of meta tags.
avoid indexing of duplicate content
Blogger's archive pages include the entire post. What that tends to do in Google is return sometimes-bizzare combinations of keywords, or your archive page will rank more highly than the specific relevant post.
I do two things to try to stop this. First, I use rel="bookmark" in links to posts; and I include relevant robots instructions on archive pages:
<ArchivePage><!-- Don't index duplicate content --><meta name="robots" content="noindex,follow" /></ArchivePage>
This seems to work, but YMMV.
control inserted code
Out of the box, Blogger will top and tail your posts with <div style="clear:both;"></div> and <div style="clear:both; padding-bottom:0.25em">. This is primarily to enable float-based positioning of uploaded images, without forcing your average blogger to learn float layouts. For similar reasons, line breaks are converted into <br /> tags.
To disable these settings, go into [Settings → Formatting]. The options are "enable float alignment" and "convert line breaks" respectively. If you disable the line breaks option, note that you will have to add paragraphs yourself. This doesn't bother me as I generally don't use the inline editor to write long posts anyway.
whitespace
Whitespace isn't ideal - Blogger does mess around with it a little. One thing to be aware of is that conditional code will leave whitespace. So if you have three options on three lines, you will always get three lines in your source code. Only the relevant lines will render anything. If this bugs you, put all the options onto one single line.
Also, only the first line of your post body will be indented correctly. All following lines will be flush left. This doesn't happen to comments so I assume the whitespace rules expect one big div or paragraph with break tags. I don't think this one can be fixed.
annoying things you can't change
There are some things I've not yet found a way to change.
- Tags are called "labels" and are appended to your post in their own paragraph:
<p class="blogger-labels">Labels: <a rel='tag' href="URL">tagname</a></p> - Label index pages show the full text of every single post. So, if you publish a lot with that label, that page is massive. It needs pagination, or an option for summary view.
- Line breaks in comments are converted to uppercase breaks -
<BR/> - Comment attribution comes with a hard-coded icon indicating the commenter's authentication method and their supplied name (or "anonymous") as in this example:
<span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="http://www.blogger.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span> <span class="anon-comment-author">Anonymous</span>... well ok, you can "change" this by using display: none; and inserting your own chosen code. But, the original will still be in the markup. - If you upload an image through Blogger's interface, it displays at 400px wide and links to the larger image. Of course, if you want your images to be 400px wide this is a brilliant feature! ;) Personally when this is an issue I just upload images manually, or use Flickr.
If any of those are deal-breakers for you, Blogger might not be the right tool. Personally I've decided I can live with them - although yes, that does mean I had to accept my post pages won't validate when comments have line breaks. That's an annoying validation error, but not one which causes actual problems. So I've decided that yes I can live with it.
a gripe about support
Blogger is massively popular. While that's cool and all, it does mean that the support system is basically designed to avoid tens of thousands of low-expertise users spamming their inbox. It's all done by volume, near as I can tell - you vote for features and you effectively vote on bug priority. It's understandable, but you still feel a bit like you are shouting into a void when you try to send feedback.
conclusion
I've never claimed Blogger is a perfect tool. There are plenty of things I'd change, but overall it's pretty good and you can produce a good quality site - break tags in comments aside :)
In a way, the thing to accept with Blogger is that - like most popular blog tools - it's aimed more at the mass market than professional web development. That does introduce a few limitations, but overall it's still a well-featured tool that's really easy to use.
Labels: blogger
